Skip to content

Commit 6133358

Browse files
tenphitenphi
committed
feat: update components to use new value mods syntax
1 parent 2d31a77 commit 6133358

File tree

4 files changed

+141
-174
lines changed

4 files changed

+141
-174
lines changed

‎src/components/content/Item/Item.tsx‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -213,15 +213,16 @@ const ItemElement = tasty({
213213
placeContent: 'stretch',
214214
gridColumns: {
215215
'': '1sf max-content max-content',
216-
':has(Actions)': '1sf max-content max-content max-content',
217-
':has(Icon) ^ :has(Prefix)': 'max-content 1sf max-content max-content',
218-
':has(Icon) ^ :has(Prefix) & :has(Actions)':
216+
':has(> Actions)': '1sf max-content max-content max-content',
217+
':has(> Icon) ^ :has(> Prefix)':
218+
'max-content 1sf max-content max-content',
219+
'(:has(> Icon) ^ :has(> Prefix)) & :has(> Actions)':
219220
'max-content 1sf max-content max-content max-content',
220-
':has(Icon) & :has(Prefix)':
221+
':has(> Icon) & :has(> Prefix)':
221222
'max-content max-content 1sf max-content max-content',
222-
':has(Icon) & :has(Prefix) & :has(Actions)':
223+
':has(> Icon) & :has(> Prefix) & :has(> Actions)':
223224
'max-content max-content 1sf max-content max-content max-content',
224-
'(:has(Icon) ^ :has(RightIcon)) & !:has(Description) & !:has(Prefix) & !:has(Suffix) & !:has(Label)':
225+
'(:has(> Icon) ^ :has(> RightIcon)) & !:has(> Description) & !:has(> Prefix) & !:has(> Suffix) & !:has(> Label)':
225226
'max-content',
226227
},
227228
gridRows: {
@@ -244,11 +245,11 @@ const ItemElement = tasty({
244245
},
245246
height: {
246247
'': 'min $size',
247-
'[data-size="inline"]': '(1lh + 2bw)',
248+
'size=inline': '(1lh + 2bw)',
248249
},
249250
width: {
250251
'': 'min $size',
251-
'[data-size="inline"]': 'min (1lh + 2bw)',
252+
'size=inline': 'min (1lh + 2bw)',
252253
},
253254
border: '#clear',
254255
fill: {
@@ -268,10 +269,10 @@ const ItemElement = tasty({
268269
preset: {
269270
'': 't3',
270271
button: 't3m',
271-
'[data-size="xsmall"]': 't4',
272-
'[data-size="xlarge"]': 't2',
273-
'[data-size="xlarge"] & button': 't2m',
274-
'[data-size="inline"]': 'tag',
272+
'size=xsmall': 't4',
273+
'size=xlarge': 't2',
274+
'size=xlarge & button': 't2m',
275+
'size=inline': 'tag',
275276
},
276277
boxSizing: 'border-box',
277278
textDecoration: 'none',
@@ -286,21 +287,21 @@ const ItemElement = tasty({
286287

287288
$size: {
288289
'': '$size-md',
289-
'[data-size="xsmall"]': '$size-xs',
290-
'[data-size="small"]': '$size-sm',
291-
'[data-size="medium"]': '$size-md',
292-
'[data-size="large"]': '$size-lg',
293-
'[data-size="xlarge"]': '$size-xl',
294-
'[data-size="inline"]': '1lh',
290+
'size=xsmall': '$size-xs',
291+
'size=small': '$size-sm',
292+
'size=medium': '$size-md',
293+
'size=large': '$size-lg',
294+
'size=xlarge': '$size-xl',
295+
'size=inline': '1lh',
295296
},
296297
'$inline-padding': {
297298
'': 'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',
298-
'[data-size="inline"]': '.25x',
299+
'size=inline': '.25x',
299300
},
300301
'$block-padding': {
301302
'': '.5x',
302-
'[data-size="xsmall"] | [data-size="small"]': '.25x',
303-
'[data-size="inline"]': 0,
303+
'size=xsmall | size=small': '.25x',
304+
'size=inline': 0,
304305
},
305306
'$inline-compensation': '.5x',
306307
'$min-inline-padding': '(1x - 1bw)',
@@ -321,24 +322,24 @@ const ItemElement = tasty({
321322
maxWidth: '100%',
322323
padding: {
323324
'': '$block-padding $inline-padding',
324-
'(:has(Icon) | :has(Prefix))':
325+
':has(> Icon) | :has(> Prefix)':
325326
'$block-padding $inline-padding $block-padding 0',
326-
'(:has(RightIcon) | :has(Suffix) | :has(Actions))':
327+
':has(> RightIcon) | :has(> Suffix) | :has(> Actions)':
327328
'$block-padding 0 $block-padding $inline-padding',
328-
'(:has(Icon) | :has(Prefix)) & (:has(RightIcon) | :has(Suffix) | :has(Actions))':
329+
'(:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))':
329330
'$block-padding 0',
330-
':has(Description) & !has-description-block':
331+
':has(> Description) & !has-description-block':
331332
'$block-padding $inline-padding 0 $inline-padding',
332-
':has(Description) & !has-description-block & (:has(Icon) | :has(Prefix))':
333+
':has(> Description) & !has-description-block & (:has(> Icon) | :has(> Prefix))':
333334
'$block-padding $inline-padding 0 0',
334-
':has(Description) & !has-description-block & (:has(RightIcon) | :has(Suffix) | :has(Actions))':
335+
':has(> Description) & !has-description-block & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))':
335336
'$block-padding 0 0 $inline-padding',
336-
':has(Description) & !has-description-block & (:has(Icon) | :has(Prefix)) & (:has(RightIcon) | :has(Suffix) | :has(Actions))':
337+
':has(> Description) & !has-description-block & (:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix) | :has(> Actions))':
337338
'$block-padding 0 0 0',
338339
},
339340
gridRow: {
340341
'': 'span 2',
341-
':has(Description)': 'span 1',
342+
':has(> Description)': 'span 1',
342343
'has-description-block': 'span 2',
343344
},
344345
},
@@ -363,18 +364,18 @@ const ItemElement = tasty({
363364
},
364365
padding: {
365366
'': '0 $inline-padding $block-padding $inline-padding',
366-
'(:has(Icon) | :has(Prefix))': '0 $inline-padding $block-padding 0',
367-
'(:has(RightIcon) | :has(Suffix))':
367+
':has(> Icon) | :has(> Prefix)': '0 $inline-padding $block-padding 0',
368+
':has(> RightIcon) | :has(> Suffix)':
368369
'0 0 $block-padding $inline-padding',
369-
'(:has(Icon) | :has(Prefix)) & (:has(RightIcon) | :has(Suffix))':
370+
'(:has(> Icon) | :has(> Prefix)) & (:has(> RightIcon) | :has(> Suffix))':
370371
'0 0 $block-padding 0',
371372
'has-description-block':
372373
'0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
373-
'has-description-block & !:has(Icon)':
374+
'has-description-block & !:has(> Icon)':
374375
'0 ($inline-padding - $inline-compensation + 1bw) $bottom-padding $inline-padding',
375-
'has-description-block & !:has(RightIcon)':
376+
'has-description-block & !:has(> RightIcon)':
376377
'0 $inline-padding $bottom-padding ($inline-padding - $inline-compensation + 1bw)',
377-
'has-description-block & !:has(RightIcon) & !:has(Icon)':
378+
'has-description-block & !:has(> RightIcon) & !:has(> Icon)':
378379
'0 $inline-padding $bottom-padding $inline-padding',
379380
},
380381

@@ -386,15 +387,15 @@ const ItemElement = tasty({
386387
...ADDITION_STYLES,
387388
padding: {
388389
'': '$inline-padding left',
389-
':has(Icon)': 0,
390+
':has(> Icon)': 0,
390391
},
391392
},
392393

393394
Suffix: {
394395
...ADDITION_STYLES,
395396
padding: {
396397
'': '$inline-padding right',
397-
':has(RightIcon)': 0,
398+
':has(> RightIcon)': 0,
398399
},
399400
},
400401

‎src/components/fields/RadioGroup/Radio.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ const RadioButtonElement = tasty(Item, {
3737
Label: {
3838
placeSelf: {
3939
'': 'center start',
40-
'!with-prefix & !with-suffix & !with-icon & !with-right-icon': 'center',
40+
'!:has(> Prefix) & !:has(> Suffix) & !:has(> Icon) & !:has(> RightIcon)':
41+
'center',
4142
},
4243
},
4344
},

0 commit comments

Comments
 (0)