Chris Jarling

Water taps are great right? You approach them, demand for clean water and (given they are connected to a water pipe) they just give you some. Not too long ago, that was a task that took people half their days. Heck, even today in some countries thats the case.
The design of water taps is more or less the same across all the various models you can buy. Sure, they have subtle changes, but the vast majority of them has some kind of control atop with which you can control the the amount and (in the most cases) temperature of the water.
It never occurred to me to even think about that design. Thats just the way it ever was. I just accepted it as perfect. If it works for so many people across so many countries for such a long time, water taps surely must be a solved problem.

A few days ago, I watched this video about a guy who lives in an old silo with his daughter (which is, by the way, pretty cool). At one point in the video, he demonstrates his water tap, which is controlled with feet. He says, he’s wasting a lot less water this way, and since the house is not connected to the grid, they need to be mindful about the amount of water they use.
And he’s definitely right. When I’m washing my hands, while applying soap, the water is running for a second or two, when it really doesn’t have to be. This might not be a huge amount of water, but it sure will add up over time.

Having foot controls on a water tap seems to be a huge improvement. So why are almost none of the water taps you see controlled by foot? A quick google search did not yield many results. There is one entry on quora that asks this exact question. Some people do have some valid points there.
For example, you cannot control the amount an temperature of water with a basic foot control. While that is true, I’m sure there are some ways to work around this and make such controls possible. Another valid point is that people that cannot use their feet for any reason may not be able to control the tap that way.
It seems like a simple foot control is not the best solution for the problem, but neither is the current design of water taps.

What I’m going for with this post is not to challenge the way water taps are designed today (well, maybe a little), but to just point out how things do not necessarily need to be “right” just because they have always been that way. I may have used water taps as they are today for my entire live, but show me a solution to get fresh water that is just as good and leads to 50% water savings for a reasonable price and you’ll most likely have a new customer.

TL;DR: Use fill: currentColor on the svg, then control the svg’s color via its parent’s color property.

I decided to start writing down things that I learn. In the first place, for me to remember them. I tend to forget things rather quickly and having them written down helps me remembering . I used to shove everything into this repository, but writing my learnings down here forces me to spend more time and thought with them, so I’ll remember them better. At least thats the plan.
I often tend to think “Oh, thats so basic, this isn’t news to anybody but me, so why should I even write about it?”. But if I searched for it, there’s a decent chance someone else will do the same some day. So, here goes nothing.

I recently found myself in a situation where I built a button with an icon and a label in it. The basic markup looked like this:

const IconButton = ({ someprops }) => (
  <button
    onClick={() => onClick(value)}
    isActive={isActive}
    syles={}
  >
      <Icon icon={icon} size={40} color={someColor}/>
      {children}
  </button>
)

You may have noticed that this is written in React. The <Icon> component is a rather simple one, that takes an svg path as an icon prop and renders it as an <svg> tag, applying some styling, like the size and the color.

const Icon = ({ size, color, icon }) => (
  <svg width={size} height={size} viewBox="0 0 1024 1024">
    <path style={{ fill: color }} d={icon}></path>
  </svg>
)

By default, the border of the button and its content should be grey, becoming rose on hover.
When I originally wrote this component (as part of my bachelor thesis), I was just starting out with React. So my naive approach was to just listen to onMousenter and onMouseLeave events, to change the color of the button and the icon. Even though all roads lead to Rome, this one is probably the hardest one you could travel on.

When I stumbled upon this component a few days ago, I though that there must be a simpler solution. First of all, the native <button> element already listens to hover events and activates the :hover pseudo-class, so there really is no need to write that logic myself. Changing the border color of the button and the color of the text was as easy as adding the CSS rules to the :hover pseudo-class.
But since the svg-icon had a color fill assigned by the <Icon> class, the color wouldn’t be changed by that.

The next solution coming to mind would be to just change the fill of the svg when the button is in hover state, maybe like so:

.button {
  &:hover {
    // button hover stlying
    > svg {
      fill: rose;
    }
  }
}

While this works just fine, I’m not a fan of the deep nesting and the usage of the child-selector here. But there is an even simpler solution: Providing fill: currentColor to the svg. This will lead the svg to adapt the color provided to its parent through the CSS color property.

So, for my particular use case, I just changed the default value of the color props in the <Icon> component from white to currentColor, so the icon now just inherits whatever color the parent element has when not explicit color is provided. Everything else came down to some CSS rules for the button.