Skip to content

Commit ba318d3

Browse files
hualf1995hualf1995
authored
Update Button component, ubook stories and docs (#5377)
1 parent ff0c2b5 commit ba318d3

38 files changed

Lines changed: 2310 additions & 281 deletions

‎documentation-site/components/yard/config/button.ts‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc.
44
This source code is licensed under the MIT license found in the
55
LICENSE file in the root directory of this source tree.
66
*/
7-
import { Button, KIND, SIZE, SHAPE } from "baseui/button";
7+
import { Button, KIND, SIZE, SHAPE, WIDTH_TYPE } from "baseui/button";
88
import { PropTypes } from "react-view";
99
import type { TConfig } from "../types";
1010

@@ -20,6 +20,7 @@ const ButtonConfig: TConfig = {
2020
KIND,
2121
SIZE,
2222
SHAPE,
23+
WIDTH_TYPE,
2324
},
2425
theme: [
2526
"buttonPrimaryFill",
@@ -84,8 +85,8 @@ const ButtonConfig: TConfig = {
8485
},
8586
},
8687
size: {
87-
value: "SIZE.default",
88-
defaultValue: "SIZE.default",
88+
value: "SIZE.medium",
89+
defaultValue: "SIZE.medium",
8990
options: SIZE,
9091
type: PropTypes.Enum,
9192
description: "Defines the size of the button.",
@@ -96,8 +97,8 @@ const ButtonConfig: TConfig = {
9697
},
9798
},
9899
shape: {
99-
value: "SHAPE.default",
100-
defaultValue: "SHAPE.default",
100+
value: "SHAPE.rectangular",
101+
defaultValue: "SHAPE.rectangular",
101102
options: SHAPE,
102103
type: PropTypes.Enum,
103104
description: "Defines the shape of the button.",
@@ -107,6 +108,19 @@ const ButtonConfig: TConfig = {
107108
},
108109
},
109110
},
111+
widthType: {
112+
value: "WIDTH_TYPE.hug",
113+
defaultValue: "WIDTH_TYPE.hug",
114+
options: WIDTH_TYPE,
115+
type: PropTypes.Enum,
116+
description: `Controls the button's width behavior.`,
117+
imports: {
118+
"baseui/button": {
119+
named: ["WIDTH_TYPE"],
120+
},
121+
},
122+
enumName: "WIDTH_TYPE",
123+
},
110124
colors: {
111125
value: undefined,
112126
defaultValue: '{backgroundColor: "#03703c", color: "white"}',
@@ -123,6 +137,11 @@ const ButtonConfig: TConfig = {
123137
type: PropTypes.Boolean,
124138
description: "Indicates that the button is selected.",
125139
},
140+
backgroundSafe: {
141+
value: false,
142+
type: PropTypes.Boolean,
143+
description: "Applies styles for a floating action button.",
144+
},
126145
overrides: {
127146
value: undefined,
128147
type: PropTypes.Custom,

‎documentation-site/examples/button/backgroundSafe.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import { Button, KIND } from "baseui/button";
3+
import { Upload, ArrowRight } from "baseui/icon";
4+
5+
export default function Example() {
6+
return (
7+
<React.Fragment>
8+
<p>
9+
<Button
10+
kind={KIND.secondary}
11+
startEnhancer={() => <ArrowRight size={24} title="" />}
12+
endEnhancer={() => <Upload size={24} title="" />}
13+
>
14+
BackgroundSafe: off
15+
</Button>
16+
</p>
17+
<p>
18+
<Button
19+
kind={KIND.secondary}
20+
startEnhancer={() => <ArrowRight size={24} title="" />}
21+
endEnhancer={() => <Upload size={24} title="" />}
22+
backgroundSafe
23+
>
24+
BackgroundSafe: on
25+
</Button>
26+
</p>
27+
</React.Fragment>
28+
);
29+
}

‎documentation-site/examples/button/kinds.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import * as React from "react";
2-
import { Block } from "baseui/block";
32
import { Button, KIND } from "baseui/button";
43

54
export default function Example() {
65
return (
7-
<React.Fragment>
8-
<Button kind={KIND.primary}>Primary</Button>
9-
<Block marginBottom="scale300" />
10-
<Button kind={KIND.secondary}>Secondary</Button>
11-
<Block marginBottom="scale300" />
12-
<Button kind={KIND.tertiary}>Tertiary</Button>
13-
</React.Fragment>
6+
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
7+
{Object.values(KIND).map((kind) => (
8+
<Button key={kind} kind={kind}>
9+
{kind.charAt(0).toUpperCase() + kind.slice(1)}
10+
</Button>
11+
))}
12+
</div>
1413
);
1514
}

‎documentation-site/examples/button/shapes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ export default function Example() {
66
return (
77
<React.Fragment>
88
<p>
9-
<Button>Default shape</Button>
9+
<Button>Rectangular shape</Button>
1010
</p>
1111
<p>
12-
<Button shape={SHAPE.pill}>Pill shape</Button>
12+
<Button shape={SHAPE.rounded}>Rounded shape</Button>
1313
</p>
1414
<p>
1515
<Button shape={SHAPE.square}>

‎documentation-site/examples/button/sizes.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,19 @@ export default function Example() {
66
const [css, theme] = useStyletron();
77
const space = css({ marginBottom: theme.sizing.scale300 });
88
return (
9-
<React.Fragment>
10-
<Button size={SIZE.compact}>Compact size</Button>
11-
<div className={space} />
12-
<Button size={SIZE.default}>Default size</Button>
13-
<div className={space} />
14-
<Button size={SIZE.large}>Large size</Button>
15-
</React.Fragment>
9+
<div
10+
style={{
11+
display: "flex",
12+
gap: "8px",
13+
flexWrap: "wrap",
14+
alignItems: "flex-start",
15+
}}
16+
>
17+
{Object.values(SIZE).map((size) => (
18+
<Button key={size} size={size}>
19+
{size.charAt(0).toUpperCase() + size.slice(1)}
20+
</Button>
21+
))}
22+
</div>
1623
);
1724
}

‎documentation-site/examples/button/widthTypes.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from "react";
2+
import { Button, WIDTH_TYPE } from "baseui/button";
3+
import { Upload, ArrowRight } from "baseui/icon";
4+
5+
export default function Example() {
6+
return (
7+
<React.Fragment>
8+
<p>
9+
<Button
10+
startEnhancer={() => <ArrowRight size={24} title="" />}
11+
endEnhancer={() => <Upload size={24} title="" />}
12+
>
13+
Width type: hug(default)
14+
</Button>
15+
</p>
16+
<p>
17+
<Button
18+
startEnhancer={() => <ArrowRight size={24} title="" />}
19+
endEnhancer={() => <Upload size={24} title="" />}
20+
widthType={WIDTH_TYPE.fill}
21+
>
22+
Width type: fill
23+
</Button>
24+
</p>
25+
</React.Fragment>
26+
);
27+
}

‎documentation-site/pages/components/button.mdx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import States from "examples/button/states.tsx";
1111
import Shapes from "examples/button/shapes.tsx";
1212
import Dropdown from "examples/button/dropdown.tsx";
1313
import ButtonAsAnAnchor from "examples/button/as-an-anchor.tsx";
14+
import WidthTypes from "examples/button/widthTypes.tsx";
15+
import BackgroundSafe from "examples/button/backgroundSafe.tsx";
1416

17+
import { Notification, KIND as NOTIFICATION_KIND } from "baseui/notification";
1518
import { Button, KIND } from "baseui/button";
1619
import * as ButtonExports from "baseui/button";
1720
import Upload from "baseui/icon/upload";
@@ -31,6 +34,17 @@ export default Layout;
3134

3235
<Yard placeholderHeight={52} {...buttonYardConfig} />
3336

37+
<Notification
38+
overrides={{ Body: { style: { width: "auto", margin: "16px 0 0 0" } } }}
39+
kind={NOTIFICATION_KIND.warning}
40+
>
41+
Some variants will be deprecated in next major release, please avoid using them in new codes. We encourage you to migrate your current implementations to equivalent or similar variants.
42+
<ul>
43+
<li>Shape: default -> rectangular, pill -> rounded, round will be removed.</li>
44+
<li>Size: mini -> xSmall, compact -> small, default -> medium.</li>
45+
</ul>
46+
</Notification>
47+
3448
Buttons provide cues for actions and events. These fundamental components allow users to process actions or navigate an experience.
3549

3650
## When to use
@@ -40,7 +54,7 @@ When a person:
4054
- submits a form,
4155
- starts a new task / action.
4256

43-
The Button component has 4 different `kind` variants: `primary`, `secondary` and `tertiary`.
57+
The Button component has 6 different `kind` variants: `primary`, `secondary`, `tertiary`, `dangerPrimary`, `dangerSecondary` and `dangerTertiary`.
4458

4559
**Primary** buttons are intended to be used as the leading trigger or cue of action. Primary buttons are
4660
bold with a dominant color background and white text/icons. These are to be used sparingly as the
@@ -78,6 +92,14 @@ primary button action. As the name implies, it’s offered to supplement to crea
7892
<WithEnhancer />
7993
</Example>
8094

95+
<Example title="Width Types" path="button/widthTypes.tsx">
96+
<WidthTypes />
97+
</Example>
98+
99+
<Example title="BackgroundSafe" path="button/backgroundSafe.tsx">
100+
<BackgroundSafe />
101+
</Example>
102+
81103
<Example title="As a dropdown" path="button/dropdown.tsx">
82104
<Dropdown />
83105
</Example>

‎package-lock.json‎

Lines changed: 17 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/button/__tests__/button-a11y.scenario.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
Copyright (c) Uber Technologies, Inc.
3+
4+
5+
This source code is licensed under the MIT license found in the
6+
LICENSE file in the root directory of this source tree.
7+
*/
8+
import * as React from 'react';
9+
import { useStyletron } from '../../';
10+
import { Button, SHAPE } from '..';
11+
import ArrowRight from '../../icon/arrow-right';
12+
import ArrowLeft from '../../icon/arrow-left';
13+
import { HeadingMedium, HeadingXSmall } from '../../typography';
14+
15+
export function Scenario() {
16+
const [css] = useStyletron();
17+
const [isSelected, setIsSelected] = React.useState(false);
18+
19+
console.log('isSelected', isSelected);
20+
21+
return (
22+
<React.Fragment>
23+
<HeadingMedium marginTop="0" marginBottom="0">
24+
Button A11y
25+
</HeadingMedium>
26+
27+
<HeadingXSmall marginTop="0" marginBottom="8px">
28+
Text only button
29+
</HeadingXSmall>
30+
<div className={css({ margin: '16px 0' })}>
31+
<Button>Edit</Button>
32+
</div>
33+
34+
<HeadingXSmall marginTop="0" marginBottom="8px">
35+
Icon only button
36+
</HeadingXSmall>
37+
<div className={css({ margin: '16px 0' })}>
38+
<Button aria-label="Next" shape={SHAPE.circle}>
39+
<ArrowRight />
40+
</Button>
41+
</div>
42+
43+
<HeadingXSmall marginTop="0" marginBottom="8px">
44+
Icon and text button
45+
</HeadingXSmall>
46+
<div className={css({ margin: '16px 0' })}>
47+
<Button
48+
endEnhancer={({ isHovered, isPressed, isFocused, artworkSize }) => {
49+
if (isHovered || isPressed || isFocused) {
50+
return <ArrowRight size={artworkSize} />;
51+
}
52+
return <ArrowLeft size={artworkSize} />;
53+
}}
54+
55+
startEnhancer={({ isHovered, isPressed, isFocused, artworkSize }) => {
56+
if (isHovered || isPressed || isFocused) {
57+
return <ArrowLeft size={artworkSize} />;
58+
}
59+
return <ArrowRight size={artworkSize} />;
60+
}}
61+
>
62+
Notification
63+
</Button>
64+
</div>
65+
66+
<HeadingXSmall marginTop="0" marginBottom="8px">
67+
Toggle button
68+
</HeadingXSmall>
69+
<div className={css({ margin: '16px 0' })}>
70+
<Button isSelected={isSelected} onClick={() => setIsSelected(!isSelected)}>
71+
Mute
72+
</Button>
73+
</div>
74+
</React.Fragment>
75+
);
76+
}

0 commit comments

Comments
 (0)