Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unnest styles #14

Merged
merged 10 commits into from
Jul 28, 2023
Merged

Unnest styles #14

merged 10 commits into from
Jul 28, 2023

Conversation

difernandez
Copy link
Contributor

@difernandez difernandez commented Jul 27, 2023

Context

  • Banano is a component library for use in our projects
  • A feature we're going to include is a classes, which is an object with keys that correspond to internal elements ofo a component, and allows to include new classes to those elements. This classes don't completely replace previous default styles, but should be able to override them if there is some overlap
  • Developing this feature, we realized that there were some default styles that were added with selectors that had a higher specificity than a single class, so those styles were not being overriden

Changes

This PR flattens all selectors of default styles to just be single classes, so that classes prop can override them.

  • Every style applied with a nested selector, or a selector that checked more than one class, were changed to only need one class. This required some classes to be moved from the parent to the child
    • For listbox, a related fix was added: the disabled styles were being applied to the wrong element
    • Some tests that checked for error classes failed, I changed it to check for error class in any element within the component
  • Color classes were also unnested. The previous behavior required a color class in the root element of the component, and a colors: key in the .cjs, in any sub element or modifier (or the block itself). Now the processing of these colors: are changed in the tailwind/index.cjs: it requires a color modifier class in the element itself. When using a colors: inside a modifier class, just one - is added, as BEM specifies that there should only be one modifier in a class name

@difernandez
Copy link
Contributor Author

Copy link
Contributor

@fprebolledo fprebolledo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks good. I left a comments about how have being passed classes to a component.

src/components/BnTextarea/BnTextarea.vue Show resolved Hide resolved
src/components/BnInput/BnInput.vue Outdated Show resolved Hide resolved
src/components/BnTextarea/BnTextarea.vue Outdated Show resolved Hide resolved
Now it expects a color class variant for each element that has varColor related changes
@difernandez difernandez merged commit c5c0602 into master Jul 28, 2023
3 checks passed
@difernandez difernandez deleted the unnest-styles branch July 28, 2023 15:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants