@beydesign/storybook 0.4.3 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -52,18 +52,32 @@ const ICON_ONLY_SIZE = {
|
|
|
52
52
|
[ButtonSize.xl]: 52,
|
|
53
53
|
},
|
|
54
54
|
};
|
|
55
|
+
// Figma sizes a text button by its height, with the label centred inside, so
|
|
56
|
+
// take the height from the design rather than deriving it from padding: a
|
|
57
|
+
// CSS border sits outside the box where a Figma stroke sits inside, which
|
|
58
|
+
// would otherwise leave every button 2px taller than the design.
|
|
59
|
+
const TEXT_BUTTON_HEIGHT = {
|
|
60
|
+
[ButtonSize.xxs]: 32,
|
|
61
|
+
[ButtonSize.xs]: 36,
|
|
62
|
+
[ButtonSize.sm]: 40,
|
|
63
|
+
[ButtonSize.md]: 44,
|
|
64
|
+
[ButtonSize.lg]: 48,
|
|
65
|
+
[ButtonSize.xl]: 52,
|
|
66
|
+
};
|
|
55
67
|
const StyledButton = styled.button `
|
|
56
68
|
text-transform: none;
|
|
57
69
|
box-sizing: border-box;
|
|
58
|
-
padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
|
|
59
|
-
? '0'
|
|
60
|
-
: props.$sizeStyles.padding};
|
|
61
70
|
${(props) => {
|
|
62
|
-
if (props.$displayIconMode
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
71
|
+
if (props.$displayIconMode === ButtonDisplayMode.Only) {
|
|
72
|
+
const box = `${ICON_ONLY_SIZE[props.$shape][props.$size]}px`;
|
|
73
|
+
return `padding: 0;
|
|
74
|
+
width: ${box};
|
|
75
|
+
height: ${box};`;
|
|
76
|
+
}
|
|
77
|
+
// min-height, not height, so a label that ever wraps grows the button
|
|
78
|
+
// instead of spilling out of it.
|
|
79
|
+
return `padding: ${props.$sizeStyles.padding};
|
|
80
|
+
min-height: ${TEXT_BUTTON_HEIGHT[props.$size]}px;`;
|
|
67
81
|
}}
|
|
68
82
|
font-size: ${(props) => props.$sizeStyles.fontSize};
|
|
69
83
|
border-radius: ${(props) => props.$shape === ButtonShape.Square
|
|
@@ -237,36 +251,41 @@ const StyledButton = styled.button `
|
|
|
237
251
|
export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
|
|
238
252
|
// Figma draws a 20px icon at every button size.
|
|
239
253
|
const iconSize = 20;
|
|
240
|
-
//
|
|
254
|
+
// Vertical padding comes from TEXT_BUTTON_HEIGHT; only the horizontal value
|
|
255
|
+
// is set here. Icon-only buttons take their box from ICON_ONLY_SIZE and
|
|
256
|
+
// ignore padding entirely.
|
|
257
|
+
//
|
|
258
|
+
// Figma leaves the sm, lg and xl horizontal padding, and the xl gap, off the
|
|
259
|
+
// spacing scale, so those are raw values with no token to point at.
|
|
241
260
|
const getButtonSize = () => {
|
|
242
261
|
const sizes = {
|
|
243
262
|
[ButtonSize.xl]: {
|
|
244
|
-
padding: '
|
|
263
|
+
padding: '0 22px',
|
|
245
264
|
fontSize: 'var(--global-font-size-3)',
|
|
246
|
-
gap: '
|
|
265
|
+
gap: '10px',
|
|
247
266
|
},
|
|
248
267
|
[ButtonSize.lg]: {
|
|
249
|
-
padding: '
|
|
268
|
+
padding: '0 18px',
|
|
250
269
|
fontSize: 'var(--global-font-size-3)',
|
|
251
270
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
|
|
252
271
|
},
|
|
253
272
|
[ButtonSize.md]: {
|
|
254
|
-
padding: '
|
|
273
|
+
padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
|
|
255
274
|
fontSize: 'var(--global-font-size-2)',
|
|
256
275
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
|
|
257
276
|
},
|
|
258
277
|
[ButtonSize.sm]: {
|
|
259
|
-
padding: '
|
|
278
|
+
padding: '0 14px',
|
|
260
279
|
fontSize: 'var(--global-font-size-1)',
|
|
261
280
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
262
281
|
},
|
|
263
282
|
[ButtonSize.xs]: {
|
|
264
|
-
padding: '
|
|
283
|
+
padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
|
|
265
284
|
fontSize: 'var(--global-font-size-1)',
|
|
266
285
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
267
286
|
},
|
|
268
287
|
[ButtonSize.xxs]: {
|
|
269
|
-
padding: '
|
|
288
|
+
padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)',
|
|
270
289
|
fontSize: 'var(--global-font-size-0)',
|
|
271
290
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
272
291
|
},
|