diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
index bb52bd04..50b1a250 100644
--- a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
+++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
@@ -973,18 +973,6 @@ exports[` should pass options 1`] = `
outline: none;
width: 100%;
height: var(--pv-size-base-7);
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- -webkit-transition: background-color 200ms;
- transition: background-color 200ms;
- background-color: transparent;
- border: none;
- box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -998,22 +986,40 @@ exports[` should pass options 1`] = `
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-transition: background-color 200ms;
+ transition: background-color 200ms;
+ background-color: transparent;
+ border: none;
+ box-sizing: border-box;
+ gap: var(--pv-size-base-2);
+ cursor: pointer;
color: var(--pv-color-black);
}
.emotion-10:hover {
- background-color: var(--pv-color-gray-2);
+ background-color: var(--pv-color-gray-3);
}
+.emotion-10:focus-visible,
.emotion-10[data-focused="true"] {
- background-color: var(--pv-color-gray-3);
+ background-color: var(--pv-color-gray-4);
}
+.emotion-10:active,
.emotion-10[aria-selected="true"] {
- background-color: var(--pv-color-gray-4);
+ background-color: var(--pv-color-gray-5);
}
.emotion-11 {
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
margin: 0;
color: inherit;
font-weight: var(--pv-text-b3-weight);
@@ -1113,11 +1119,11 @@ exports[` should pass options 1`] = `
role="option"
tabindex="-1"
>
-
test-1
-
+
should pass options 1`] = `
role="option"
tabindex="-1"
>
-
test-2
-
+
diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx
index a2ece872..eff42ff0 100644
--- a/packages/react-components/src/Autocomplete/autocomplete.tsx
+++ b/packages/react-components/src/Autocomplete/autocomplete.tsx
@@ -13,6 +13,7 @@ import { Box } from '../Box';
import { Chip } from '../Chip';
import { Button } from '../Button';
import { ArrowDropDownIcon, PlusIcon } from '../icons';
+import { MenuItem } from '../MenuList';
/**
* Types.
@@ -259,56 +260,12 @@ const AutocompleteDropdownGroupList = styled('ul')({
listStyleType: 'none',
});
-const AutocompleteDropdownGroupListItem = styled('li')>(
+const AutocompleteDropdownGroupListItem = styled(MenuItem)>(
(props) => ({
- ...(props.inGroup ? {
+ ...(props.inGroup && {
padding: '0px var(--pv-size-base-2) 0 var(--pv-size-base-3)',
- } : {
- padding: '0px var(--pv-size-base-2)',
}),
- fontFamily: 'inherit',
- outline: 'none',
- width: '100%',
- height: 'var(--pv-size-base-7)',
- textDecoration: 'none',
- userSelect: 'none',
- cursor: 'pointer',
- transition: 'background-color 200ms',
- backgroundColor: 'transparent',
- border: 'none',
- boxSizing: 'border-box',
- display: 'flex',
- textAlign: 'left',
- alignItems: 'center',
- justifyContent: 'flex-start',
}),
- (props) => {
- const isDark = props.theme.mode === 'dark';
- let color = 'var(--pv-color-black)';
- let backgroundColorHover = 'var(--pv-color-gray-2)';
- let backgroundColorFocused = 'var(--pv-color-gray-3)';
- let backgroundColorSelected = 'var(--pv-color-gray-4)';
-
- if (isDark) {
- color = 'var(--pv-color-white)';
- backgroundColorHover = 'var(--pv-color-gray-4)';
- backgroundColorFocused = 'var(--pv-color-gray-5)';
- backgroundColorSelected = 'var(--pv-color-gray-6)';
- }
-
- return {
- color,
- '&:hover': {
- backgroundColor: backgroundColorHover,
- },
- '&[data-focused="true"]': {
- backgroundColor: backgroundColorFocused,
- },
- '&[aria-selected="true"]': {
- backgroundColor: backgroundColorSelected,
- },
- };
- },
);
const AutocompletePopover = styled(Popover)({
@@ -432,13 +389,7 @@ Multiple extends boolean | undefined = false,
{...propsOption}
inGroup={Boolean(groupBy)}
>
-
- {getOptionLabel(option)}
-
+ {getOptionLabel(option)}
);
diff --git a/packages/react-components/src/Menu/__snapshots__/menu.test.tsx.snap b/packages/react-components/src/Menu/__snapshots__/menu.test.tsx.snap
index a55d4ccc..bfbe3272 100644
--- a/packages/react-components/src/Menu/__snapshots__/menu.test.tsx.snap
+++ b/packages/react-components/src/Menu/__snapshots__/menu.test.tsx.snap
@@ -95,11 +95,13 @@ exports[` should pass className 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-4:focus-visible {
+.emotion-4:focus-visible,
+.emotion-4[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-4:active {
+.emotion-4:active,
+.emotion-4[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
diff --git a/packages/react-components/src/MenuList/__snapshots__/menu_item.test.tsx.snap b/packages/react-components/src/MenuList/__snapshots__/menu_item.test.tsx.snap
index 2c863cda..eafdc0c2 100644
--- a/packages/react-components/src/MenuList/__snapshots__/menu_item.test.tsx.snap
+++ b/packages/react-components/src/MenuList/__snapshots__/menu_item.test.tsx.snap
@@ -41,11 +41,13 @@ exports[` should have start & end icons 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-0:focus-visible {
+.emotion-0:focus-visible,
+.emotion-0[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-0:active {
+.emotion-0:active,
+.emotion-0[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
@@ -163,11 +165,13 @@ exports[` should pass className 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-0:focus-visible {
+.emotion-0:focus-visible,
+.emotion-0[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-0:active {
+.emotion-0:active,
+.emotion-0[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
@@ -242,11 +246,13 @@ exports[` should pass disabled 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-0:focus-visible {
+.emotion-0:focus-visible,
+.emotion-0[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-0:active {
+.emotion-0:active,
+.emotion-0[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
@@ -321,11 +327,13 @@ exports[` should render with default styles 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-0:focus-visible {
+.emotion-0:focus-visible,
+.emotion-0[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-0:active {
+.emotion-0:active,
+.emotion-0[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
diff --git a/packages/react-components/src/MenuList/__snapshots__/sub_menu_item.test.tsx.snap b/packages/react-components/src/MenuList/__snapshots__/sub_menu_item.test.tsx.snap
index e30a338c..64fc0c59 100644
--- a/packages/react-components/src/MenuList/__snapshots__/sub_menu_item.test.tsx.snap
+++ b/packages/react-components/src/MenuList/__snapshots__/sub_menu_item.test.tsx.snap
@@ -41,11 +41,13 @@ exports[` should render with default styles 1`] = `
background-color: var(--pv-color-gray-3);
}
-.emotion-0:focus-visible {
+.emotion-0:focus-visible,
+.emotion-0[data-focused="true"] {
background-color: var(--pv-color-gray-4);
}
-.emotion-0:active {
+.emotion-0:active,
+.emotion-0[aria-selected="true"] {
background-color: var(--pv-color-gray-5);
}
diff --git a/packages/react-components/src/MenuList/menu_item.tsx b/packages/react-components/src/MenuList/menu_item.tsx
index 02d0f735..d0ebd5c3 100644
--- a/packages/react-components/src/MenuList/menu_item.tsx
+++ b/packages/react-components/src/MenuList/menu_item.tsx
@@ -90,10 +90,10 @@ const MenuItemRoot = styled('li', {
'&:hover': {
backgroundColor: backgroundColorHover,
},
- '&:focus-visible': {
+ '&:focus-visible, &[data-focused="true"]': {
backgroundColor: backgroundColorFocused,
},
- '&:active': {
+ '&:active, &[aria-selected="true"]': {
backgroundColor: backgroundColorSelected,
},
...(props.disabled && {
diff --git a/packages/react-components/src/styles/palette.stories.tsx b/packages/react-components/src/styles/palette.stories.tsx
index c04185c6..5ebee6f5 100644
--- a/packages/react-components/src/styles/palette.stories.tsx
+++ b/packages/react-components/src/styles/palette.stories.tsx
@@ -49,7 +49,7 @@ export const ColorItemExample: React.FC<{ title: string; colors: Record {
+export const PalettePlaygroundExample = () => {
const [color, setColor] = React.useState(colorsTheme.primary.primary);
const palette = colorsTheme.generateColorPalette('custom', color);
diff --git a/packages/react-components/src/styles/palette_playground.mdx b/packages/react-components/src/styles/palette_playground.mdx
index 571e7129..4950e727 100644
--- a/packages/react-components/src/styles/palette_playground.mdx
+++ b/packages/react-components/src/styles/palette_playground.mdx
@@ -1,8 +1,8 @@
import { Meta } from '@storybook/blocks';
-import { PalettePlayground } from './palette.stories'
+import { PalettePlaygroundExample } from './palette.stories'
# Palette Playground
-
+