ref(ui): Remove little-used Button align prop (#42869)

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

@@ -14,10 +14,6 @@ const Item = styled('span')`
   padding: 12px;
 `;
 
-const WideButton = styled(Button)`
-  width: 200px;
-`;
-
 export default {
   title: 'Components/Buttons',
   component: Button,
@@ -121,15 +117,6 @@ export const Overview = ({busy}) => (
         </Item>
       </div>
     </div>
-    <div className="section">
-      <h2>Alignment</h2>
-      <Item>
-        <WideButton align="left">Aligned left</WideButton>
-      </Item>
-      <Item>
-        <WideButton align="right">Aligned right</WideButton>
-      </Item>
-    </div>
     <div className="section">
       <h2>States (busy/disabled)</h2>
       <div style={{display: 'flex', alignItems: 'center'}}>

static/app/components/button.tsx

@@ -27,10 +27,6 @@ interface BaseButtonProps
     React.ButtonHTMLAttributes<ButtonElement>,
     'ref' | 'label' | 'size' | 'title'
   > {
-  /**
-   * Positions the text within the button.
-   */
-  align?: 'center' | 'left' | 'right';
   /**
    * Used when you want to overwrite the default Reload event key for analytics
    */
@@ -159,7 +155,6 @@ function BaseButton({
   'aria-label': ariaLabel,
   borderless,
   translucentBorder,
-  align = 'center',
   priority,
   disabled = false,
   tooltipProps,
@@ -238,7 +233,7 @@ function BaseButton({
           higherOpacity={priority && ['primary', 'danger'].includes(priority)}
         />
       )}
-      <ButtonLabel align={align} size={size} borderless={borderless}>
+      <ButtonLabel size={size} borderless={borderless}>
         {icon && (
           <Icon size={size} hasChildren={hasChildren}>
             {icon}
@@ -470,8 +465,8 @@ const StyledButton = styled(
   ${getButtonStyles};
 `;
 
-const buttonLabelPropKeys = ['size', 'borderless', 'align'];
-type ButtonLabelProps = Pick<ButtonProps, 'size' | 'borderless' | 'align'>;
+const buttonLabelPropKeys = ['size', 'borderless'];
+type ButtonLabelProps = Pick<ButtonProps, 'size' | 'borderless'>;
 
 const ButtonLabel = styled('span', {
   shouldForwardProp: prop =>
@@ -480,7 +475,7 @@ const ButtonLabel = styled('span', {
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: ${p => p.align};
+  justify-content: center;
   white-space: nowrap;
 `;
 

static/app/components/events/interfaces/threads/threadSelector/index.tsx

@@ -88,7 +88,7 @@ const ThreadSelector = ({
           emptyHidesInput
         >
           {({isOpen, selectedItem}) => (
-            <StyledDropdownButton isOpen={isOpen} size="xs" align="left">
+            <StyledDropdownButton isOpen={isOpen} size="xs">
               {selectedItem ? (
                 <SelectedOption
                   id={selectedItem.thread.id}

static/app/views/auth/loginForm.tsx

@@ -28,27 +28,17 @@ const LoginProviders = ({
   <ProviderWrapper>
     <ProviderHeading>{t('External Account Login')}</ProviderHeading>
     {googleLoginLink && (
-      <Button
-        align="left"
-        size="sm"
-        icon={<IconGoogle size="xs" />}
-        href={googleLoginLink}
-      >
+      <Button size="sm" icon={<IconGoogle size="xs" />} href={googleLoginLink}>
         {t('Sign in with Google')}
       </Button>
     )}
     {githubLoginLink && (
-      <Button
-        align="left"
-        size="sm"
-        icon={<IconGithub size="xs" />}
-        href={githubLoginLink}
-      >
+      <Button size="sm" icon={<IconGithub size="xs" />} href={githubLoginLink}>
         {t('Sign in with GitHub')}
       </Button>
     )}
     {vstsLoginLink && (
-      <Button align="left" size="sm" icon={<IconVsts size="xs" />} href={vstsLoginLink}>
+      <Button size="sm" icon={<IconVsts size="xs" />} href={vstsLoginLink}>
         {t('Sign in with Azure DevOps')}
       </Button>
     )}

static/app/views/issueList/savedIssueSearches.tsx

@@ -107,7 +107,6 @@ const SavedSearchItem = ({
         aria-label={savedSearch.name}
         onClick={() => onSavedSearchSelect(savedSearch)}
         borderless
-        align="left"
       >
         <TitleDescriptionWrapper>
           <SavedSearchItemTitle>{savedSearch.name}</SavedSearchItemTitle>