diff --git a/package.json b/package.json index bac0a33..8a5d688 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ ], "scripts": { "dev": "react-scripts start", - "start": "yarn storybook", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts index cc2a095..ab81ceb 100644 --- a/src/components/Button/styled.ts +++ b/src/components/Button/styled.ts @@ -49,7 +49,7 @@ export const PrimaryButton = styled(BaseButton)` box-shadow: 0px 4px 6px -1px #0000001A; } - &:focus { + &:focus-visible { outline-color: ${getThemedColor(theme.colors, 'primary', 700)}; background-color: ${getThemedColor(theme.colors, 'primary', 500)}; border: 2px solid ${getThemedColor(theme.colors, 'primary', 500)}; @@ -90,7 +90,7 @@ export const SecondaryButton = styled(BaseButton)` box-shadow: 0px 4px 6px -1px #0000001A; } - &:focus { + &:focus-visible { outline-color: ${getThemedColor(theme.colors, 'primary', 700)}; } ` @@ -131,7 +131,7 @@ export const BorderlessButton = styled(BaseButton)` box-shadow: 0px 4px 6px -1px #0000001A; } - &:focus { + &:focus-visible { outline-color: ${getThemedColor(theme.colors, 'primary', 700)}; } ` @@ -169,7 +169,7 @@ export const OutlineButton = styled(BaseButton)` border: 1px solid ${getThemedColor(theme.colors, 'primary', 900)} !important; } - &:focus { + &:focus-visible { outline-color: ${getThemedColor(theme.colors, 'primary', 700)}; background-color: ${getThemedColor(theme.colors, 'primary', 100)}; } diff --git a/src/components/NavigationRail/types.ts b/src/components/NavigationRail/types.ts index a1d2ce6..07bc441 100644 --- a/src/components/NavigationRail/types.ts +++ b/src/components/NavigationRail/types.ts @@ -7,7 +7,7 @@ export type NavigationRailTabProps = { } & ButtonProps export type NavigationRailProps = { - tabs?: NavigationRailTabProps[] + tabs: NavigationRailTabProps[] isOnLeft?: boolean defaultActiveTabId?: string onTabClick?: (tabId: string) => void diff --git a/src/components/Radio/styled.ts b/src/components/Radio/styled.ts index 48a17d9..9c7b8f4 100644 --- a/src/components/Radio/styled.ts +++ b/src/components/Radio/styled.ts @@ -20,9 +20,8 @@ export const StyledRadio = styled(Radio)<{ ${({ theme }) => getThemedColor(theme.colors, 'primary', 500)}40; } - &:focus, &:focus-visible, - &[data-focus] { + &[data-focus-visible] { outline: 2px solid ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)}; outline-offset: 2px; diff --git a/src/components/index.ts b/src/components/index.ts index 21214da..5185989 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export { default as Switch } from './Switch' export { default as Button } from './Button' export { default as NavigationRail } from './NavigationRail' +export { default as RadioGroup } from './Radio/RadioGroup'