Forem: Artur Osypenko

Button react styled component

Artur Osypenko — Sun, 22 Mar 2020 18:01:57 +0000

From one project to another, I see the need to create my own set of shared UI components. For the first time, common public UI frameworks and libraries work well. But none of these projects work for me in the long run because it is always not enough flexibility. Sooner or later, you will face a situation when business requirements do not match available component props. You will create the wrapper with basically broke logic of the original one component and overwrite a bunch of styles. That is why better to put effort into improving knowledge in creating components from scratch. In my experience, 99% chances that you will hit that road.

Without dispute about correctness, this is my recipe for on shared components:

React, because that how I wired up.
Typescript because it provides better instrument then PropTypes for controlling props. And the code becomes self-documented. Even though typescript !== documentation tool, it is better than nothing
Styled-components because it provides fully isolated components. Isolated on javascript and style levels. Even though some global styles are still been in use.

Setup platform for UI playground without going to details:

Create-react-app with typescript configuration.
Install the styled-component and add theme provider.
Install normalize.css, add fonts.

Let's create a simple, straightforward react button:

export type ButtonComponentProps = {
  children?: HTMLCollection | string,
  onClick: (e?: React.MouseEvent) => void
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const ButtonComponent = ({ onClick, children, ...otherProps }: ButtonComponentProps) => {
  return (
    <Button onClick={onClick} {...otherProps}>{children}</Button>
  );
}

export default ButtonComponent;

Add some styles:

const Button = styled.button<ButtonComponentProps>`
  padding: 5px 12px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  background-color: ${({ theme }) => theme.color1};
  border: 0px;
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
`;

Use the main page for a demonstration. Add state for a click's visual response. Just to make sure that it works:

function App() {
  const [simpleButtonState, toggleSimpleButtonState] = useState(false);
  const handleSimpleButtonClick = () => toggleSimpleButtonState(!simpleButtonState)

  return (
    <ThemeProvider theme={theme}>
      <Main>
        <h1>Buttons</h1>
        <Box>
          <p>Button based on button tag with custom focus behavior:</p>
          <Button onClick={handleSimpleButtonClick}>Click me!</Button>
          {simpleButtonState && <Event>clicked</Event>}
        </Box>
      </Main>
    </ThemeProvider>
  );
}

export default App;

That is it. Or not?

What is about input and div button?

Short answer, you should avoid them as much as possible. Both have other semantic meaning. And if you don't care about semantic, there could be accessibility disadvantages. For example, inputs should be provided with additional attributes:

<input type="button" value="Click me!" />

And for the div button, you should manually control keyboard events, such as press Enter or Space keys:

<div tabindex="0" role="button" aria-pressed="false">Click me!</div>

More information you can find here.

What about `outline:none`? Will it provide poor accessibility?

Yes, it is a pity to confirm, but even so many years past, we still have this problem. There is no automatic way to split click and keyboard focusing events. There is no existing native problem solution yet. What we can do:

Leave outline. Actually, it not so bad. If you have rectangular buttons without rounded corners, it can work for you well. Just change color to be appropriate for our buttons and find peace with it.
Disable outline and implement your focus styling. It is how most of the sites do right now. The problem is that it has an absolutely different behavior. There are millions of sites, and you must figure out is button focused or not each time you visit a new one. So, if you decided to create our own focus styling, please make it recognizable. Use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus buttons where color alone is used to identify them. More information here.
Use :focus-visible. There is an existing solution on the horizon. This pseudo-class selector fires when the user focuses on button using a keyboard. And that means that you can disable outline in default :focus selector and enable it in the :focus-visible selector. Better without changing, just well known blue borders. But… it hasn't work yet. This is an experimental feature.

The solution is focus-visible polyfill. This prototype adds a focus-visible class to the focused element, in the situation where :focus-visible pseudo-class selector should match. Or [data-focus-visible-added] attribute with is better for me. The main plus of this approach is that we leave native outline behavior as-is for keyboard events and hide it for clicks — a win-win situation.

Add polyfill import:

import 'focus-visible/dist/focus-visible';

Add global styling:

const Main = styled.div`
  ...
  *:focus:not([data-focus-visible-added]) {
    outline: none;
  }
  ...
`;

When the happy bright future will come, then I remove this polyfill and all :focus-visible work natively. And we should be prepared for that. I will do that when Chrome, Firefox, and Safari provide support. Even though, after dropping polyfill, we still want some backward compatibility. You know, IE, Edge, and many other browsers. They let's say... exist. More about that backward compatibility here.

const Button = styled.button<ButtonComponentProps>`
  ...
  /*
  Remove default focus styles for mouse users ONLY if
  :focus-visible is supported on this platform.
  */
  :focus:not(:focus-visible) {
    outline: none;
  }
`;

You can find all source code on my GitHub repo.

It's never too late

Artur Osypenko — Tue, 25 Feb 2020 21:33:25 +0000

I believe that this post will be the start of the set of stories about my mentor's view of beginners. Today I would like to share encouraging real persons' situations who achieve their goals despite uncertainty, age, and lack of background.

I have surprising statistics. Only two-thirds of students digest the theory. In the best case, half of them successfully apply knowledge in practice. It is about the majority of my students. If I ask them what the problem is, answers would be:

It's still too complicated, so I won't even try.
It is is not my cup of tea.
I'm not sure I need it.
I think it's too late to start.

I can't get why it happens where so many free, publicly available materials are. They have even spent money on a paid course, and it is still a lot of doubts.

Mark's story

When I first met Mark, he was on the position of a House Manager in for a building company that owns a few premises. His job was in maintaining facilities, ordering supplies, hiring people to fix pipelines, or whatsoever. Mark is Ukrainian as I am, but he lives in the US. He won a Green card lottery a long time ago and built his new life, family, and career. The problem is that the company decided to reduce staff and Mark lost his job. There were not many openings for such type of work, and the nearest employer was far away from Mark's home.

Shackled by the financial difficulties, Mark went back to his unused knowledge from Polytechnical University. He knew a little how to write code. So Mark decided to go through learning JavaScript code camp, which was pretty expensive. He did good enough not to be kicked out and not enough to be in the top 10 people who likely would get a job after completing the course.

Here where I appeared. Mark decided to hire me as a tutor to help him cover all the gaps in his understanding of JavaScript, CSS, HTML, etc. The reason why he chose me was simple - I'm much cheaper than any US-based mentor. We worked intensively for 2 hours a week. It was an exciting mixture of knowing how to make asynchronous AJAX requests but having no idea what parts URL consists of and whether a need in those parts.

Still, with perseverance and desire to become a Software developer, Mark expanded his knowledge in two months and what's more valuable - got on top 10 people in his code camp. When the course finished, he got three offers to junior positions and accepted one of them.

Long story short, Mark didn't miss his previous job and felt like he just did the first step in a road to an exciting adventure.

Sofia's story

The second story is about the student who was already over 30. This is the case when a student can teach a teacher. She had rich experience in the pharmaceutical industry. Her position was senior enough not to think about a lack of money. But the cons of this profession was the constant tension as such a business in Ukraine was often associated with an informal, shadowy part. She did not want to become the head of this, so she reached a so-called "glass ceiling".

Due to less interaction with a computer than the younger generation, which is known for "holding a keyboard from birth", it was more difficult for her to grasp information. But she had the advantage of higher education. I do not mean a degree in computer science. Apparently, she learned to be a pharmacist. But she was given knowledge on how to gain more knowledge.

Specifically, my course didn't help her to get a job right away, but I know that she wouldn't stop studying the front-end of technology. The question was rather not a lack of knowledge, but merely a decision - to break off relations with the current employer and build another future or stay where you are. I hope she will make the right decision for herself.

Anna's story

That's an entirely different situation. It doesn't quite fit here because Anna is quite younger than me. Yet, I would like to emphasize the lack of any professional education. Being a non-technical person, Anna, from the beginning to the end, was the best in class. The reason is that she had a lot of desire and the delight of discovering something new.

In fact, there was a little discovery for me that if you add a bit of humor to the examples or homework, you would love to do them with pleasure. Additionally, and most importantly, you could remember it better. It goes without saying not to overdo it. Otherwise, the lecture will turn into a circus.

Right after the course, Anna went as a trainee to a startup, and a year later, she became a Junior JavaScript developer. She was lucky, work turned out to be exciting and full of new things. Now she is rapidly growing as a developer.

Let's look at the key points from these stories. I put them in order of importance:

Find the real motivation in yourself because you will need it. The threshold for enter the front-end technology is growing every day, and you need to find strength and perseverance to make the first step.
The presence of higher education. In any industry. It isn't essential. You can learn about Computer Science later. As I mentioned, Universities give you skills and tools on how to gain more knowledge.
Have the desire to know everything, like a child has. Try to turn any routines into a game. Then it simply ceases to be a routine. Once we enjoy the process, time flows unnoticed, and we will have remembered this information for years with no extra efforts.