button: remove buttonlabel

static/app/components/acl/featureDisabled.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import type {AlertProps} from 'sentry/components/core/alert';
 import {Alert} from 'sentry/components/core/alert';
-import {Button, ButtonLabel} from 'sentry/components/core/button';
+import {Button} from 'sentry/components/core/button';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {CONFIG_DOCS_URL} from 'sentry/constants';
 import {IconChevron, IconCopy} from 'sentry/icons';
@@ -150,19 +150,17 @@ const HelpText = styled('p')`
 `;
 
 const ToggleButton = styled(Button)`
+  display: grid;
+  grid-auto-flow: column;
+  gap: ${space(1)};
+
   color: ${p => p.theme.active};
   height: ${p => p.theme.text.lineHeightBody}em;
   min-height: ${p => p.theme.text.lineHeightBody}em;
 
   &:hover {
     color: ${p => p.theme.activeHover};
   }
-
-  ${ButtonLabel} {
-    display: grid;
-    grid-auto-flow: column;
-    gap: ${space(1)};
-  }
 `;
 
 const CopyButton = styled(Button)`

static/app/components/core/button/index.chonk.tsx

@@ -60,7 +60,6 @@ export function getChonkButtonStyles(
 
   return {
     position: 'relative',
-    display: 'inline-block',
     fontWeight: p.theme.fontWeightBold,
 
     cursor: p.disabled ? 'not-allowed' : 'pointer',
@@ -74,6 +73,11 @@ export function getChonkButtonStyles(
     borderTopWidth: `3px`,
     background: 'none',
 
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'nowrap',
+
     height:
       size === 'large'
         ? '37px'

static/app/components/core/button/index.tsx

@@ -312,14 +312,13 @@ function BaseButton({
             higherOpacity={priority && ['primary', 'danger'].includes(priority)}
           />
         )}
-        <ButtonLabel size={size} borderless={borderless}>
-          {icon && (
-            <Icon size={size} hasChildren={hasChildren}>
-              <IconDefaultsProvider size={ICON_SIZES[size]}>{icon}</IconDefaultsProvider>
-            </Icon>
-          )}
-          {children}
-        </ButtonLabel>
+
+        {icon && (
+          <Icon size={size} hasChildren={hasChildren}>
+            <IconDefaultsProvider size={ICON_SIZES[size]}>{icon}</IconDefaultsProvider>
+          </Icon>
+        )}
+        {children}
       </StyledButton>
     </Tooltip>
   );
@@ -549,13 +548,17 @@ const getSizeStyles = ({
 function getButtonStyles(p: StyledButtonProps & {theme: Theme}): SerializedStyles {
   return css`
     position: relative;
-    display: inline-block;
     border-radius: ${p.theme.borderRadius};
     text-transform: none;
     font-weight: ${p.theme.fontWeightBold};
     cursor: ${p.disabled ? 'not-allowed' : 'pointer'};
     opacity: ${(p.busy || p.disabled) && '0.65'};
 
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+
     ${getColors(p)}
     ${getSizeStyles(p)}
     ${getBoxShadow(p)}
@@ -586,19 +589,6 @@ function getButtonStyles(p: StyledButtonProps & {theme: Theme}): SerializedStyle
   `;
 }
 
-export const ButtonLabel = styled('span', {
-  shouldForwardProp: prop =>
-    typeof prop === 'string' &&
-    isPropValid(prop) &&
-    !['size', 'borderless'].includes(prop),
-})<Pick<ButtonProps, 'size' | 'borderless'>>`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-`;
-
 const Icon = styled('span')<{hasChildren?: boolean; size?: ButtonProps['size']}>`
   display: flex;
   align-items: center;

static/app/views/issueList/issueSearchWithSavedSearches.tsx

@@ -1,7 +1,7 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Button, ButtonLabel} from 'sentry/components/core/button';
+import {Button} from 'sentry/components/core/button';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -82,11 +82,7 @@ const StyledButton = styled(Button)`
     border-bottom-right-radius: 0;
     border-right: none;
 
-    ${ButtonLabel} {
-      height: auto;
-      display: block;
-      ${p => p.theme.overflowEllipsis};
-    }
+    ${p => p.theme.overflowEllipsis};
   }
 `;
 

static/app/views/issueList/savedIssueSearches.tsx

@@ -5,7 +5,7 @@ import orderBy from 'lodash/orderBy';
 
 import {openModal} from 'sentry/actionCreators/modal';
 import {openConfirmModal} from 'sentry/components/confirm';
-import {Button, ButtonLabel} from 'sentry/components/core/button';
+import {Button} from 'sentry/components/core/button';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import LoadingError from 'sentry/components/loadingError';
@@ -319,18 +319,14 @@ const SearchesContainer = styled('ul')`
 `;
 
 const StyledItemButton = styled(Button)`
-  display: block;
   width: 100%;
-  text-align: left;
+  display: flex;
+  justify-content: start;
   height: auto;
   font-weight: ${p => p.theme.fontWeightNormal};
   line-height: ${p => p.theme.text.lineHeightBody};
 
   padding: ${space(1)} ${space(2)};
-
-  ${ButtonLabel} {
-    justify-content: start;
-  }
 `;
 
 const OverflowMenu = styled(DropdownMenu)`

static/app/views/nav/primary/components.tsx

@@ -2,7 +2,7 @@ import {Fragment, type MouseEventHandler} from 'react';
 import {css, type Theme, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Button, ButtonLabel} from 'sentry/components/core/button';
+import {Button} from 'sentry/components/core/button';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
@@ -419,20 +419,17 @@ const ChonkNavButton = styled(Button, {
 })<{isMobile: boolean}>`
   display: flex;
   align-items: center;
+  gap: ${space(1)};
 
   /* On mobile, the buttons are full width and have a gap between the icon and label */
   justify-content: ${p => (p.isMobile ? 'flex-start' : 'center')};
   height: ${p => (p.isMobile ? 'auto' : '44px')};
   width: ${p => (p.isMobile ? '100%' : '44px')};
   padding: ${p => (p.isMobile ? `${space(1)} ${space(3)}` : undefined)};
 
-  ${ButtonLabel} {
-    gap: ${space(1)};
-
-    /* Disable interactionstatelayer hover */
-    [data-isl] {
-      display: none;
-    }
+  /* Disable interactionstatelayer hover */
+  [data-isl] {
+    display: none;
   }
 `;