Skip to content

Commit 2fc4df9

Browse files
malwilleymalwilley
authored
ref(button): Use sm/xs for size prop instead of xsmall/small (#36346)
1 parent b6c4cf4 commit 2fc4df9

File tree

220 files changed

+420
-486
lines changed

Some content is hidden

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

220 files changed

+420
-486
lines changed

‎docs-ui/stories/components/alert.stories.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,19 +69,19 @@ WithIcons.parameters = {
6969

7070
export const WithTrailingItems = () => (
7171
<Grid>
72-
<Alert type="info" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
72+
<Alert type="info" trailingItems={<Button size="xs">Trailing Button</Button>}>
7373
<ExternalLink href="#">Info message with a url</ExternalLink>
7474
</Alert>
7575

76-
<Alert type="success" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
76+
<Alert type="success" trailingItems={<Button size="xs">Trailing Button</Button>}>
7777
Success message without a url
7878
</Alert>
7979

80-
<Alert type="warning" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
80+
<Alert type="warning" trailingItems={<Button size="xs">Trailing Button</Button>}>
8181
Warning message
8282
</Alert>
8383

84-
<Alert type="error" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
84+
<Alert type="error" trailingItems={<Button size="xs">Trailing Button</Button>}>
8585
Background workers haven't checked in recently. This can mean an issue with your
8686
configuration or a serious backlog in tasks.
8787
</Alert>

‎docs-ui/stories/components/alertLink.stories.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,19 +83,19 @@ WithAnIcon.parameters = {
8383
};
8484

8585
export const Small = () => [
86-
<AlertLink to="/settings/account/notifications" size="small" key="1">
86+
<AlertLink to="/settings/account/notifications" size="sm" key="1">
8787
Check out the notifications settings panel.
8888
</AlertLink>,
89-
<AlertLink to="/settings/account/notifications" priority="error" size="small" key="2">
89+
<AlertLink to="/settings/account/notifications" priority="error" size="sm" key="2">
9090
Do not forget to read the docs ya dum dum!
9191
</AlertLink>,
92-
<AlertLink to="/settings/account/notifications" priority="info" size="small" key="3">
92+
<AlertLink to="/settings/account/notifications" priority="info" size="sm" key="3">
9393
Install this thing or else!
9494
</AlertLink>,
95-
<AlertLink to="/settings/account/notifications" priority="success" size="small" key="4">
95+
<AlertLink to="/settings/account/notifications" priority="success" size="sm" key="4">
9696
Gj you did it. Now go here.
9797
</AlertLink>,
98-
<AlertLink to="/settings/account/notifications" priority="muted" size="small" key="5">
98+
<AlertLink to="/settings/account/notifications" priority="muted" size="sm" key="5">
9999
I am saying nothing, ok?
100100
</AlertLink>,
101101
];

‎docs-ui/stories/components/button.stories.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ _Button.argTypes = {
4848
size: {
4949
control: {
5050
type: 'select',
51-
options: ['zero', 'xsmall', 'small', 'xs', 'sm', 'md'],
51+
options: ['zero', 'xs', 'sm', 'md'],
5252
},
5353
},
5454
};
@@ -91,10 +91,10 @@ export const Overview = ({busy}) => (
9191
</Button>
9292
</Item>
9393
<Item>
94-
<Button size="xsmall">X Small</Button>
94+
<Button size="xs">X Small</Button>
9595
</Item>
9696
<Item>
97-
<Button size="small">Small</Button>
97+
<Button size="sm">Small</Button>
9898
</Item>
9999
<Item>
100100
<Button>Default</Button>
@@ -107,12 +107,12 @@ export const Overview = ({busy}) => (
107107
<Button size="zero" borderless icon={<IconDelete size="xs" />} />
108108
</Item>
109109
<Item>
110-
<Button size="xsmall" icon={<IconDelete size="xs" />}>
110+
<Button size="xs" icon={<IconDelete size="xs" />}>
111111
X Small
112112
</Button>
113113
</Item>
114114
<Item>
115-
<Button size="small" icon={<IconDelete size="xs" />}>
115+
<Button size="sm" icon={<IconDelete size="xs" />}>
116116
Small
117117
</Button>
118118
</Item>
@@ -134,12 +134,12 @@ export const Overview = ({busy}) => (
134134
<h2>States (busy/disabled)</h2>
135135
<div style={{display: 'flex', alignItems: 'center'}}>
136136
<Item>
137-
<Button busy={busy} priority="primary" size="xsmall">
137+
<Button busy={busy} priority="primary" size="xs">
138138
Extra Small
139139
</Button>
140140
</Item>
141141
<Item>
142-
<Button busy={busy} priority="primary" size="small">
142+
<Button busy={busy} priority="primary" size="sm">
143143
Small
144144
</Button>
145145
</Item>

‎docs-ui/stories/components/gridEditable.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ class GridParent extends Component {
7474
render() {
7575
const {withHeader, title} = this.props;
7676
const headerButtons = withHeader
77-
? () => <Button size="small">Action Button</Button>
77+
? () => <Button size="sm">Action Button</Button>
7878
: null;
7979
return (
8080
<GridEditable

‎docs-ui/stories/views/layout-thirds.stories.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,15 @@ export const _6633WithManyHeaderControls = () => (
9999
</Layout.HeaderContent>
100100
<Layout.HeaderActions>
101101
<MarginedButtonBar gap={1}>
102-
<Button size="small">Save</Button>
103-
<Button size="small">Update</Button>
102+
<Button size="sm">Save</Button>
103+
<Button size="sm">Update</Button>
104104
</MarginedButtonBar>
105105
<ButtonBar gap={1}>
106-
<Button size="small">rollup</Button>
107-
<Button size="small">modify</Button>
108-
<Button size="small">create</Button>
109-
<Button size="small">update</Button>
110-
<Button size="small">delete</Button>
106+
<Button size="sm">rollup</Button>
107+
<Button size="sm">modify</Button>
108+
<Button size="sm">create</Button>
109+
<Button size="sm">update</Button>
110+
<Button size="sm">delete</Button>
111111
</ButtonBar>
112112
</Layout.HeaderActions>
113113
</Layout.Header>
@@ -141,8 +141,8 @@ export const SingleColumnMode = () => (
141141
</Layout.HeaderContent>
142142
<Layout.HeaderActions>
143143
<ButtonBar gap={1}>
144-
<Button size="small">clicker</Button>
145-
<Button size="small">clicker</Button>
144+
<Button size="sm">clicker</Button>
145+
<Button size="sm">clicker</Button>
146146
</ButtonBar>
147147
</Layout.HeaderActions>
148148
</Layout.Header>
@@ -175,8 +175,8 @@ export const _6633WithTabNavigation = () => (
175175
</Layout.HeaderContent>
176176
<Layout.HeaderActions>
177177
<ButtonBar gap={1}>
178-
<Button size="small">clicker</Button>
179-
<Button size="small">clicker</Button>
178+
<Button size="sm">clicker</Button>
179+
<Button size="sm">clicker</Button>
180180
</ButtonBar>
181181
</Layout.HeaderActions>
182182
</BorderlessHeader>

‎static/app/components/acl/featureDisabled.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function FeatureDisabled({
7777
)}
7878
</HelpText>
7979
<Clipboard hideUnsupported value={installText(features, featureName)}>
80-
<CopyButton borderless size="xsmall" icon={<IconCopy size="xs" />}>
80+
<CopyButton borderless size="xs" icon={<IconCopy size="xs" />}>
8181
{t('Copy to Clipboard')}
8282
</CopyButton>
8383
</Clipboard>
@@ -97,7 +97,7 @@ function FeatureDisabled({
9797
{!hideHelpToggle && (
9898
<ToggleButton
9999
priority="link"
100-
size="xsmall"
100+
size="xs"
101101
onClick={() => setShowHelp(!showHelp)}
102102
>
103103
{t('Help')}

‎static/app/components/actions/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Button, {ButtonProps} from 'sentry/components/button';
22

33
function ActionButton(props: ButtonProps): React.ReactElement {
4-
return <Button size="xsmall" {...props} />;
4+
return <Button size="xs" {...props} />;
55
}
66

77
export default ActionButton;

‎static/app/components/actions/ignore.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const IgnoreActions = ({
6565
<Tooltip title={t('Change status to unresolved')}>
6666
<Button
6767
priority="primary"
68-
size="xsmall"
68+
size="xs"
6969
onClick={() => onUpdate({status: ResolutionStatus.UNRESOLVED})}
7070
aria-label={t('Unignore')}
7171
icon={<IconMute size="xs" />}
@@ -203,7 +203,7 @@ const IgnoreActions = ({
203203
return (
204204
<ButtonBar merged>
205205
<IgnoreButton
206-
size="xsmall"
206+
size="xs"
207207
tooltipProps={{delay: 300, disabled}}
208208
title={t(
209209
'Silences alerts for this issue and removes it from the issue stream by default.'
@@ -220,7 +220,7 @@ const IgnoreActions = ({
220220
ref={triggerRef}
221221
{...triggerProps}
222222
aria-label={t('Ignore options')}
223-
size="xsmall"
223+
size="xs"
224224
icon={<IconChevron direction="down" size="xs" />}
225225
disabled={disabled}
226226
/>

‎static/app/components/actions/resolve.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ class ResolveActions extends Component<Props> {
110110
>
111111
<Button
112112
priority="primary"
113-
size="xsmall"
113+
size="xs"
114114
icon={<IconCheckmark size="xs" />}
115115
aria-label={t('Unresolve')}
116116
disabled={isAutoResolved}
@@ -189,7 +189,7 @@ class ResolveActions extends Component<Props> {
189189
ref={triggerRef}
190190
{...triggerProps}
191191
aria-label={t('More resolve options')}
192-
size="xsmall"
192+
size="xs"
193193
icon={<IconChevron direction="down" size="xs" />}
194194
disabled={isDisabled}
195195
/>
@@ -262,7 +262,7 @@ class ResolveActions extends Component<Props> {
262262
<Tooltip disabled={!projectFetchError} title={t('Error fetching project')}>
263263
<ButtonBar merged>
264264
<ResolveButton
265-
size="xsmall"
265+
size="xs"
266266
title={t(
267267
'Resolves the issue. The issue will get unresolved if it happens again.'
268268
)}

‎static/app/components/assistant/guideAnchor.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ class BaseGuideAnchor extends Component<Props, State> {
150150

151151
const dismissButton = (
152152
<DismissButton
153-
size="small"
153+
size="sm"
154154
translucentBorder
155155
href={href}
156156
onClick={this.handleDismiss}
@@ -171,7 +171,7 @@ class BaseGuideAnchor extends Component<Props, State> {
171171
{lastStep ? (
172172
<Fragment>
173173
<StyledButton
174-
size="small"
174+
size="sm"
175175
translucentBorder
176176
to={to}
177177
onClick={this.handleFinish}
@@ -184,7 +184,7 @@ class BaseGuideAnchor extends Component<Props, State> {
184184
) : (
185185
<Fragment>
186186
<StyledButton
187-
size="small"
187+
size="sm"
188188
translucentBorder
189189
onClick={this.handleNextStep}
190190
to={to}

‎static/app/components/banner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ CloseButton.defaultProps = {
150150
['aria-label']: t('Close'),
151151
priority: 'link',
152152
borderless: true,
153-
size: 'xsmall',
153+
size: 'xs',
154154
};
155155

156156
export default Banner;

‎static/app/components/button.tsx

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,8 @@ interface BaseButtonProps
9696
rel?: HTMLAnchorElement['rel'];
9797
/**
9898
* The size of the button
99-
*
100-
* 'xsmall' and 'small' are deprecated, but temporarily supported.
101-
* Please use 'xs' and 'sm' instead.
10299
*/
103-
size?: ButtonSize | 'xsmall' | 'small';
100+
size?: ButtonSize;
104101
/**
105102
* @deprecated Use `external`
106103
*/
@@ -136,23 +133,8 @@ export type ButtonProps = ButtonPropsWithoutAriaLabel | ButtonPropsWithAriaLabel
136133

137134
type Url = ButtonProps['to'] | ButtonProps['href'];
138135

139-
function convertDeprecatedSizeNames(size: BaseButtonProps['size']): ButtonSize {
140-
if (!size) {
141-
return 'md';
142-
}
143-
144-
switch (size) {
145-
case 'xsmall':
146-
return 'xs';
147-
case 'small':
148-
return 'sm';
149-
default:
150-
return size;
151-
}
152-
}
153-
154136
function BaseButton({
155-
size,
137+
size = 'md',
156138
to,
157139
busy,
158140
href,
@@ -169,8 +151,6 @@ function BaseButton({
169151
onClick,
170152
...buttonProps
171153
}: ButtonProps) {
172-
const convertedButtonSize = convertDeprecatedSizeNames(size);
173-
174154
// Intercept onClick and propagate
175155
const handleClick = useCallback(
176156
(e: React.MouseEvent) => {
@@ -213,17 +193,17 @@ function BaseButton({
213193
disabled={disabled}
214194
to={getUrl(to)}
215195
href={getUrl(href)}
216-
size={convertedButtonSize}
196+
size={size}
217197
priority={priority}
218198
borderless={borderless}
219199
translucentBorder={translucentBorder}
220200
{...buttonProps}
221201
onClick={handleClick}
222202
role="button"
223203
>
224-
<ButtonLabel align={align} size={convertedButtonSize} borderless={borderless}>
204+
<ButtonLabel align={align} size={size} borderless={borderless}>
225205
{icon && (
226-
<Icon size={convertedButtonSize} hasChildren={hasChildren}>
206+
<Icon size={size} hasChildren={hasChildren}>
227207
{icon}
228208
</Icon>
229209
)}
@@ -361,8 +341,8 @@ const getColors = ({
361341
`;
362342
};
363343

364-
const getSizeStyles = ({size, translucentBorder, theme}: StyledButtonProps) => {
365-
const buttonSize = size === 'zero' ? 'md' : convertDeprecatedSizeNames(size);
344+
const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProps) => {
345+
const buttonSize = size === 'zero' ? 'md' : size;
366346
const formStyles = theme.form[buttonSize];
367347
const buttonPadding = theme.buttonPadding[buttonSize];
368348

@@ -466,7 +446,7 @@ const getIconMargin = ({size, hasChildren}: IconProps) => {
466446
return '0';
467447
}
468448

469-
switch (convertDeprecatedSizeNames(size)) {
449+
switch (size) {
470450
case 'xs':
471451
case 'zero':
472452
return '6px';

‎static/app/components/charts/optionSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function OptionSelector({
6363
isOptionDisabled={isOptionDisabled}
6464
multiple={multiple}
6565
triggerProps={{
66-
size: 'small',
66+
size: 'sm',
6767
borderless: true,
6868
prefix: (
6969
<Fragment>

‎static/app/components/clippedBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ class ClippedBox extends PureComponent<Props, State> {
129129
<Button
130130
onClick={this.reveal}
131131
priority="primary"
132-
size="xsmall"
132+
size="xs"
133133
aria-label={btnText ?? t('Show More')}
134134
>
135135
{btnText}

‎static/app/components/commitLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function CommitLink({inline, commitId, repository}: Props) {
7272
});
7373

7474
return !inline ? (
75-
<Button external href={commitUrl} size="small" icon={providerData.icon}>
75+
<Button external href={commitUrl} size="sm" icon={providerData.icon}>
7676
{shortId}
7777
</Button>
7878
) : (

‎static/app/components/dashboards/widgetQueriesForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ class WidgetQueriesForm extends Component<Props> {
252252
})}
253253
{canAddSearchConditions && (
254254
<Button
255-
size="small"
255+
size="sm"
256256
icon={<IconAdd isCircled />}
257257
onClick={(event: React.MouseEvent) => {
258258
event.preventDefault();

0 commit comments

Comments
 (0)