fix: autoalign inside modal (#16947)

* fix: autoalign inside modal * feat: minor fixes * fix: test case * fix: test case * fix: test fail * fix: avt test case --------- Co-authored-by: Riddhi Bansal <[email protected]>
carbon-design-system · Sep 11, 2024 · d430e45 · d430e45
1 parent 28032c3
commit d430e45
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 6 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -588,6 +588,7 @@ const ComboBox = forwardRef(
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--combo-box--warning`]: showWarning,
       [`${prefix}--combo-box--readonly`]: readOnly,
+      [`${prefix}--autoalign`]: autoAlign,
     });
 
     const titleClasses = cx(`${prefix}--label`, {

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -390,7 +390,7 @@ const Dropdown = React.forwardRef(
       [`${prefix}--dropdown--readonly`]: readOnly,
       [`${prefix}--dropdown--${size}`]: size,
       [`${prefix}--list-box--up`]: direction === 'top',
-      [`${prefix}--dropdown--autoalign`]: autoAlign,
+      [`${prefix}--autoalign`]: autoAlign,
     });
 
     const titleClasses = cx(`${prefix}--label`, {

diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
@@ -424,6 +424,7 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
       [`${prefix}--menu--shown`]:
         (open && !legacyAutoalign) || (position[0] >= 0 && position[1] >= 0),
       [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+      [`${prefix}--autoalign`]: !legacyAutoalign,
     }
   );
 

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -12,9 +12,12 @@ import Modal from './Modal';
 import Button from '../Button';
 import Select from '../Select';
 import MultiSelect from '../MultiSelect';
+import { Checkbox as CheckboxIcon } from '@carbon/icons-react';
+import { Popover, PopoverContent } from '../Popover';
 import Dropdown from '../Dropdown';
 import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
+import ComboBox from '../ComboBox';
 import mdx from './Modal.mdx';
 import {
   StructuredListWrapper,
@@ -295,6 +298,7 @@ export const WithScrollingContent = () => {
 
 export const Playground = ({ numberOfButtons, ...args }) => {
   const [open, setOpen] = useState(true);
+  const [popoverOpen, setPopoverOpen] = useState(false);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Launch modal</Button>
@@ -315,25 +319,58 @@ export const Playground = ({ numberOfButtons, ...args }) => {
           organization to a URL that you own. A custom domain can be a shared
           domain, a shared subdomain, or a shared domain and host.
         </p>
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
         <TextInput
           data-modal-primary-focus
           id="text-input-1"
           labelText="Domain name"
           placeholder="e.g. github.com"
           style={{ marginBottom: '1rem' }}
         />
-        <Select id="select-1" defaultValue="us-south" labelText="Region">
+        <Select
+          id="select-1"
+          defaultValue="us-south"
+          labelText="Region"
+          style={{ marginBottom: '1rem' }}>
           <SelectItem value="us-south" text="US South" />
           <SelectItem value="us-east" text="US East" />
         </Select>
 
+        <ComboBox
+          allowCustomValue
+          autoAlign={true}
+          id="carbon-combobox"
+          items={[
+            'Apple',
+            'Orange',
+            'Banana',
+            'Pineapple',
+            'Raspberry',
+            'Lime',
+          ]}
+          titleText="ComboBox Example of Floating ui"
+        />
+
         <Dropdown
           autoAlign={true}
           id="default"
           style={{ margin: '1rem 0' }}
           titleText="Dropdown Example of Floating ui"
           helperText="This is some helper text"
-          // initialSelectedItem={items[1]}
           label="Option 1"
           items={[
             {
@@ -365,6 +402,24 @@ export const Playground = ({ numberOfButtons, ...args }) => {
           itemToString={(item) => (item ? item.text : '')}
           direction="top"
         />
+        <MultiSelect
+          id="test"
+          label="Multiselect"
+          titleText="Multiselect"
+          helperText="This is some helper text"
+          autoAlign
+          items={[
+            {
+              id: 'downshift-1-item-0',
+              text: 'Option 1',
+            },
+            {
+              id: 'downshift-1-item-1',
+              text: 'Option 2',
+            },
+          ]}
+          itemToString={(item) => (item ? item.text : '')}
+        />
 
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
@@ -373,6 +428,23 @@ export const Playground = ({ numberOfButtons, ...args }) => {
           condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
           Quisque consectetur non risus eu rutrum.{' '}
         </p>
+
+        <Popover align={'bottom-right'} autoAlign open={popoverOpen}>
+          <div className="playground-trigger">
+            <CheckboxIcon
+              onClick={() => {
+                setPopoverOpen(!popoverOpen);
+              }}
+            />
+          </div>
+          <PopoverContent className="p-3">
+            <h2 className="popover-title">Popover Example</h2>
+            <p className="popover-details">
+              This server has 150 GB of block storage remaining.
+            </p>
+          </PopoverContent>
+        </Popover>
+
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
           accumsan augue. Phasellus consequat augue vitae tellus tincidunt

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -462,6 +462,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
       [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
       [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
       [`${prefix}--list-box__wrapper--slug`]: slug,
+      [`${prefix}--autoalign`]: autoAlign,
     }
   );
   const helperId = !helperText

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -551,6 +551,7 @@ const MultiSelect = React.forwardRef(
         selectedItems && selectedItems.length > 0,
       [`${prefix}--list-box--up`]: direction === 'top',
       [`${prefix}--multi-select--readonly`]: readOnly,
+      [`${prefix}--autoalign`]: autoAlign,
       [`${prefix}--multi-select--selectall`]: selectAll,
     });
 

diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx
@@ -160,7 +160,8 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
 
     const containerClasses = classNames(
       className,
-      `${prefix}--overflow-menu__container`
+      `${prefix}--overflow-menu__container`,
+      { [`${prefix}--autoalign`]: autoAlign }
     );
 
     const menuClasses = classNames(

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -347,7 +347,7 @@ export const Popover: PopoverComponent = React.forwardRef(
         [`${prefix}--popover--drop-shadow`]: dropShadow,
         [`${prefix}--popover--high-contrast`]: highContrast,
         [`${prefix}--popover--open`]: open,
-        [`${prefix}--popover--auto-align`]: autoAlign,
+        [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
         [`${prefix}--popover--${currentAlignment}`]: true,
         [`${prefix}--popover--tab-tip`]: isTabTip,
       },

diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
@@ -110,6 +110,7 @@ export function Toggletip<E extends ElementType = 'span'>({
   const id = useId();
   const className = cx(`${prefix}--toggletip`, customClassName, {
     [`${prefix}--toggletip--open`]: open,
+    [`${prefix}--autoalign`]: autoAlign,
   });
   const actions = {
     toggle: () => {

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -272,7 +272,7 @@
   }
 
   //removing mask image in case we have dropdown in modal
-  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--dropdown--autoalign) {
+  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--autoalign) {
     mask-image: none;
   }