ref(button): Use sm/xs for size prop instead of xsmall/small (#36346)

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

@@ -69,19 +69,19 @@ WithIcons.parameters = {
 
 export const WithTrailingItems = () => (
   <Grid>
-    <Alert type="info" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
+    <Alert type="info" trailingItems={<Button size="xs">Trailing Button</Button>}>
       <ExternalLink href="#">Info message with a url</ExternalLink>
     </Alert>
 
-    <Alert type="success" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
+    <Alert type="success" trailingItems={<Button size="xs">Trailing Button</Button>}>
       Success message without a url
     </Alert>
 
-    <Alert type="warning" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
+    <Alert type="warning" trailingItems={<Button size="xs">Trailing Button</Button>}>
       Warning message
     </Alert>
 
-    <Alert type="error" trailingItems={<Button size="xsmall">Trailing Button</Button>}>
+    <Alert type="error" trailingItems={<Button size="xs">Trailing Button</Button>}>
       Background workers haven't checked in recently. This can mean an issue with your
       configuration or a serious backlog in tasks.
     </Alert>

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

@@ -83,19 +83,19 @@ WithAnIcon.parameters = {
 };
 
 export const Small = () => [
-  <AlertLink to="/settings/account/notifications" size="small" key="1">
+  <AlertLink to="/settings/account/notifications" size="sm" key="1">
     Check out the notifications settings panel.
   </AlertLink>,
-  <AlertLink to="/settings/account/notifications" priority="error" size="small" key="2">
+  <AlertLink to="/settings/account/notifications" priority="error" size="sm" key="2">
     Do not forget to read the docs ya dum dum!
   </AlertLink>,
-  <AlertLink to="/settings/account/notifications" priority="info" size="small" key="3">
+  <AlertLink to="/settings/account/notifications" priority="info" size="sm" key="3">
     Install this thing or else!
   </AlertLink>,
-  <AlertLink to="/settings/account/notifications" priority="success" size="small" key="4">
+  <AlertLink to="/settings/account/notifications" priority="success" size="sm" key="4">
     Gj you did it. Now go here.
   </AlertLink>,
-  <AlertLink to="/settings/account/notifications" priority="muted" size="small" key="5">
+  <AlertLink to="/settings/account/notifications" priority="muted" size="sm" key="5">
     I am saying nothing, ok?
   </AlertLink>,
 ];

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

@@ -48,7 +48,7 @@ _Button.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['zero', 'xsmall', 'small', 'xs', 'sm', 'md'],
+      options: ['zero', 'xs', 'sm', 'md'],
     },
   },
 };
@@ -91,10 +91,10 @@ export const Overview = ({busy}) => (
         </Button>
       </Item>
       <Item>
-        <Button size="xsmall">X Small</Button>
+        <Button size="xs">X Small</Button>
       </Item>
       <Item>
-        <Button size="small">Small</Button>
+        <Button size="sm">Small</Button>
       </Item>
       <Item>
         <Button>Default</Button>
@@ -107,12 +107,12 @@ export const Overview = ({busy}) => (
           <Button size="zero" borderless icon={<IconDelete size="xs" />} />
         </Item>
         <Item>
-          <Button size="xsmall" icon={<IconDelete size="xs" />}>
+          <Button size="xs" icon={<IconDelete size="xs" />}>
             X Small
           </Button>
         </Item>
         <Item>
-          <Button size="small" icon={<IconDelete size="xs" />}>
+          <Button size="sm" icon={<IconDelete size="xs" />}>
             Small
           </Button>
         </Item>
@@ -134,12 +134,12 @@ export const Overview = ({busy}) => (
       <h2>States (busy/disabled)</h2>
       <div style={{display: 'flex', alignItems: 'center'}}>
         <Item>
-          <Button busy={busy} priority="primary" size="xsmall">
+          <Button busy={busy} priority="primary" size="xs">
             Extra Small
           </Button>
         </Item>
         <Item>
-          <Button busy={busy} priority="primary" size="small">
+          <Button busy={busy} priority="primary" size="sm">
             Small
           </Button>
         </Item>

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

@@ -74,7 +74,7 @@ class GridParent extends Component {
   render() {
     const {withHeader, title} = this.props;
     const headerButtons = withHeader
-      ? () => <Button size="small">Action Button</Button>
+      ? () => <Button size="sm">Action Button</Button>
       : null;
     return (
       <GridEditable

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

@@ -99,15 +99,15 @@ export const _6633WithManyHeaderControls = () => (
       </Layout.HeaderContent>
       <Layout.HeaderActions>
         <MarginedButtonBar gap={1}>
-          <Button size="small">Save</Button>
-          <Button size="small">Update</Button>
+          <Button size="sm">Save</Button>
+          <Button size="sm">Update</Button>
         </MarginedButtonBar>
         <ButtonBar gap={1}>
-          <Button size="small">rollup</Button>
-          <Button size="small">modify</Button>
-          <Button size="small">create</Button>
-          <Button size="small">update</Button>
-          <Button size="small">delete</Button>
+          <Button size="sm">rollup</Button>
+          <Button size="sm">modify</Button>
+          <Button size="sm">create</Button>
+          <Button size="sm">update</Button>
+          <Button size="sm">delete</Button>
         </ButtonBar>
       </Layout.HeaderActions>
     </Layout.Header>
@@ -141,8 +141,8 @@ export const SingleColumnMode = () => (
       </Layout.HeaderContent>
       <Layout.HeaderActions>
         <ButtonBar gap={1}>
-          <Button size="small">clicker</Button>
-          <Button size="small">clicker</Button>
+          <Button size="sm">clicker</Button>
+          <Button size="sm">clicker</Button>
         </ButtonBar>
       </Layout.HeaderActions>
     </Layout.Header>
@@ -175,8 +175,8 @@ export const _6633WithTabNavigation = () => (
       </Layout.HeaderContent>
       <Layout.HeaderActions>
         <ButtonBar gap={1}>
-          <Button size="small">clicker</Button>
-          <Button size="small">clicker</Button>
+          <Button size="sm">clicker</Button>
+          <Button size="sm">clicker</Button>
         </ButtonBar>
       </Layout.HeaderActions>
     </BorderlessHeader>

static/app/components/acl/featureDisabled.tsx

@@ -77,7 +77,7 @@ function FeatureDisabled({
           )}
         </HelpText>
         <Clipboard hideUnsupported value={installText(features, featureName)}>
-          <CopyButton borderless size="xsmall" icon={<IconCopy size="xs" />}>
+          <CopyButton borderless size="xs" icon={<IconCopy size="xs" />}>
             {t('Copy to Clipboard')}
           </CopyButton>
         </Clipboard>
@@ -97,7 +97,7 @@ function FeatureDisabled({
           {!hideHelpToggle && (
             <ToggleButton
               priority="link"
-              size="xsmall"
+              size="xs"
               onClick={() => setShowHelp(!showHelp)}
             >
               {t('Help')}

static/app/components/actions/button.tsx

@@ -1,7 +1,7 @@
 import Button, {ButtonProps} from 'sentry/components/button';
 
 function ActionButton(props: ButtonProps): React.ReactElement {
-  return <Button size="xsmall" {...props} />;
+  return <Button size="xs" {...props} />;
 }
 
 export default ActionButton;

static/app/components/actions/ignore.tsx

@@ -65,7 +65,7 @@ const IgnoreActions = ({
       <Tooltip title={t('Change status to unresolved')}>
         <Button
           priority="primary"
-          size="xsmall"
+          size="xs"
           onClick={() => onUpdate({status: ResolutionStatus.UNRESOLVED})}
           aria-label={t('Unignore')}
           icon={<IconMute size="xs" />}
@@ -203,7 +203,7 @@ const IgnoreActions = ({
   return (
     <ButtonBar merged>
       <IgnoreButton
-        size="xsmall"
+        size="xs"
         tooltipProps={{delay: 300, disabled}}
         title={t(
           'Silences alerts for this issue and removes it from the issue stream by default.'
@@ -220,7 +220,7 @@ const IgnoreActions = ({
             ref={triggerRef}
             {...triggerProps}
             aria-label={t('Ignore options')}
-            size="xsmall"
+            size="xs"
             icon={<IconChevron direction="down" size="xs" />}
             disabled={disabled}
           />

static/app/components/actions/resolve.tsx

@@ -110,7 +110,7 @@ class ResolveActions extends Component<Props> {
       >
         <Button
           priority="primary"
-          size="xsmall"
+          size="xs"
           icon={<IconCheckmark size="xs" />}
           aria-label={t('Unresolve')}
           disabled={isAutoResolved}
@@ -189,7 +189,7 @@ class ResolveActions extends Component<Props> {
             ref={triggerRef}
             {...triggerProps}
             aria-label={t('More resolve options')}
-            size="xsmall"
+            size="xs"
             icon={<IconChevron direction="down" size="xs" />}
             disabled={isDisabled}
           />
@@ -262,7 +262,7 @@ class ResolveActions extends Component<Props> {
       <Tooltip disabled={!projectFetchError} title={t('Error fetching project')}>
         <ButtonBar merged>
           <ResolveButton
-            size="xsmall"
+            size="xs"
             title={t(
               'Resolves the issue. The issue will get unresolved if it happens again.'
             )}

static/app/components/assistant/guideAnchor.tsx

@@ -150,7 +150,7 @@ class BaseGuideAnchor extends Component<Props, State> {
 
     const dismissButton = (
       <DismissButton
-        size="small"
+        size="sm"
         translucentBorder
         href={href}
         onClick={this.handleDismiss}
@@ -171,7 +171,7 @@ class BaseGuideAnchor extends Component<Props, State> {
             {lastStep ? (
               <Fragment>
                 <StyledButton
-                  size="small"
+                  size="sm"
                   translucentBorder
                   to={to}
                   onClick={this.handleFinish}
@@ -184,7 +184,7 @@ class BaseGuideAnchor extends Component<Props, State> {
             ) : (
               <Fragment>
                 <StyledButton
-                  size="small"
+                  size="sm"
                   translucentBorder
                   onClick={this.handleNextStep}
                   to={to}