From 326dc657aae7e280b6ae21732357ebf2392ddf16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 11 Apr 2023 17:40:37 +0200 Subject: [PATCH] [docs] Use focus-visible instead of focus for Menu demos --- docs/data/base/components/menu/MenuSimple.js | 5 +++-- docs/data/base/components/menu/MenuSimple.tsx | 5 +++-- docs/data/base/components/menu/UnstyledMenuIntroduction.js | 5 +++-- docs/data/base/components/menu/UnstyledMenuIntroduction.tsx | 5 +++-- docs/data/base/components/menu/UseMenu.js | 2 +- docs/data/base/components/menu/UseMenu.tsx | 2 +- docs/data/base/components/menu/WrappedMenuItems.js | 4 ++-- docs/data/base/components/menu/WrappedMenuItems.tsx | 4 ++-- 8 files changed, 18 insertions(+), 14 deletions(-) diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js index 12a46816737323..f7d2bd14c41f29 100644 --- a/docs/data/base/components/menu/MenuSimple.js +++ b/docs/data/base/components/menu/MenuSimple.js @@ -3,6 +3,7 @@ import MenuUnstyled from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -167,7 +168,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -189,7 +190,7 @@ const TriggerButton = styled('button')( border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; } - &:focus { + &.${buttonUnstyledClasses.focusVisible} { border-color: ${blue[400]}; outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx index dacfe9d167edab..467cd455b3f34e 100644 --- a/docs/data/base/components/menu/MenuSimple.tsx +++ b/docs/data/base/components/menu/MenuSimple.tsx @@ -3,6 +3,7 @@ import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -168,7 +169,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -190,7 +191,7 @@ const TriggerButton = styled('button')( border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; } - &:focus { + &.${buttonUnstyledClasses.focusVisible} { border-color: ${blue[400]}; outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js index 16c791f7fe572b..c60cb26a176747 100644 --- a/docs/data/base/components/menu/UnstyledMenuIntroduction.js +++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.js @@ -3,6 +3,7 @@ import MenuUnstyled from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -165,7 +166,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -187,7 +188,7 @@ const TriggerButton = styled('button')( border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; } - &:focus { + &.${buttonUnstyledClasses.focusVisible} { border-color: ${blue[400]}; outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx index 0304bbc43969f5..a9cf9a7910a151 100644 --- a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx +++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx @@ -3,6 +3,7 @@ import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -166,7 +167,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; @@ -188,7 +189,7 @@ const TriggerButton = styled('button')( border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; } - &:focus { + &.${buttonUnstyledClasses.focusVisible} { border-color: ${blue[400]}; outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js index 32263958a0195a..20fd3927e4d22e 100644 --- a/docs/data/base/components/menu/UseMenu.js +++ b/docs/data/base/components/menu/UseMenu.js @@ -238,7 +238,7 @@ const styles = ` border-color: ${grey[300]}; } - &:focus { + &:focus-visible { border-color: ${blue[400]}; outline: 3px solid ${blue[200]}; } diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx index cb72abf94df1ff..82f1c2e0a78530 100644 --- a/docs/data/base/components/menu/UseMenu.tsx +++ b/docs/data/base/components/menu/UseMenu.tsx @@ -236,7 +236,7 @@ const styles = ` border-color: ${grey[300]}; } - &:focus { + &:focus-visible { border-color: ${blue[400]}; outline: 3px solid ${blue[200]}; } diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js index 2f88d313f182a5..1c4a6dfbd4befb 100644 --- a/docs/data/base/components/menu/WrappedMenuItems.js +++ b/docs/data/base/components/menu/WrappedMenuItems.js @@ -4,7 +4,7 @@ import MenuUnstyled from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; -import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -201,7 +201,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem; diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx index ccaf4e1d6ed30a..25b8b9fef72ad3 100644 --- a/docs/data/base/components/menu/WrappedMenuItems.tsx +++ b/docs/data/base/components/menu/WrappedMenuItems.tsx @@ -3,7 +3,7 @@ import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled'; import MenuItemUnstyled, { menuItemUnstyledClasses, } from '@mui/base/MenuItemUnstyled'; -import { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; +import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; import PopperUnstyled from '@mui/base/PopperUnstyled'; import { styled } from '@mui/system'; import { ListActionTypes } from '@mui/base/useList'; @@ -196,7 +196,7 @@ const StyledMenuItem = styled(MenuItemUnstyled)( `, ); -const TriggerButton = styled('button')( +const TriggerButton = styled(ButtonUnstyled)( ({ theme }) => ` font-family: IBM Plex Sans, sans-serif; font-size: 0.875rem;