Styling

[emersonlaurentino]

Guys, seeing that we are having several conflicts when styling a component, I believe that we should have this discussion to standardize how and when the styling should be done.

Inspired by the Reach UI, we decided that we would use data-attribute for styling our components. But there are use cases where we don't know how to use those attributes. I would like your opinion, along with examples of how we should do the styling using data-attribute in order to establish a standard for our components and that meets the maximum of our use cases.

In the end, this discussion will become official Styling documentation.

[emersonlaurentino]

Writing the Slider component, I realized that just adding the attribute to the parent (data-store-slider) wouldn't be enough, so I added a data attribute for each child having the data-store-slider prefix. However the slider has 1 element which is used for two use cases, for the maximum value and the minimum value, so to differentiate each of these cases, I added the min and max values ​​to the data-store-slider' attribute -value, the same thing happened for the case of the thumb element.

And so were the component styles:

[data-store-slider] {
}
[data-store-slider-range] {
}
[data-store-slider-track] {
}
[data-store-slider-thumb='(left|right)'] {
}
[data-store-slider-values] {
}
[data-store-slider-value='(min|max)'] {
}

[igorbrasileiro]

I have a doubt, on components that don't have a "pseudo" selector (for the state, according to the documentation), so have a unique data-attribute, how can we add a custom style for it?

1. Use classnames property

.classNameForSpecificCase[data-attribute1][data-attributeN] { ... }

2. Override the current data attribute with a value

[data-attribute="identification for that specific case"] { ... }

3. Create a new data-attribute for the specific case

[data-my-new-case] { ... }

According to the documentation, that isn't clear for me, we can use all these 3 ways of stylizing. https://reach.tech/checkbox/#customcheckbox-css-selectors, https://reach.tech/menu-button/#menuitem-css-selectors

[igorbrasileiro]

I have a proposal, about how to style the components and use the data-attributes inside components.
The proposal is each component must have a data-attribute with this pattern data-store-<component-name> and receive className props that are passed to the outermost element. For cases that the component has states/variations, it should have a data-attribute for each state/variation with this pattern data-<state-name>. The common style for each component should be written using all data-attributes, but specific scenarios should use className.

An example:
The component

// IconButton.tsx component file
interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { ... }

interface Props extends ButtonProps {
   ...
   icon: ReactNode
   ...
}

const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
   return (<Button data-store-icon-button className={className} {...props}>{icon}</Button>)
})

The component story

// IconButton.stories.tsx
const IconButtonTemplate = (...) => {
   return <IconButton className="customClassName" ... />
}
...

The CSS

[data-store-button] { ... } // for the Button Component
[data-disabled] { ... } // for the disabled state
[data-store-icon-button] { ... } // for the IconButton Component

.customClassName[data-store-icon-button] { ... } // For the specific icon button case