Skip to content

Commit 4b8a6d6

Browse files
tenphitenphi
authored
feat(tasty): mod values support (#872)
1 parent c29bee5 commit 4b8a6d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2246
-1075
lines changed

‎.changeset/has-selector-element-transformation.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cube-dev/ui-kit': minor
3+
---
4+
5+
Add support for `:has(Item)` syntax in style mappings. Capitalized element names inside `:has()` pseudo-class selectors are now automatically transformed to `data-element` attribute selectors (`:has(Item)` → `:has([data-element="Item"])`).

‎.changeset/value-mods.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@cube-dev/ui-kit': major
3+
---
4+
5+
**BREAKING:** Boolean mods now generate `data-*` instead of `data-is-*` attributes (`mods={{ hovered: true }}` → `data-hovered=""` instead of `data-is-hovered=""`).
6+
7+
**NEW:** Value mods support - `mods` now accepts string values (`mods={{ theme: 'danger' }}` → `data-theme="danger"`). Includes shorthand syntax in styles (`theme=danger`, `theme="danger"`). See Tasty documentation for details.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ coverage
1717
size-limit-report/stats.json
1818
docs-static
1919
*.plan.md
20+
*.spec.md

‎.size-limit.cjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ module.exports = [
2727
path: './dist/es/index.js',
2828
webpack: true,
2929
import: '{ Button }',
30-
limit: '33 kB',
30+
limit: '35 kB',
3131
},
3232
{
3333
name: 'Tree shaking (just an Icon)',
3434
path: './dist/es/index.js',
3535
webpack: true,
3636
import: '{ AiIcon }',
37-
limit: '20 kB',
37+
limit: '22 kB',
3838
},
3939
];

‎src/components/actions/Button/Button.docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ The `mods` prop accepts the following modifiers you can override:
5454
| disabled | `boolean` | Forces disabled appearance. |
5555
| loading | `boolean` | Displays loading spinner. |
5656
| selected | `boolean` | Displays selected state. |
57-
| with-icons | `boolean` | Indicates that the button contains at least one icon. |
57+
| has-icons | `boolean` | Indicates that the button contains at least one icon. |
5858
| single-icon | `boolean` | Icon-only button without text. |
5959

6060
## Variants

‎src/components/actions/Button/Button.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,12 @@ export const DEFAULT_BUTTON_STYLES = {
107107
},
108108
gap: {
109109
'': '.75x',
110-
'[data-size="small"]': '.5x',
110+
'size=small': '.5x',
111111
},
112112
preset: {
113113
'': 't3m',
114-
'[data-size="xsmall"]': 't4',
115-
'[data-size="xlarge"]': 't2m',
114+
'size=xsmall': 't4',
115+
'size=xlarge': 't2m',
116116
},
117117
textDecoration: 'none',
118118
transition: 'theme',
@@ -121,34 +121,34 @@ export const DEFAULT_BUTTON_STYLES = {
121121
outlineOffset: 1,
122122
padding: {
123123
'': '.5x (1.5x - 1bw)',
124-
'[data-size="small"] | [data-size="xsmall"]': '.5x (1.25x - 1bw)',
125-
'[data-size="medium"]': '.5x (1.5x - 1bw)',
126-
'[data-size="large"]': '.5x (1.75x - 1bw)',
127-
'[data-size="xlarge"]': '.5x (2x - 1bw)',
128-
'single-icon | [data-type="link"]': 0,
124+
'size=small | size=xsmall': '.5x (1.25x - 1bw)',
125+
'size=medium': '.5x (1.5x - 1bw)',
126+
'size=large': '.5x (1.75x - 1bw)',
127+
'size=xlarge': '.5x (2x - 1bw)',
128+
'single-icon | type=link': 0,
129129
},
130130
width: {
131131
'': 'initial',
132-
'[data-size="xsmall"] & single-icon': '$size-xs $size-xs',
133-
'[data-size="small"] & single-icon': '$size-sm $size-sm',
134-
'[data-size="medium"] & single-icon': '$size-md $size-md',
135-
'[data-size="large"] & single-icon': '$size-lg $size-lg',
136-
'[data-size="xlarge"] & single-icon': '$size-xl $size-xl',
137-
'[data-type="link"]': 'initial',
132+
'size=xsmall & single-icon': '$size-xs $size-xs',
133+
'size=small & single-icon': '$size-sm $size-sm',
134+
'size=medium & single-icon': '$size-md $size-md',
135+
'size=large & single-icon': '$size-lg $size-lg',
136+
'size=xlarge & single-icon': '$size-xl $size-xl',
137+
'type=link': 'initial',
138138
},
139139
height: {
140140
'': 'initial',
141-
'[data-size="xsmall"]': '$size-xs $size-xs',
142-
'[data-size="small"]': '$size-sm $size-sm',
143-
'[data-size="medium"]': '$size-md $size-md',
144-
'[data-size="large"]': '$size-lg $size-lg',
145-
'[data-size="xlarge"]': '$size-xl $size-xl',
146-
'[data-type="link"]': 'initial',
141+
'size=xsmall': '$size-xs $size-xs',
142+
'size=small': '$size-sm $size-sm',
143+
'size=medium': '$size-md $size-md',
144+
'size=large': '$size-lg $size-lg',
145+
'size=xlarge': '$size-xl $size-xl',
146+
'type=link': 'initial',
147147
},
148148
whiteSpace: 'nowrap',
149149
radius: {
150150
'': true,
151-
'[data-type="link"] & !focused': 0,
151+
'type=link & !focused': 0,
152152
},
153153

154154
ButtonIcon: {
@@ -274,7 +274,7 @@ export const Button = forwardRef(function Button(
274274
() => ({
275275
loading: isLoading,
276276
selected: isSelected,
277-
'with-icons': hasIcons,
277+
'has-icons': hasIcons,
278278
'left-icon': !!icon,
279279
'right-icon': !!rightIcon,
280280
'single-icon': singleIcon,

‎src/components/actions/Button/button.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ describe('<Button />', () => {
1111
expect(screen.getByTestId('test')).toBeInTheDocument();
1212
});
1313

14-
it('should have data-is-loading', () => {
14+
it('should have data-loading', () => {
1515
render(
1616
<Button isLoading data-qa="ApplyDbConnection">
1717
Apply
1818
</Button>,
1919
);
2020

2121
expect(screen.getByTestId('ApplyDbConnection')).toHaveAttribute(
22-
'data-is-loading',
22+
'data-loading',
2323
'',
2424
);
2525
});
2626

27-
it('should have data-is-loading after rerender', () => {
27+
it('should have data-loading after rerender', () => {
2828
const { rerender } = render(
2929
<Button isLoading={false} data-qa="ApplyDbConnection">
3030
Apply
@@ -38,7 +38,7 @@ describe('<Button />', () => {
3838
);
3939

4040
expect(screen.getByTestId('ApplyDbConnection')).toHaveAttribute(
41-
'data-is-loading',
41+
'data-loading',
4242
'',
4343
);
4444
});

‎src/components/actions/CommandMenu/CommandMenu.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -859,7 +859,7 @@ describe('CommandMenu', () => {
859859
);
860860

861861
const commandMenu = screen.getByTestId('test-command-menu');
862-
expect(commandMenu).toHaveAttribute('data-is-popover');
862+
expect(commandMenu).toHaveAttribute('data-popover');
863863
});
864864

865865
it('should apply tray mod when used with MenuTrigger', () => {
@@ -875,7 +875,7 @@ describe('CommandMenu', () => {
875875
);
876876

877877
const commandMenu = screen.getByTestId('test-command-menu');
878-
expect(commandMenu).toHaveAttribute('data-is-tray');
878+
expect(commandMenu).toHaveAttribute('data-tray');
879879
});
880880

881881
it('should not apply any special mods when used standalone', () => {
@@ -887,8 +887,8 @@ describe('CommandMenu', () => {
887887
);
888888

889889
const commandMenu = screen.getByTestId('test-command-menu');
890-
expect(commandMenu).not.toHaveAttribute('data-is-popover');
891-
expect(commandMenu).not.toHaveAttribute('data-is-tray');
890+
expect(commandMenu).not.toHaveAttribute('data-popover');
891+
expect(commandMenu).not.toHaveAttribute('data-tray');
892892
});
893893
});
894894
});

‎src/components/actions/CommandMenu/styled.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ export const StyledSearchInput = tasty({
5757

5858
$size: {
5959
'': '$size-md',
60-
'[data-size="small"]': '$size-sm',
61-
'[data-size="medium"]': '$size-md',
62-
'[data-size="large"]': '$size-lg',
60+
'size=small': '$size-sm',
61+
'size=medium': '$size-md',
62+
'size=large': '$size-lg',
6363
},
6464
},
6565
});

‎src/components/actions/ItemAction/ItemAction.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@ const ItemActionElement = tasty({
8080
cursor: { '': '$pointer', disabled: 'default' },
8181
padding: {
8282
'': '0 $inline-padding',
83-
'with-icon': 0,
84-
'with-icon & with-label': '0 $inline-padding 0 0',
83+
'has-icon': 0,
84+
'has-icon & has-label': '0 $inline-padding 0 0',
8585
},
8686

8787
'$inline-padding': {
8888
'': 'max($min-inline-padding, (($action-size - 1lh - 2bw) / 2 + $inline-compensation))',
89-
'[data-size="inline"]': '.25x',
89+
'size=inline': '.25x',
9090
},
9191
'$inline-compensation': '.5x',
9292
'$min-inline-padding': '(.5x - 1bw)',
@@ -162,9 +162,9 @@ export const ItemAction = forwardRef(function ItemAction(
162162
checkbox: hasCheckbox,
163163
selected: isSelected,
164164
loading: isLoading,
165-
'with-label': !!children,
165+
'has-label': !!children,
166166
context: !!contextType,
167-
'with-icon': !!icon,
167+
'has-icon': !!icon,
168168
...mods,
169169
}),
170170
[hasCheckbox, isSelected, isLoading, children, contextType, mods],

0 commit comments

Comments
 (0)