feat(accordions, buttons, chrome, colorpickers, drag-drop, dropdowns, forms, grid, modals, notifications, pagination, tables, tabs, tags, typography): apply new focus styles for interactive elements (#1548)

Author: Francois-Esquire

packages/accordions/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 35152,
-    "minified": 25679,
-    "gzipped": 5699,
+    "bundled": 35205,
+    "minified": 25722,
+    "gzipped": 5727,
     "treeshaked": {
       "rollup": {
-        "code": 19928,
-        "import_statements": 666
+        "code": 19976,
+        "import_statements": 683
       },
       "webpack": {
-        "code": 22180
+        "code": 22211
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 38068,
-    "minified": 28345,
-    "gzipped": 5935
+    "bundled": 38108,
+    "minified": 28376,
+    "gzipped": 5959
   }
 }

packages/accordions/package.json

@@ -29,7 +29,7 @@
     "react-merge-refs": "^1.1.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"

packages/accordions/src/styled/accordion/StyledHeader.spec.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledHeader } from './StyledHeader';
 
 describe('StyledHeader', () => {
@@ -17,14 +16,15 @@ describe('StyledHeader', () => {
     expect(container.firstChild).not.toHaveStyleRule('box-shadow');
   });
 
-  it('renders isFocused styling correctly', () => {
+  it('renders focus styling correctly', () => {
     const { container } = render(<StyledHeader isFocused />);
 
     expect(container.firstChild).toHaveStyleRule(
       'box-shadow',
-      `${DEFAULT_THEME.shadows.md(
-        getColor('primaryHue', 600, DEFAULT_THEME, 0.35) as string
-      )} inset`
+      'inset 0 0 0 1px #fff, inset 0 0 0 3px #1f73b7',
+      {
+        modifier: '&:focus-within'
+      }
     );
   });
 });

packages/accordions/src/styled/accordion/StyledHeader.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.header';
 
@@ -22,15 +22,21 @@ export const StyledHeader = styled.div.attrs<IStyledHeader>({
 })<IStyledHeader>`
   display: flex;
   align-items: center;
-  box-shadow: ${props =>
-    props.isFocused &&
-    `${props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35) as string)} inset`};
+  transition: box-shadow 0.1s ease-in-out;
   font-size: ${props => props.theme.fontSizes.md};
 
   &:hover {
     cursor: ${props => (props.isCollapsible || !props.isExpanded) && 'pointer'};
   }
 
+  ${props =>
+    focusStyles({
+      theme: props.theme,
+      inset: true,
+      condition: props.isFocused,
+      selector: '&:focus-within'
+    })}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

packages/breadcrumbs/demo/stories/BreadcrumbStory.tsx

@@ -19,7 +19,9 @@ export const BreadcrumbStory: Story<IArgs> = ({ children, ...args }) => (
   <Breadcrumb {...args}>
     {children.map((child, index) =>
       index < children.length - 1 ? (
-        <Anchor key={index}>{child}</Anchor>
+        <Anchor key={index} href="#">
+          {child}
+        </Anchor>
       ) : (
         <span key={index}>{child}</span>
       )

packages/buttons/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 21655,
-    "minified": 15523,
-    "gzipped": 4223,
+    "bundled": 22437,
+    "minified": 15858,
+    "gzipped": 4399,
     "treeshaked": {
       "rollup": {
-        "code": 12552,
-        "import_statements": 430
+        "code": 12786,
+        "import_statements": 498
       },
       "webpack": {
-        "code": 13494
+        "code": 13799
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 23685,
-    "minified": 17349,
-    "gzipped": 4467
+    "bundled": 24510,
+    "minified": 17730,
+    "gzipped": 4645
   }
 }

packages/buttons/package.json

@@ -27,7 +27,7 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"