Skip to content

Commit 81b64bd

Browse files
lisalupilisalupi
committed
fix: disabled should be a prop, not a sentiment
1 parent 1cb0d46 commit 81b64bd

File tree

11 files changed

+120
-84
lines changed

11 files changed

+120
-84
lines changed

‎.changeset/pretty-planes-ask.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
"@ultraviolet/ui": minor
33
---
44

5-
Refactor components `Link` and `Bullet` to use vanilla-extract instead of Emotion
5+
- Refactor components `Link` and `Bullet` to use vanilla-extract instead of Emotion
6+
- `Bullet`: **BREAKING CHANGE** "disabled" is now a prop instead of a value of prop "sentiment"

‎packages/ui/src/components/Bullet/__stories__/Disabled.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Template } from './Template'
2+
3+
export const Disabled = Template.bind({})
4+
5+
Disabled.args = {
6+
children: '1',
7+
disabled: true,
8+
}

‎packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import type { StoryFn } from '@storybook/react-vite'
2+
import { SENTIMENTS } from '../../../theme'
23
import { Stack } from '../../Stack'
34
import { Text } from '../../Text'
45
import { Bullet } from '..'
5-
import { BULLET_SENTIMENTS } from '../constants'
66

77
export const Sentiments: StoryFn = props => (
88
<Stack gap={1}>
99
<Stack alignItems="center" direction="row" gap={1}>
1010
<Text as="span" variant="bodyStrong">
1111
Prominence default:
1212
</Text>
13-
{BULLET_SENTIMENTS.map(sentiment => (
13+
{SENTIMENTS.map(sentiment => (
1414
<Bullet key={sentiment} {...props} sentiment={sentiment}>
1515
1
1616
</Bullet>
@@ -20,7 +20,7 @@ export const Sentiments: StoryFn = props => (
2020
<Text as="span" variant="bodyStrong">
2121
Prominence strong:
2222
</Text>
23-
{BULLET_SENTIMENTS.map(sentiment => (
23+
{SENTIMENTS.map(sentiment => (
2424
<Bullet
2525
key={sentiment}
2626
{...props}

‎packages/ui/src/components/Bullet/__stories__/index.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88

99
export { Playground } from './Playground.stories'
1010
export { Sentiments } from './Sentiments.stories'
11+
export { Disabled } from './Disabled.stories'
1112
export { Icon } from './Icon.stories'
1213
export { Sizes } from './Sizes.stories'
1314
export { Text } from './Text.stories'

‎packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`Bullet > renders correctly disabled 1`] = `
4+
<DocumentFragment>
5+
<div
6+
data-testid="testing"
7+
>
8+
<div
9+
class="styles__1jy42m00 styles_disabled_true__1jy42m0e styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c"
10+
>
11+
1
12+
</div>
13+
</div>
14+
</DocumentFragment>
15+
`;
16+
317
exports[`bullet > renders correctly with a text 1`] = `
418
<DocumentFragment>
519
<div
620
data-testid="testing"
721
>
822
<div
9-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_2__1jy42m0h"
23+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
1024
>
1125
1
1226
</div>
@@ -20,7 +34,7 @@ exports[`bullet > renders correctly with an icon 1`] = `
2034
data-testid="testing"
2135
>
2236
<div
23-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_2__1jy42m0h"
37+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
2438
>
2539
<svg
2640
class="styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa"
@@ -41,7 +55,7 @@ exports[`bullet > renders correctly with an icon and icon variant 1`] = `
4155
data-testid="testing"
4256
>
4357
<div
44-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_2__1jy42m0h"
58+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
4559
>
4660
<svg
4761
class="styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_size_small__vbm0wqa"
@@ -79,6 +93,7 @@ exports[`bullet > sentiment > render disabled 1`] = `
7993
>
8094
<div
8195
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_7__1jy42m0m"
96+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_4__1jy42m0j"
8297
>
8398
1
8499
</div>
@@ -92,7 +107,7 @@ exports[`bullet > sentiment > render info 1`] = `
92107
data-testid="testing"
93108
>
94109
<div
95-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_6__1jy42m0l"
110+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_6__1jy42m0l"
96111
>
97112
1
98113
</div>
@@ -106,7 +121,7 @@ exports[`bullet > sentiment > render neutral 1`] = `
106121
data-testid="testing"
107122
>
108123
<div
109-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_2__1jy42m0h"
124+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
110125
>
111126
1
112127
</div>
@@ -120,7 +135,7 @@ exports[`bullet > sentiment > render primary 1`] = `
120135
data-testid="testing"
121136
>
122137
<div
123-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_0__1jy42m0f"
138+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_0__1jy42m0f"
124139
>
125140
1
126141
</div>
@@ -134,7 +149,7 @@ exports[`bullet > sentiment > render secondary 1`] = `
134149
data-testid="testing"
135150
>
136151
<div
137-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_1__1jy42m0g"
152+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_1__1jy42m0g"
138153
>
139154
1
140155
</div>
@@ -148,7 +163,7 @@ exports[`bullet > sentiment > render success 1`] = `
148163
data-testid="testing"
149164
>
150165
<div
151-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_3__1jy42m0i"
166+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_3__1jy42m0i"
152167
>
153168
1
154169
</div>
@@ -162,7 +177,7 @@ exports[`bullet > sentiment > render warning 1`] = `
162177
data-testid="testing"
163178
>
164179
<div
165-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_5__1jy42m0k"
180+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_5__1jy42m0k"
166181
>
167182
1
168183
</div>
@@ -176,7 +191,7 @@ exports[`bullet > size > render medium 1`] = `
176191
data-testid="testing"
177192
>
178193
<div
179-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_medium__1jy42m01 styles_undefined_compound_2__1jy42m0h"
194+
class="styles__1jy42m00 styles_size_medium__1jy42m01 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
180195
>
181196
1
182197
</div>
@@ -190,7 +205,7 @@ exports[`bullet > size > render small 1`] = `
190205
data-testid="testing"
191206
>
192207
<div
193-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_small__1jy42m02 styles_undefined_compound_2__1jy42m0h"
208+
class="styles__1jy42m00 styles_size_small__1jy42m02 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
194209
>
195210
1
196211
</div>
@@ -204,7 +219,7 @@ exports[`bullet > size > render xsmall 1`] = `
204219
data-testid="testing"
205220
>
206221
<div
207-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_xsmall__1jy42m03 styles_undefined_compound_2__1jy42m0h"
222+
class="styles__1jy42m00 styles_size_xsmall__1jy42m03 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
208223
>
209224
1
210225
</div>
@@ -218,7 +233,7 @@ exports[`bullet > size > render xxsmall 1`] = `
218233
data-testid="testing"
219234
>
220235
<div
221-
class="styles__1jy42m00 styles_prominence_default__1jy42m0d styles_size_xxsmall__1jy42m04 styles_undefined_compound_2__1jy42m0h"
236+
class="styles__1jy42m00 styles_size_xxsmall__1jy42m04 styles_prominence_default__1jy42m0c styles_undefined_compound_2__1jy42m0h"
222237
>
223238
1
224239
</div>

‎packages/ui/src/components/Bullet/__tests__/index.test.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { MoonIcon, MoonOutlineIcon } from '@ultraviolet/icons'
22
import { shouldMatchEmotionSnapshot } from '@utils/test'
33
import { describe, test } from 'vitest'
4+
import { SENTIMENTS } from '../../../theme'
45
import { Bullet } from '..'
5-
import { BULLET_SENTIMENTS } from '../constants'
66

77
describe('bullet', () => {
88
test('renders correctly with a text', () =>
@@ -22,8 +22,11 @@ describe('bullet', () => {
2222
</Bullet>,
2323
))
2424

25+
test('renders correctly disabled', () =>
26+
shouldMatchEmotionSnapshot(<Bullet disabled>1</Bullet>))
27+
2528
describe('sentiment', () => {
26-
BULLET_SENTIMENTS.forEach(sentiment => {
29+
SENTIMENTS.forEach(sentiment => {
2730
test(`render ${sentiment}`, () =>
2831
shouldMatchEmotionSnapshot(<Bullet sentiment={sentiment}>1</Bullet>))
2932
})

‎packages/ui/src/components/Bullet/constants.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import { SENTIMENTS } from '../../theme'
2-
3-
export const BULLET_SENTIMENTS = [...SENTIMENTS, 'disabled'] as const
4-
51
// Values are then used as theme.sizing[X]
62
export const SIZES = {
73
medium: '400',

‎packages/ui/src/components/Bullet/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
'use client'
22

33
import type { ReactNode } from 'react'
4+
import type { SENTIMENTS } from '../../theme'
45
import { Tooltip } from '../Tooltip'
5-
import type { BULLET_SENTIMENTS, PROMINENCES, SIZES } from './constants'
6+
import type { PROMINENCES, SIZES } from './constants'
67
import { bullet } from './styles.css'
78

89
type ProminenceType = keyof typeof PROMINENCES
910

10-
type BulletSentiment = (typeof BULLET_SENTIMENTS)[number]
11-
1211
type BulletProps = {
1312
className?: string
1413
size?: keyof typeof SIZES
1514
tooltip?: string
1615
tooltipBaseId?: string
17-
sentiment?: BulletSentiment
16+
sentiment?: (typeof SENTIMENTS)[number]
1817
'data-testid'?: string
1918
prominence?: ProminenceType
2019
children?: ReactNode
20+
disabled?: boolean
2121
}
2222

2323
/**
@@ -32,10 +32,11 @@ export const Bullet = ({
3232
'data-testid': dataTestId,
3333
prominence = 'default',
3434
children,
35+
disabled,
3536
}: BulletProps) => (
3637
<Tooltip id={tooltipBaseId} text={tooltip}>
3738
<div
38-
className={`${className ? `${className} ` : ''}${bullet({ prominence, sentiment, size })}`}
39+
className={`${className ? `${className} ` : ''}${bullet({ disabled, prominence, sentiment, size })}`}
3940
data-testid={dataTestId}
4041
>
4142
{children}

‎packages/ui/src/components/Bullet/styles.css.ts‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { theme } from '@ultraviolet/themes'
22
import { recipe } from '@vanilla-extract/recipes'
3-
import { BULLET_SENTIMENTS, PROMINENCES, SIZES } from './constants'
3+
import { SENTIMENTS } from '../../theme'
4+
import { PROMINENCES, SIZES } from './constants'
45

56
const TEXT_VARIANT = {
67
medium: 'body',
@@ -12,17 +13,9 @@ const TEXT_VARIANT = {
1213
type ProminenceType = keyof typeof PROMINENCES
1314

1415
function getBulletStyle(
15-
sentiment: (typeof BULLET_SENTIMENTS)[number],
16+
sentiment: (typeof SENTIMENTS)[number],
1617
prominence: 'default' | 'strong',
1718
) {
18-
if (sentiment === 'disabled') {
19-
return {
20-
color: theme.colors.neutral.textWeak,
21-
backgroundColor: theme.colors.neutral.backgroundStrong,
22-
border: 'none',
23-
}
24-
}
25-
2619
if (sentiment === 'neutral') {
2720
return {
2821
color:
@@ -63,17 +56,34 @@ export const bullet = recipe({
6356
]),
6457
),
6558
sentiment: Object.fromEntries(
66-
Object.keys(BULLET_SENTIMENTS).map(sentiment => [sentiment, {}]),
59+
Object.keys(SENTIMENTS).map(sentiment => [sentiment, {}]),
6760
),
6861
prominence: {
6962
default: {},
7063
strong: {},
7164
},
65+
disabled: {
66+
true: {
67+
color: theme.colors.neutral.textWeak,
68+
backgroundColor: theme.colors.neutral.backgroundStrong,
69+
border: 'none',
70+
},
71+
},
7272
},
7373
compoundVariants: Object.keys(PROMINENCES).flatMap(prominence =>
74-
BULLET_SENTIMENTS.map(sentiment => ({
75-
variants: { sentiment, prominence: prominence as ProminenceType },
74+
SENTIMENTS.map(sentiment => ({
75+
variants: {
76+
sentiment,
77+
prominence: prominence as ProminenceType,
78+
disabled: false,
79+
},
7680
style: getBulletStyle(sentiment, prominence as ProminenceType),
7781
})),
7882
),
83+
defaultVariants: {
84+
disabled: false,
85+
sentiment: 'neutral',
86+
size: 'medium',
87+
prominence: 'default',
88+
},
7989
})

‎packages/ui/src/components/StepList/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ const Item = ({
3636
>
3737
{bulletContent ? (
3838
<Bullet
39+
disabled={disabled}
3940
prominence={prominence}
40-
sentiment={disabled ? 'disabled' : sentiment}
41+
sentiment={sentiment}
4142
size={size}
4243
>
4344
{bulletContent}

0 commit comments

Comments
 (0)