feat: Focus handling for Cards and Chips (#513)

pluralsh · Aug 28, 2023 · 4dd9851 · 4dd9851
1 parent 43cd883
commit 4dd9851
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -1,7 +1,6 @@
 import { Div, type DivProps } from 'honorable'
 import { forwardRef, useMemo } from 'react'
-
-import { styledTheme as theme } from '../theme'
+import { useTheme } from 'styled-components'
 
 import {
   type FillLevel,
@@ -100,20 +99,31 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
     ref
   ) => {
     fillLevel = useDecideFillLevel({ hue, fillLevel })
+    const theme = useTheme()
 
     return (
       <FillLevelProvider value={fillLevel}>
         <Div
           ref={ref}
+          {...theme.partials.reset.button}
           border={`1px solid ${fillLevelToBorderColor[fillLevel]}`}
           borderRadius={cornerSizeToBorderRadius[size]}
           backgroundColor={
             selected
               ? fillLevelToSelectedBGColor[fillLevel]
               : fillLevelToBGColor[fillLevel]
           }
+          {...{
+            '&:focus, &:focus-visible': {
+              outline: 'none',
+            },
+            '&:focus-visible': {
+              borderColor: theme.colors['border-outline-focused'],
+            },
+          }}
           {...(clickable && {
             cursor: 'pointer',
+            as: 'button',
           })}
           {...(clickable &&
             !selected && {

diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -1,6 +1,11 @@
 import { Flex, type FlexProps, Spinner } from 'honorable'
 import PropTypes from 'prop-types'
-import { type ReactElement, type Ref, forwardRef } from 'react'
+import {
+  type ComponentProps,
+  type ReactElement,
+  type Ref,
+  forwardRef,
+} from 'react'
 import styled, { type DefaultTheme } from 'styled-components'
 
 import Card, { type BaseCardProps } from './Card'
@@ -93,8 +98,9 @@ function ChipRef(
     icon,
     closeButton,
     clickable,
+    as,
     ...props
-  }: ChipProps,
+  }: ChipProps & { as?: ComponentProps<typeof ChipCard>['forwardedAs'] },
   ref: Ref<any>
 ) {
   const parentFillLevel = useFillLevel()
@@ -113,6 +119,8 @@ function ChipRef(
       paddingHorizontal={size === 'small' ? 'xsmall' : 'small'}
       alignItems="center"
       display="inline-flex"
+      textDecoration="none"
+      {...(as ? { forwardedAs: as } : {})}
       {...props}
     >
       {loading && (

diff --git a/src/stories/Chip.stories.tsx b/src/stories/Chip.stories.tsx
@@ -5,6 +5,8 @@ import { StatusOkIcon, WrapWithIf } from '..'
 import Chip from '../components/Chip'
 import Card from '../components/Card'
 
+import { Link } from './NavigationContextStub'
+
 export default {
   title: 'Chip',
   component: Chip,
@@ -47,7 +49,11 @@ const severities: ComponentProps<typeof Chip>['severity'][] = [
 
 const versionsArgs = [{}, { loading: true }, { icon: <StatusOkIcon /> }]
 
-function Template({ onFillLevel, ...args }: any) {
+function Template({ onFillLevel, asLink, ...args }: any) {
+  if (asLink) {
+    args = { ...args, as: Link, href: '#' }
+  }
+
   return (
     <>
       {/* Sizes */}
@@ -236,5 +242,6 @@ export const Default = Template.bind({})
 Default.args = {
   closeButton: false,
   clickable: false,
+  asLink: false,
   onFillLevel: 0,
 }