refactor: remove breaking changes

Author: ze-flo

packages/colorpickers/src/elements/ColorSwatchDialog/index.spec.tsx

@@ -9,7 +9,6 @@ import React, { createRef } from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, act, waitFor } from 'garden-test-utils';
 import { ColorSwatchDialog } from './index';
-import { COMPONENT_ID } from '../../styled/ColorPickerDialog/StyledButton';
 
 const colors = [
   [
@@ -261,7 +260,7 @@ describe('ColorSwatchDialog', () => {
         />
       );
 
-      expect(getByRole('button')).toHaveAttribute('data-garden-id', COMPONENT_ID);
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', 'buttons.button');
     });
   });
 });

packages/colorpickers/src/styled/ColorPickerDialog/StyledButton.ts

@@ -6,18 +6,15 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
-export const COMPONENT_ID = 'colorpickers.colordialog_button';
-
 /**
  * 1. IE11 group width override.
  * 2. Input group border overrides.
  */
 export const StyledButton = styled(Button as any).attrs({
   isNeutral: true,
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
   padding: 0;
@@ -32,8 +29,6 @@ export const StyledButton = styled(Button as any).attrs({
       ${props => props.theme.borderRadii.md} !important; /* [2] */
     /* stylelint-enable */
   }
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledButton.defaultProps = {

packages/dropdowns/src/elements/menu/Menu.spec.tsx

@@ -10,7 +10,7 @@ import { render, renderRtl } from 'garden-test-utils';
 import userEvent from '@testing-library/user-event';
 import { act } from '@testing-library/react';
 import { IMenuProps } from '../../types';
-import { BTN_COMPONENT_ID, Menu } from './Menu';
+import { Menu } from './Menu';
 import { ItemGroup } from './ItemGroup';
 import { Item } from './Item';
 import { Separator } from './Separator';
@@ -667,7 +667,7 @@ describe('Menu', () => {
       await floating();
       const button = getByRole('button');
 
-      expect(button).toHaveAttribute('data-garden-id', BTN_COMPONENT_ID);
+      expect(button).toHaveAttribute('data-garden-id', 'buttons.button');
     });
   });
 });

packages/dropdowns/src/elements/menu/Menu.tsx

@@ -11,12 +11,11 @@ import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { useMenu } from '@zendeskgarden/container-menu';
 import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
-import { IButtonProps } from '@zendeskgarden/react-buttons';
+import { Button, IButtonProps } from '@zendeskgarden/react-buttons';
 import { IMenuProps, PLACEMENT } from '../../types';
 import { MenuContext } from '../../context/useMenuContext';
 import { toItems } from './utils';
 import { MenuList } from './MenuList';
-import { StyledButton } from '../../views';
 import ChevronIcon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 
 /**
@@ -87,12 +86,12 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       typeof button === 'function' ? (
         button(triggerProps)
       ) : (
-        <StyledButton {...triggerProps}>
+        <Button {...triggerProps}>
           {button}
-          <StyledButton.EndIcon isRotated={isExpanded}>
+          <Button.EndIcon isRotated={isExpanded}>
             <ChevronIcon />
-          </StyledButton.EndIcon>
-        </StyledButton>
+          </Button.EndIcon>
+        </Button>
       );
 
     const contextValue = useMemo(

packages/dropdowns/src/views/index.ts

@@ -36,5 +36,4 @@ export * from './menu/StyledItemGroup';
 export * from './menu/StyledItemIcon';
 export * from './menu/StyledItemMeta';
 export * from './menu/StyledItemTypeIcon';
-export * from './menu/StyledButton';
 export * from './menu/StyledSeparator';

packages/dropdowns/src/views/menu/StyledButton.ts

@@ -12,8 +12,6 @@ import { Pane } from '../Pane';
 import { Splitter } from './Splitter';
 import { SplitterButton } from './SplitterButton';
 
-import { COMPONENT_ID } from '../../../styled/pane/StyledPaneSplitterButton';
-
 const UncontrolledTestSplitter = ({ buttonRef }: { buttonRef?: RefObject<HTMLButtonElement> }) => {
   return (
     <PaneProvider
@@ -57,7 +55,7 @@ describe('SplitterButton', () => {
     it('has the correct `data-garden-id`', () => {
       const { getByLabelText } = render(<UncontrolledTestSplitter />);
 
-      expect(getByLabelText('toggle a')).toHaveAttribute('data-garden-id', COMPONENT_ID);
+      expect(getByLabelText('toggle a')).toHaveAttribute('data-garden-id', 'buttons.icon_button');
     });
   });
 });

packages/grid/src/elements/pane/components/SplitterButton.spec.tsx

@@ -6,12 +6,10 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { Orientation } from '../../types';
 
-export const COMPONENT_ID = 'pane.splitter_button';
-
 interface IStyledSplitterButtonProps {
   orientation: Orientation;
   isRotated: boolean;
@@ -52,7 +50,6 @@ const transformStyles = (props: IStyledSplitterButtonProps & ThemeProps<DefaultT
 };
 
 export const StyledPaneSplitterButton = styled(ChevronButton).attrs<IStyledSplitterButtonProps>({
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   isBasic: true,
   isPill: true,
@@ -61,8 +58,6 @@ export const StyledPaneSplitterButton = styled(ChevronButton).attrs<IStyledSplit
   ${sizeStyles};
 
   ${transformStyles};
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledPaneSplitterButton.defaultProps = {

packages/grid/src/styled/pane/StyledPaneSplitterButton.ts

@@ -10,7 +10,7 @@ import { render } from 'garden-test-utils';
 import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 
 import { TYPE } from '../../types';
-import { COMPONENT_ID, StyledGlobalAlertButton } from './StyledGlobalAlertButton';
+import { StyledGlobalAlertButton } from './StyledGlobalAlertButton';
 import { colorStyles } from './StyledGlobalAlertClose';
 
 jest.mock('./StyledGlobalAlertClose');
@@ -40,7 +40,7 @@ describe('StyledGlobalAlertButton', () => {
     it('has the correct `data-garden-id`', () => {
       const { container } = render(<StyledGlobalAlertButton alertType="info" />);
 
-      expect(container.firstChild).toHaveAttribute('data-garden-id', COMPONENT_ID);
+      expect(container.firstChild).toHaveAttribute('data-garden-id', 'buttons.button');
     });
   });
 });

packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx

@@ -6,19 +6,12 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  getColorV8,
-  DEFAULT_THEME,
-  retrieveComponentStyles,
-  focusStyles
-} from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
 import { IGlobalAlertProps } from '../../types';
 import { colorStyles as basicColorStyles } from './StyledGlobalAlertClose';
 
-export const COMPONENT_ID = 'notifications.global-alert.button';
-
 interface IStyledGlobalAlertButtonProps {
   alertType: IGlobalAlertProps['type'];
   isBasic?: boolean;
@@ -91,7 +84,6 @@ function sizeStyles(props: ThemeProps<DefaultTheme>) {
 }
 
 export const StyledGlobalAlertButton = styled(Button).attrs({
-  'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   focusInset: false,
   isDanger: false,
@@ -105,8 +97,6 @@ export const StyledGlobalAlertButton = styled(Button).attrs({
 
   ${sizeStyles};
   ${colorStyles};
-
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledGlobalAlertButton.defaultProps = {