chore: add autoAlign to TagOverflow

carbon-design-system · Aug 19, 2024 · 2969013 · 2969013
1 parent 330f4af
commit 2969013
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.mdx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.mdx
@@ -64,3 +64,11 @@ tags associated with the object.
 ## Component API
 
 <Controls />
+
+### Considerations
+
+Under the hood this component utilizes the Carbon `Popover` component, which has
+an experimental auto-align feature. This feature is disabled by default. If you
+are interested in trying this feature please refer to the `autoAlign` prop in
+the component API table above as well as the
+[Carbon Popover documentation](https://react.carbondesignsystem.com/?path=/docs/components-popover--overview#component-api).
diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
@@ -56,6 +56,7 @@ export interface TagOverflowProps {
   allTagsModalSearchPlaceholderText?: string;
   allTagsModalTarget?: ReactNode;
   allTagsModalTitle?: string;
+  autoAlign?: boolean;
   className?: string;
   containingElementRef?: RefObject<HTMLElement>;
   items: TagOverflowItem[];
@@ -94,6 +95,7 @@ export let TagOverflow = forwardRef(
       allTagsModalSearchPlaceholderText,
       allTagsModalTarget,
       allTagsModalTitle,
+      autoAlign,
       className,
       containingElementRef,
       items,
@@ -304,6 +306,7 @@ export let TagOverflow = forwardRef(
                 ref={overflowRef}
                 popoverOpen={popoverOpen}
                 setPopoverOpen={setPopoverOpen}
+                autoAlign={autoAlign}
               />
               <TagOverflowModal
                 allTags={items}
@@ -365,6 +368,10 @@ TagOverflow.propTypes = {
    * title for the show all modal. **Note: Required if more than 10 tags**
    */
   allTagsModalTitle: string_required_if_more_than_10_tags,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Provide an optional class to be applied to the containing node.
    */

diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflowPopover.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflowPopover.tsx
@@ -15,6 +15,7 @@ import { TagOverflowItem } from './TagOverflow';
 
 export interface Props {
   allTagsModalSearchThreshold?: number;
+  autoAlign?: boolean;
   className?: string;
   onShowAllClick: () => void;
   overflowAlign?: string;
@@ -32,6 +33,7 @@ export const TagOverflowPopover = forwardRef(
   (props: Props, ref: Ref<HTMLDivElement>) => {
     const {
       allTagsModalSearchThreshold,
+      autoAlign,
       className,
       onShowAllClick,
       overflowAlign,
@@ -89,6 +91,7 @@ export const TagOverflowPopover = forwardRef(
       >
         <Popover
           align={overflowAlign}
+          autoAlign={autoAlign}
           className={cx(className, `${blockClass}__el`)}
           dropShadow
           highContrast
@@ -165,6 +168,10 @@ TagOverflowPopover.propTypes = {
    * count of overflowTags over which a modal is offered
    */
   allTagsModalSearchThreshold: PropTypes.number,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * className
    */