chore(react-components): use MenuItem in Autocomplete list

PeculiarVentures · Mar 5, 2024 · 088dc70 · 088dc70
1 parent aeec589
commit 088dc70
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 89 deletions.
diff --git 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[`<Autocomplete /> 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[`<Autocomplete /> 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[`<Autocomplete /> should pass options 1`] = `
           role="option"
           tabindex="-1"
         >
-          <p
+          <span
             class="emotion-11"
           >
             test-1
-          </p>
+          </span>
         </li>
         <li
           aria-selected="false"
@@ -1127,11 +1133,11 @@ exports[`<Autocomplete /> should pass options 1`] = `
           role="option"
           tabindex="-1"
         >
-          <p
+          <span
             class="emotion-11"
           >
             test-2
-          </p>
+          </span>
         </li>
       </ul>
     </div>

diff --git 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')<Required<{ inGroup: boolean }>>(
+const AutocompleteDropdownGroupListItem = styled(MenuItem)<Required<{ inGroup: boolean }>>(
   (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)}
     >
-      <Typography
-        variant="b3"
-        color="inherit"
-        noWrap
-      >
-        {getOptionLabel(option)}
-      </Typography>
+      {getOptionLabel(option)}
     </AutocompleteDropdownGroupListItem>
   );
 

diff --git 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[`<Menu /> 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
@@ -41,11 +41,13 @@ exports[`<MenuItem /> 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[`<MenuItem /> 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[`<MenuItem /> 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[`<MenuItem /> 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
@@ -41,11 +41,13 @@ exports[`<SubMenuItem /> 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
@@ -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
@@ -49,7 +49,7 @@ export const ColorItemExample: React.FC<{ title: string; colors: Record<string,
   );
 };
 
-export const PalettePlayground = () => {
+export const PalettePlaygroundExample = () => {
   const [color, setColor] = React.useState<string>(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
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
-import { PalettePlayground } from './palette.stories'
+import { PalettePlaygroundExample } from './palette.stories'
 
 <Meta title="Customization/Palette Playground" />
 
 # Palette Playground
 
-<PalettePlayground />
+<PalettePlaygroundExample />