fix(Buttons): support overriding data-garden-id

Author: ze-flo

packages/buttons/src/elements/Button.spec.tsx

@@ -24,6 +24,20 @@ describe('Button', () => {
     expect(container.firstChild).toBe(ref.current);
   });
 
+  describe('`data-garden-id` attribute', () => {
+    it('sets a default data-garden-id attribute', () => {
+      const { getByRole } = render(<Button />);
+
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', 'buttons.button');
+    });
+
+    it('supports overriding the data-garden-id attribute', () => {
+      const { getByRole } = render(<Button data-garden-id="myCoolButton" />);
+
+      expect(getByRole('button')).toHaveAttribute('data-garden-id', 'myCoolButton');
+    });
+  });
+
   describe('Icons', () => {
     it('successfully renders start and end icons', () => {
       const { getByTestId } = render(

packages/buttons/src/styled/StyledAnchor.ts

@@ -8,14 +8,15 @@
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
+import { IAnchorProps } from './../types';
 
 const COMPONENT_ID = 'buttons.anchor';
 
 /**
  * Accepts all `<a>` props
  */
-export const StyledAnchor = styled(StyledButton).attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
+export const StyledAnchor = styled(StyledButton).attrs<IAnchorProps>(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
@@ -24,7 +25,7 @@ export const StyledAnchor = styled(StyledButton).attrs(props => ({
 }))`
   direction: ${props => props.theme.rtl && 'rtl'};
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles(props['data-garden-id'], props)};
 `;
 
 StyledAnchor.defaultProps = {

packages/buttons/src/styled/StyledButton.ts

@@ -349,7 +349,7 @@ const sizeStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
  * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
  */
 export const StyledButton = styled.button.attrs<IButtonProps>(props => ({
-  'data-garden-id': COMPONENT_ID,
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   type: props.type || 'button'
 }))<IButtonProps>`

packages/buttons/src/styled/StyledIcon.ts

@@ -15,6 +15,7 @@ import {
 const COMPONENT_ID = 'buttons.icon';
 
 interface IStyledIconProps {
+  'data-garden-id'?: string;
   $isRotated: boolean;
   $position?: 'start' | 'end';
 }
@@ -36,18 +37,18 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps<DefaultTheme>) => {
   );
 };
 
-export const StyledIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
+export const StyledIcon = styled(StyledBaseIcon).attrs<IStyledIconProps>(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledIconProps>`
+}))<IStyledIconProps>`
   transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
   transition:
     transform 0.25s ease-in-out,
     color 0.25s ease-in-out;
 
   ${props => sizeStyles(props)};
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles(props['data-garden-id'], props)};
 `;
 
 StyledIcon.defaultProps = {

packages/buttons/src/styled/StyledIconButton.ts

@@ -69,17 +69,17 @@ const iconStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledIconButton = styled(StyledButton as 'button').attrs({
-  'data-garden-id': COMPONENT_ID,
+export const StyledIconButton = styled(StyledButton).attrs<IButtonProps>(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IButtonProps>`
+}))`
   ${props => iconButtonStyles(props)};
 
   & ${StyledIcon} {
     ${props => iconStyles(props)}
   }
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles(props['data-garden-id'], props)};
 `;
 
 StyledIconButton.defaultProps = {

packages/buttons/src/styled/StyledSplitButton.ts

@@ -7,23 +7,24 @@
 
 import styled from 'styled-components';
 import { DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { ISplitButtonProps } from '../types';
 
 const COMPONENT_ID = 'buttons.button_group_view';
 
 /**
  * Accepts all `<div>` props
  */
-export const StyledSplitButton = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
+export const StyledSplitButton = styled.div.attrs<ISplitButtonProps>(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+}))<ISplitButtonProps>`
   display: inline-flex;
   position: relative;
   z-index: 0;
   direction: ${props => props.theme.rtl && 'rtl'};
   white-space: nowrap;
 
-  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  ${props => retrieveComponentStyles(props['data-garden-id'], props)};
 `;
 
 StyledSplitButton.defaultProps = {

packages/buttons/src/types/index.ts

@@ -5,11 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, SVGAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, SVGAttributes, HTMLAttributes } from 'react';
 
 export const SIZE = ['small', 'medium', 'large'] as const;
 
 export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** @ignore Set identifier to retrieve component styles */
+  'data-garden-id'?: string;
   /** Applies danger styling */
   isDanger?: boolean;
   /** Specifies the button size */
@@ -52,7 +54,7 @@ export interface IButtonIconProps
     SVGAttributes<SVGElement> {}
 
 export interface IAnchorProps
-  extends Pick<IButtonProps, 'isDanger'>,
+  extends Pick<IButtonProps, 'isDanger' | 'data-garden-id'>,
     AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
@@ -66,3 +68,7 @@ export interface IAnchorProps
    **/
   externalIconLabel?: string;
 }
+
+export interface ISplitButtonProps
+  extends HTMLAttributes<HTMLDivElement>,
+    Pick<IButtonProps, 'data-garden-id'> {}