Merge pull request #834 from securityscorecard/ajkl2533@UXD-1260

feat(action): unify focus state
securityscorecard · Oct 18, 2023 · b92aef8 · b92aef8
2 parents e0870d0 + dc3a8f1
commit b92aef8
Show file tree

Hide file tree

Showing 32 changed files with 81 additions and 216 deletions.
diff --git a/.storybook/image-snapshots/expected/components_Button_Outline Buttons.png b/.storybook/image-snapshots/expected/components_Button_Outline Buttons.png
diff --git a/.storybook/image-snapshots/expected/components_Button_Solid Buttons.png b/.storybook/image-snapshots/expected/components_Button_Solid Buttons.png
diff --git a/.storybook/image-snapshots/expected/components_Button_Text Buttons.png b/.storybook/image-snapshots/expected/components_Button_Text Buttons.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png b/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png
diff --git a/...rybook/image-snapshots/expected/components_SingleDatePicker_Open Datepicker.png b/...rybook/image-snapshots/expected/components_SingleDatePicker_Open Datepicker.png
diff --git a/src/components/Accordion/AccordionCollapsible.tsx b/src/components/Accordion/AccordionCollapsible.tsx
@@ -29,13 +29,6 @@ const Header = styled(Padbox)`
   &:hover {
     background-color: rgb(0 0 0 / 4%);
   }
-
-  &:focus-visible {
-    position: relative;
-    z-index: 1;
-    outline: 4px solid ${getColor('primary.200')};
-    border-radius: 4px;
-  }
 `;
 
 const Content = styled.div`

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -54,9 +54,6 @@ export const SolidButtons: Story = () => (
       <Button className="hover" color="primary" variant="solid">
         Hovered Button
       </Button>
-      <Button className="focus" color="primary" variant="solid">
-        Focused Button
-      </Button>
       <Button className="active" color="primary" variant="solid">
         Active Button
       </Button>
@@ -71,9 +68,6 @@ export const SolidButtons: Story = () => (
       <Button className="hover" color="success" variant="solid">
         Hovered Button
       </Button>
-      <Button className="focus" color="success" variant="solid">
-        Focused Button
-      </Button>
       <Button className="active" color="success" variant="solid">
         Active Button
       </Button>
@@ -88,9 +82,6 @@ export const SolidButtons: Story = () => (
       <Button className="hover" color="danger" variant="solid">
         Hovered Button
       </Button>
-      <Button className="focus" color="danger" variant="solid">
-        Focused Button
-      </Button>
       <Button className="active" color="danger" variant="solid">
         Active Button
       </Button>
@@ -110,9 +101,6 @@ export const OutlineButtons: Story = () => (
       <Button className="hover" color="primary" variant="outline">
         Hovered Button
       </Button>
-      <Button className="focus" color="primary" variant="outline">
-        Focused Button
-      </Button>
       <Button className="active" color="primary" variant="outline">
         Active Button
       </Button>
@@ -127,9 +115,6 @@ export const OutlineButtons: Story = () => (
       <Button className="hover" color="success" variant="outline">
         Hovered Button
       </Button>
-      <Button className="focus" color="success" variant="outline">
-        Focused Button
-      </Button>
       <Button className="active" color="success" variant="outline">
         Active Button
       </Button>
@@ -144,9 +129,6 @@ export const OutlineButtons: Story = () => (
       <Button className="hover" color="danger" variant="outline">
         Hovered Button
       </Button>
-      <Button className="focus" color="danger" variant="outline">
-        Focused Button
-      </Button>
       <Button className="active" color="danger" variant="outline">
         Active Button
       </Button>
@@ -166,9 +148,6 @@ export const TextButtons: Story = () => (
       <Button className="hover" color="primary" variant="text">
         Hovered Button
       </Button>
-      <Button className="focus" color="primary" variant="text">
-        Focused Button
-      </Button>
       <Button className="active" color="primary" variant="text">
         Active Button
       </Button>
@@ -183,9 +162,6 @@ export const TextButtons: Story = () => (
       <Button className="hover" color="secondary" variant="text">
         Hovered Button
       </Button>
-      <Button className="focus" color="secondary" variant="text">
-        Focused Button
-      </Button>
       <Button className="active" color="secondary" variant="text">
         Active Button
       </Button>
@@ -200,9 +176,6 @@ export const TextButtons: Story = () => (
       <Button className="hover" color="success" variant="text">
         Hovered Button
       </Button>
-      <Button className="focus" color="success" variant="text">
-        Focused Button
-      </Button>
       <Button className="active" color="success" variant="text">
         Active Button
       </Button>
@@ -217,9 +190,6 @@ export const TextButtons: Story = () => (
       <Button className="hover" color="danger" variant="text">
         Hovered Button
       </Button>
-      <Button className="focus" color="danger" variant="text">
-        Focused Button
-      </Button>
       <Button className="active" color="danger" variant="text">
         Active Button
       </Button>

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -5,7 +5,7 @@ import { pipe, prop } from 'ramda';
 import cls from 'classnames';
 
 import { Padbox, Stack } from '../layout';
-import { getColor, getRadii, getShadow, getSpace, getToken } from '../../utils';
+import { getColor, getRadii, getShadow, getSpace } from '../../utils';
 import { SpaceSize } from '../../theme/space.types';
 import { CardProps, CardWrapperProps } from './Card.types';
 import { CLX_COMPONENT } from '../../theme/constants';
@@ -17,12 +17,6 @@ const InteractiveCard = css`
   &:hover {
     box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.07);
   }
-  &:focus-visible {
-    outline: 0;
-    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.07),
-      inset 0 0 0 1px ${getToken('color-action-primary')};
-    border-color: ${getToken('color-action-primary')};
-  }
   &:active {
     box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.07);
   }

diff --git a/src/components/Card/CardHeader.tsx b/src/components/Card/CardHeader.tsx
@@ -34,13 +34,9 @@ export const CardIconButton = styled.button<{
     props.as !== 'div' &&
     css`
       cursor: pointer;
-      &:hover,
-      &:focus-visible {
+      &:hover {
         background-color: ${getColor('primary.50')};
       }
-      &:focus {
-        outline: none;
-      }
     `}
 `;
 export const CardIconWrapper = styled(Padbox)`
@@ -86,7 +82,6 @@ const StyledIcon = styled(Icon).withConfig<{ color: Color }>({
   border-radius: 100%;
   color: ${({ color, theme }) =>
     isNotUndefined(color) ? getColor(color, { theme }) : 'inherit'};
-  &:focus-visible,
   &:hover {
     color: ${({ theme }) => getColor('neutral.700', { theme })};
   }

diff --git a/src/components/CloseButton/CloseButton.tsx b/src/components/CloseButton/CloseButton.tsx
@@ -41,12 +41,9 @@ const CloseButtonWrapper = styled.button<CloseButtonWrapperProps>`
   padding: ${getSpace(SpaceSizes.sm)};
   color: ${({ $isInverted, theme }) =>
     getColor($isInverted ? 'neutral.0' : 'neutral.1000', { theme })};
+  outline-offset: ${getNegativeSpace(SpaceSizes.sm)};
 
-  &:hover
-    ${/* sc-selector */ IconWrapper},
-    &:focus
-    ${/* sc-selector */ IconWrapper} {
-    outline: none;
+  &:hover ${/* sc-selector */ IconWrapper} {
     background-color: ${(props) =>
       transparentize(0.96, getColor('neutral.1000', props))};
   }

diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { includes } from 'ramda';
 import cls from 'classnames';
 
@@ -19,17 +19,17 @@ import { CLX_COMPONENT } from '../../theme/constants';
 const Header = styled(Padbox)`
   width: 100%;
   cursor: pointer;
+  border-radius: ${getRadii('default')};
 
+  ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    `}
   &:hover {
     background-color: rgb(0 0 0 / 4%);
   }
-
-  &:focus-visible {
-    position: relative;
-    z-index: 1;
-    outline: 4px solid ${getColor('primary.200')};
-    border-radius: ${getRadii('default')};
-  }
 `;
 
 const HeaderContent = styled.div`
@@ -73,6 +73,7 @@ const Collapsible: React.FC<CollapsibleProps> = ({
   return (
     <Container className={cls(CLX_COMPONENT, className)}>
       <Header
+        $isOpen={isOpen}
         paddingSize={SpaceSizes.mdPlus}
         paddingType={PaddingTypes.squish}
         tabIndex={0}

diff --git a/src/components/DropdownMenu/DropdownMenu.stories.tsx b/src/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -9,6 +9,7 @@ import { DropdownMenuProps } from '../_internal/BaseDropdownMenu/DropdownMenu.ty
 import { Inline, Padbox } from '../layout';
 import { pxToRem } from '../../utils';
 import { ActionKinds } from '../../types/action.types';
+import { Button } from '../Button';
 
 const Wrapper = styled(Padbox)`
   margin-bottom: ${pxToRem(100)};
@@ -61,7 +62,9 @@ export default {
 
 export const Default: Story<DropdownMenuProps> = (args) => (
   <Inline justify="center">
-    <DropdownMenu {...args}>Dropdown handler</DropdownMenu>
+    <DropdownMenu {...args}>
+      <Button>Handler</Button>
+    </DropdownMenu>
   </Inline>
 );
 Default.args = {

diff --git a/src/components/HintTooltip/HintTooltip.tsx b/src/components/HintTooltip/HintTooltip.tsx
@@ -19,7 +19,6 @@ const StyledIcon = styled(Icon).withConfig<{ color: Color }>({
   border-radius: 100%;
   color: ${({ color, theme }) =>
     isNotUndefined(color) ? getColor(color, { theme }) : 'inherit'};
-  &:focus-visible,
   &:hover {
     color: ${({ theme }) => getColor('neutral.700', { theme })};
   }

diff --git a/src/components/Pagination/PaginationItem.tsx b/src/components/Pagination/PaginationItem.tsx
@@ -39,9 +39,6 @@ const StyledPaginationComponent = styled.button<{
   &:last-of-type {
     margin-right: 0;
   }
-  &:focus {
-    outline: none;
-  }
   &:disabled {
     color: ${getColor('neutral.600')};
     cursor: default;

diff --git a/src/components/Pill/PillRemoveButton.tsx b/src/components/Pill/PillRemoveButton.tsx
@@ -23,7 +23,7 @@ const PillRemoveButtonWrapper = styled.button`
   border-radius: ${getRadii('circle')};
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: ${getColor('neutral.0')};
     background-color: ${getColor('error.500')};
   }

diff --git a/src/components/Pill/PillWrapper.tsx b/src/components/Pill/PillWrapper.tsx
@@ -22,10 +22,8 @@ const StyledPillWrapper = styled(Padbox)<StyledPillWrapperProps>`
     $isClickable &&
     css`
       cursor: pointer;
-      &:hover,
-      &:focus {
+      &:hover {
         background-color: ${PillColors[$color][1]};
-        outline: none;
       }
     `}
 `;

diff --git a/src/components/Stepper/Step.tsx b/src/components/Stepper/Step.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { isNotUndefined } from 'ramda-adjunct';
 
-import { getColor, getSpace, pxToRem } from '../../utils';
+import { getColor, getRadii, getSpace, pxToRem } from '../../utils';
 import { SpaceSizes } from '../../theme';
 import { Text } from '../typographyLegacy/Text';
 import { TextSizes, TextVariants } from '../typographyLegacy/Text/Text.enums';
@@ -25,18 +25,14 @@ const StepSummary = styled(Text)`
 const StepButton = styled.button`
   border: 0 none;
   background: transparent none;
+  border-radius: ${getRadii('default')};
 
   &:hover {
     cursor: pointer;
-  }
-  &:focus {
-    outline: 0;
-  }
-  &:hover
-    ${/* sc-selector */ BulletCircle},
-    &:focus
+
     ${/* sc-selector */ BulletCircle} {
-    fill: ${getColor('primary.50')};
+      fill: ${getColor('primary.50')};
+    }
   }
 `;
 

diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
@@ -41,10 +41,6 @@ const invertedAvatar = css`
     background-color: ${getColor('primary.50')};
     color: ${getColor('neutral.900')};
   }
-  &:focus {
-    background-color: ${getColor('neutral.0')};
-    color: ${getColor('neutral.900')};
-  }
   &:active {
     background-color: ${getColor('primary.200')};
     color: ${getColor('neutral.900')};

diff --git a/src/components/_internal/BaseButton/BaseStyledButton.tsx b/src/components/_internal/BaseButton/BaseStyledButton.tsx
@@ -12,7 +12,6 @@ import {
 import { BaseStyledButtonProps } from './BaseButton.types';
 import { BaseButtonVariants } from './BaseButton.enums';
 import { Padbox } from '../../layout';
-import { ButtonColors } from '../../Button/Button.enums';
 
 /*
  * BUTTON VARIANTS
@@ -28,11 +27,6 @@ const ButtonSolid = css<BaseStyledButtonProps>`
     color: ${getToken(`color-action-text-solid`)};
     background-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
   }
-  &:focus-visible,
-  &.focus {
-    background-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
-    outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
-  }
 
   &:disabled,
   &.disabled {
@@ -53,12 +47,6 @@ const ButtonOutline = css<BaseStyledButtonProps>`
     color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
     border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
   }
-  &:focus-visible,
-  &.focus {
-    color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
-    border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
-    outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
-  }
 
   &:disabled,
   &.disabled {
@@ -67,34 +55,19 @@ const ButtonOutline = css<BaseStyledButtonProps>`
   }
 `;
 
-const isLinkLike = (color) =>
-  color === ButtonColors.primary || color === ButtonColors.secondary
-    ? 'link-'
-    : '';
 const ButtonText = css<BaseStyledButtonProps>`
   background-color: transparent;
   border-color: transparent;
   padding-left: 0;
   padding-right: 0;
   font-weight: ${getFontWeight('semibold')};
-  color: ${(p) =>
-    getToken(`color-action-${isLinkLike(p.$color)}${p.$color}`, p)};
+  color: ${(p) => getToken(`color-action-${p.$color}`, p)};
 
   &:hover,
   &.hover {
-    color: ${(p) =>
-      getToken(`color-action-${isLinkLike(p.$color)}${p.$color}-hover`, p)};
-  }
-  &:focus-visible,
-  &.focus {
-    background-color: ${(p) =>
-      getToken(
-        `color-action-${isLinkLike(p.$color)}background-${p.$color}-focus`,
-        p,
-      )};
-    color: ${(p) =>
-      getToken(`color-action-${isLinkLike(p.$color)}${p.$color}-hover`, p)};
-    outline: none;
+    color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
+    background: ${(p) =>
+      getToken(`color-action-background-${p.$color}-focus`, p)};
   }
 
   &:disabled,
@@ -139,9 +112,7 @@ const BaseStyledButton = styled(Padbox).withConfig({
     css`
       width: ${pipe(getToken('size-action-size'), pxToRem)};
     `};
-  &:focus {
-    outline: 0;
-  }
+
   ${({ $variant }) => buttonVariants[$variant]};
 
   &,