feat: tabs data attrs #335
Conversation
|
| orientation: "horizontal", | ||
| loop: false, | ||
| selectOnFocus: true | ||
| selectOnFocus: true, |
There was a problem hiding this comment.
this seems like something we would just have a boolean for, not needing a bind
| * @param orientation - The orientation value ("vertical" or "horizontal") | ||
| * @returns CSS string with @custom-variant declarations | ||
| */ | ||
| function generateOrientationVariant(orientation: OrientationValue): string { |
There was a problem hiding this comment.
I think we need to re-think this approach in a more general sense, like generateValueVariant
Also:
/**
* ui-orientation-vertical: Apply styles when nearest component scope has data-orientation="vertical"
* Automatically scopes to prevent nested components from inheriting state
*/
@custom-variant ui-orientation-vertical (
/* Descendant of scope with data-orientation="vertical", stops at nearest scope boundary */
[data-qds-scope][data-orientation="vertical"] > &,
[data-qds-scope][data-orientation="vertical"] > :not([data-qds-scope]) &,
/* Direct match on element itself */
[data-orientation="vertical"]&
);
/**
* ui-orientation-horizontal: Apply styles when nearest component scope has data-orientation="horizontal"
* Automatically scopes to prevent nested components from inheriting state
*/
@custom-variant ui-orientation-horizontal (
/* Descendant of scope with data-orientation="horizontal", stops at nearest scope boundary */
[data-qds-scope][data-orientation="horizontal"] > &,
[data-qds-scope][data-orientation="horizontal"] > :not([data-qds-scope]) &,
/* Direct match on element itself */
[data-orientation="horizontal"]&
);This would quickly get messy needing to create a custom variant for every possible value. Maybe they can provide a "arbitrary variant" the same way they provide a value?
If we don't want to come at it from that angle, I think it would make sense to add two new modifiers:
ui-horizontal and ui-vertical.
Also making sure that we add the not-x versions as well so people can compose them as they would expect.
No description provided.