refactor(colorpickers, grid, loaders, notifications, tags, tooltips): use transient props + snapshot testing [DO NOT MERGE]

packages/.template/src/styled/Styled{{capitalize component}}.ts

@@ -28,7 +28,7 @@ const colorStyles = (props: IStyled{{capitalize component}}Props) => {
     background-color: ${backgroundColor};
     color: ${foregroundColor};
 
-    :hover {
+    &:hover {
       background-color: ${hoverBackgroundColor};
     }
 
@@ -65,7 +65,7 @@ export const Styled{{capitalize component}} = styled.div.attrs<IStyled{{capitali
 
   ${props => sizeStyles(props)};
 
-  :focus {
+  &:focus {
     outline: none;
   }
 

packages/avatars/src/elements/Avatar.tsx

@@ -21,15 +21,16 @@ import { Text } from './components/Text';
 const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
   (
     {
+      backgroundColor,
+      badge,
+      children,
+      foregroundColor,
       isSystem,
       size,
       status,
-      children,
-      badge,
+      statusLabel,
       surfaceColor,
-      backgroundColor,
-      foregroundColor,
-      ...props
+      ...other
     },
     ref
   ) => {
@@ -59,9 +60,9 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
     }, [computedStatus, badge]);
 
     const shouldValidate = computedStatus !== undefined;
-    const statusLabel = useText(
+    const ariaLabel = useText(
       AvatarComponent,
-      props,
+      { statusLabel },
       'statusLabel',
       defaultStatusLabel,
       shouldValidate
@@ -78,15 +79,15 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
         $foregroundColor={foregroundColor}
         aria-atomic="true"
         aria-live="polite"
-        {...props}
+        {...other}
       >
         {Children.only(children)}
         {!!computedStatus && (
           <StyledStatusIndicator
             $size={size}
             $type={computedStatus}
             $surfaceColor={surfaceColor}
-            aria-label={statusLabel}
+            aria-label={ariaLabel}
             as="figcaption"
           >
             {computedStatus === 'active' ? (

packages/buttons/demo/stories/ButtonStory.spec.tsx

@@ -0,0 +1,176 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render } from 'garden-test-utils';
+import 'jest-styled-components';
+import { ButtonStory } from './ButtonStory';
+const renderAndMatchSnapshot = (props: any) => {
+  const { container } = render(<ButtonStory {...props} />);
+  expect(container.firstChild).toMatchSnapshot();
+};
+
+describe('ButtonStory Component', () => {
+  it('renders default ButtonStory', () => {
+    renderAndMatchSnapshot({ children: 'Button' });
+  });
+
+  it('renders ButtonStory with a start icon', () => {
+    renderAndMatchSnapshot({ children: 'Button', hasStartIcon: true });
+  });
+
+  it('renders ButtonStory with an end icon', () => {
+    renderAndMatchSnapshot({ children: 'Button', hasEndIcon: true });
+  });
+
+  it('renders ButtonStory with both start and end icons', () => {
+    renderAndMatchSnapshot({ children: 'Button', hasStartIcon: true, hasEndIcon: true });
+  });
+
+  it('renders ButtonStory with a rotated start icon', () => {
+    renderAndMatchSnapshot({ children: 'Button', hasStartIcon: true, isStartIconRotated: true });
+  });
+
+  it('renders ButtonStory with a rotated end icon', () => {
+    renderAndMatchSnapshot({ children: 'Button', hasEndIcon: true, isEndIconRotated: true });
+  });
+
+  it('renders ButtonStory with both rotated start and end icons', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      isStartIconRotated: true,
+      hasEndIcon: true,
+      isEndIconRotated: true
+    });
+  });
+
+  it('renders ButtonStory with danger styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isDanger: true });
+  });
+
+  it('renders ButtonStory with primary styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isPrimary: true });
+  });
+
+  it('renders ButtonStory with neutral styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isNeutral: true });
+  });
+
+  it('renders ButtonStory with basic styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isBasic: true });
+  });
+
+  it('renders ButtonStory with link styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isLink: true });
+  });
+
+  it('renders ButtonStory with pill styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isPill: true });
+  });
+
+  it('renders ButtonStory with focus inset styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', focusInset: true });
+  });
+
+  it('renders ButtonStory with stretched styling', () => {
+    renderAndMatchSnapshot({ children: 'Button', isStretched: true });
+  });
+
+  it('renders ButtonStory with small size', () => {
+    renderAndMatchSnapshot({ children: 'Button', size: 'small' });
+  });
+
+  it('renders ButtonStory with large size', () => {
+    renderAndMatchSnapshot({ children: 'Button', size: 'large' });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and danger styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      isDanger: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and primary styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      isPrimary: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and pill styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      isPill: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and stretched styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      isStretched: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and focus inset styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      focusInset: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and large size', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      size: 'large'
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, and small size', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      hasEndIcon: true,
+      size: 'small'
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, rotated icons, and danger styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      isStartIconRotated: true,
+      hasEndIcon: true,
+      isEndIconRotated: true,
+      isDanger: true
+    });
+  });
+
+  it('renders ButtonStory with start icon, end icon, rotated icons, and primary styling', () => {
+    renderAndMatchSnapshot({
+      children: 'Button',
+      hasStartIcon: true,
+      isStartIconRotated: true,
+      hasEndIcon: true,
+      isEndIconRotated: true,
+      isPrimary: true
+    });
+  });
+});

packages/buttons/demo/stories/SplitButtonStory.spec.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { render } from 'garden-test-utils';
+import 'jest-styled-components';
+import { SplitButtonStory } from './SplitButtonStory';
+
+const renderAndMatchSnapshot = (props: any) => {
+  const { container } = render(<SplitButtonStory {...props} />);
+  expect(container.firstChild).toMatchSnapshot();
+};
+
+describe('SplitButtonStory Component', () => {
+  it('renders default SplitButtonStory', () => {
+    renderAndMatchSnapshot({ children: 'Split Button' });
+  });
+
+  it('renders SplitButtonStory with a rotated chevron button', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isRotated: true });
+  });
+
+  it('renders SplitButtonStory with danger styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isDanger: true });
+  });
+
+  it('renders SplitButtonStory with primary styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isPrimary: true });
+  });
+
+  it('renders SplitButtonStory with neutral styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isNeutral: true });
+  });
+
+  it('renders SplitButtonStory with basic styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isBasic: true });
+  });
+
+  it('renders SplitButtonStory with pill styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', isPill: true });
+  });
+
+  it('renders SplitButtonStory with focus inset styling', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', focusInset: true });
+  });
+
+  it('renders SplitButtonStory with small size', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', size: 'small' });
+  });
+
+  it('renders SplitButtonStory with large size', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', size: 'large' });
+  });
+
+  it('renders SplitButtonStory with aria-label', () => {
+    renderAndMatchSnapshot({ children: 'Split Button', 'aria-label': 'Split Button Aria' });
+  });
+
+  it('renders SplitButtonStory with danger styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      isDanger: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with primary styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      isPrimary: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with neutral styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      isNeutral: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with basic styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      isBasic: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with pill styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      isPill: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with focus inset styling and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      focusInset: true,
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with small size and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      size: 'small',
+      isRotated: true
+    });
+  });
+
+  it('renders SplitButtonStory with large size and rotated chevron button', () => {
+    renderAndMatchSnapshot({
+      children: 'Split Button',
+      size: 'large',
+      isRotated: true
+    });
+  });
+});