fix: styling for Combobox, Dropdown and Popover [MDS-972]

next-docs/package.json

@@ -63,7 +63,7 @@
     "sharp": "0.32.6",
     "styled-components": "5.3.11",
     "swr": "1.3.0",
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "3.4.1",
     "typescript": "4.9.5",
     "zod": "3.21.4"
   },

next-docs/pages/components/combobox.tsx

@@ -9,7 +9,6 @@ import Default from '../../public/examples/combobox/Default';
 import InsetMultiSelect from '../../public/examples/combobox/InsetMultiSelect';
 import InsetSelect from '../../public/examples/combobox/InsetSelect';
 import InsetSelectStates from '../../public/examples/combobox/InsetSelectStates';
-import LongNameOptions from '../../public/examples/combobox/LongNameOptions';
 import MultiAllSelect from '../../public/examples/combobox/MultiAllSelect';
 import MultiSelect from '../../public/examples/combobox/MultiSelect';
 import Select from '../../public/examples/combobox/Select';
@@ -142,7 +141,7 @@ const PageCombobox = () => {
         code={examples ? examples.InsetMultiSelect : 'Loading'}
       />
 
-    <ComponentAnatomy>
+      <ComponentAnatomy>
         {`<Combobox>
   <Combobox.VisualMultiSelect>...</Combobox.VisualMultiSelect>
   <Combobox.Options>
@@ -157,13 +156,6 @@ const PageCombobox = () => {
         preview={<VisualMultiSelect />}
         code={examples ? examples.VisualMultiSelect : 'Loading'}
       />
-
-      <Preview
-        title="Alignment of controls for options with long names"
-        preview={<LongNameOptions />}
-        code={examples ? examples.LongNameOptions : 'Loading'}
-      />
-
       <PropsTable
         title="Combobox"
         data={[
@@ -369,13 +361,6 @@ const PageCombobox = () => {
       <PropsTable
         title="Combobox.Options"
         data={[
-          {
-            name: 'menuWidth',
-            type: 'string',
-            required: false,
-            default: '-',
-            description: 'Tailwind class for custom options container width.',
-          },
           {
             name: 'className',
             type: 'string',
@@ -590,7 +575,8 @@ const PageCombobox = () => {
             type: 'boolean',
             required: false,
             default: '-',
-            description: 'If you need to align the list of options properly on each select/deselect set the "boolean" property.',
+            description:
+              'If you need to align the list of options properly on each select/deselect set the "boolean" property.',
           },
         ]}
       />

next-docs/pages/components/dropdown.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import Preview from '../../components/codePreview/Preview';
 import ComponentAnatomy from '../../components/ComponentAnatomy';
 import ComponentPageDescription from '../../components/ComponentPageDescription';
+import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Default from '../../public/examples/dropdown/Default';
@@ -15,7 +16,6 @@ import Select from '../../public/examples/dropdown/Select';
 import SelectStates from '../../public/examples/dropdown/SelectStates';
 import TriggerElements from '../../public/examples/dropdown/TriggerElements';
 import useComponent from '../../utils/useComponent';
-import type { ComponentNames } from '../../components/getComponent';
 
 const COMPONENT_NAME: ComponentNames = 'Dropdown';
 
@@ -227,13 +227,6 @@ const PageDropdown = () => {
       <PropsTable
         title="Dropdown.Options"
         data={[
-          {
-            name: 'menuWidth',
-            type: 'string',
-            required: false,
-            default: '-',
-            description: 'Tailwind class for custom options container width.',
-          },
           {
             name: 'className',
             type: 'string',

next-docs/public/examples/carousel/__tests__/__snapshots__/index.test.tsx.snap

@@ -1386,31 +1386,31 @@ Object {
           class="flex gap-1"
         >
           <button
-            class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
+            class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
             type="button"
           >
             0
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             1
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             2
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             3
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             4
@@ -1460,31 +1460,31 @@ Object {
         class="flex gap-1"
       >
         <button
-          class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
+          class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
           type="button"
         >
           0
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           1
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           2
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           3
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           4
@@ -2250,31 +2250,31 @@ Object {
           class="flex gap-1"
         >
           <button
-            class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
+            class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
             type="button"
           >
             0
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             1
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             2
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             3
           </button>
           <button
-            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+            class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
             type="button"
           >
             4
@@ -2325,31 +2325,31 @@ Object {
         class="flex gap-1"
       >
         <button
-          class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
+          class="flex gap-2 justify-between items-center p-2 rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full bg-heles px-4"
           type="button"
         >
           0
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           1
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           2
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           3
         </button>
         <button
-          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
+          class="flex gap-2 justify-between items-center p-2 bg-transparent rounded-moon-i-sm text-moon-14 text-bulma text-start focus:outline-none focus:shadow-focus cursor-pointer hover:bg-heles transition w-full px-4"
           type="button"
         >
           4

next-docs/public/examples/combobox/Default.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
 import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
 
@@ -45,7 +45,11 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]" onClose={console.log}>
+            <Combobox.Trigger
+              open={open}
+              className="min-w-[18.75rem]"
+              onClose={console.log}
+            >
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}
@@ -56,7 +60,7 @@ const Example = () => {
               </Combobox.Button>
             </Combobox.Trigger>
             <Combobox.Transition>
-              <Combobox.Options className={'min-w-[18.75rem] z-50'}>
+              <Combobox.Options>
                 {filteredPeople0.length === 0 && query0 !== '' ? (
                   <div className="relative cursor-default select-none py-2 px-4 text-trunks">
                     Nothing found.
@@ -90,7 +94,11 @@ const Example = () => {
       >
         {({ open }) => (
           <>
-            <Combobox.Trigger open={open} className="min-w-[18.75rem]" onClose={console.log}>
+            <Combobox.Trigger
+              open={open}
+              className="min-w-[18.75rem]"
+              onClose={console.log}
+            >
               <Combobox.Input
                 open={open}
                 placeholder={'Choose a name...'}
@@ -101,7 +109,7 @@ const Example = () => {
               </Combobox.Button>
             </Combobox.Trigger>
             <Combobox.Transition>
-              <Combobox.Options className={'min-w-[18.75rem] z-50'}>
+              <Combobox.Options>
                 {filteredPeople1.length === 0 && query1 !== '' ? (
                   <div className="relative cursor-default select-none py-2 px-4 text-trunks">
                     Nothing found.

next-docs/public/examples/combobox/InsetMultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
 import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
 

next-docs/public/examples/combobox/InsetSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
 import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
 

next-docs/public/examples/combobox/InsetSelectStates.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
 import {
   ControlsChevronDownSmall,
@@ -32,17 +32,14 @@ const Example = () => {
   const [selected0, setSelected0] = useState(people[2]);
   const [selected1, setSelected1] = useState(people[0]);
   const [selected2, setSelected2] = useState({});
-  const [selected3, setSelected3] = useState({});
 
   const [query0, setQuery0] = useState<string>('');
   const [query1, setQuery1] = useState<string>('');
   const [query2, setQuery2] = useState<string>('');
-  const [query3, setQuery3] = useState<string>('');
 
   const filteredPeople0 = filter(query0, people);
   const filteredPeople1 = filter(query1, people);
   const filteredPeople2 = filter(query2, people);
-  const filteredPeople3 = filter(query3, people);
 
   return (
     <div className="flex flex-col items-center lg:flex-row lg:justify-center lg:items-start w-full gap-4">
@@ -152,7 +149,7 @@ const Example = () => {
               <ControlsChevronDownSmall />
             </Combobox.InsetSelect>
             <Combobox.Transition>
-              <Combobox.Options className="z-5 rounded-moon-s-md box-border bg-gohan shadow-moon-lg py-2 px-1 my-2">
+              <Combobox.Options>
                 {filteredPeople2.length === 0 && query2 !== '' ? (
                   <div className="relative cursor-default select-none py-2 px-4 text-trunks">
                     Nothing found.
@@ -175,50 +172,6 @@ const Example = () => {
           </>
         )}
       </Combobox>
-
-      <Combobox
-        value={selected3}
-        onChange={setSelected3}
-        onQueryChange={setQuery3}
-        className="w-full max-w-xs"
-      >
-        {({ open }) => (
-          <>
-            <Combobox.InsetSelect
-              open={open}
-              label="List options width"
-              placeholder="Choose an option"
-              displayValue={({ label }) => label}
-            >
-              <ControlsChevronDownSmall />
-            </Combobox.InsetSelect>
-            <Combobox.Transition>
-              <Combobox.Options
-                menuWidth="w-40"
-                className="z-5 rounded-moon-s-md box-border bg-gohan shadow-moon-lg py-2 px-1 my-2"
-              >
-                {filteredPeople3.length === 0 && query3 !== '' ? (
-                  <div className="relative cursor-default select-none py-2 px-4 text-trunks">
-                    Nothing found.
-                  </div>
-                ) : (
-                  filteredPeople3.map((person, index) => (
-                    <Combobox.Option value={person} key={index}>
-                      {({ selected, active }) => (
-                        <MenuItem isActive={active} isSelected={selected}>
-                          <MenuItem.Title>{person.label}</MenuItem.Title>
-                          <MenuItem.Radio isSelected={selected} />
-                        </MenuItem>
-                      )}
-                    </Combobox.Option>
-                  ))
-                )}
-              </Combobox.Options>
-            </Combobox.Transition>
-            <Combobox.Hint>Informative message holder</Combobox.Hint>
-          </>
-        )}
-      </Combobox>
     </div>
   );
 };