fix: add floating ui to tagset (#6005)

* fix: add floating ui to tagset * fix: case change
carbon-design-system · Sep 9, 2024 · fac868b · fac868b
1 parent 068a7df
commit fac868b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/packages/ibm-products/src/components/TagSet/TagSet.tsx b/packages/ibm-products/src/components/TagSet/TagSet.tsx
@@ -110,6 +110,10 @@ export interface TagSetProps extends PropsWithChildren {
    * overflowAlign from the standard tooltip. Default center.
    */
   overflowAlign?: OverflowAlign;
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign?: boolean;
   /**
    * overflowClassName for the tooltip popup
    */
@@ -143,6 +147,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       className,
       maxVisible,
       multiline,
+      overflowAutoAlign,
       overflowAlign = 'bottom',
       overflowClassName,
       overflowType = 'default',
@@ -248,6 +253,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       newDisplayedTags.push(
         <TagSetOverflow
           allTagsModalSearchThreshold={allTagsModalSearchThreshold}
+          overflowAutoAlign={overflowAutoAlign}
           className={overflowClassName}
           onShowAllClick={handleShowAllClick}
           overflowTags={newOverflowTags}
@@ -273,6 +279,7 @@ export let TagSet = React.forwardRef<HTMLDivElement, TagSetProps>(
       onOverflowTagChange,
       popoverOpen,
       handleTagOnClose,
+      overflowAutoAlign,
     ]);
 
     const checkFullyVisibleTags = useCallback(() => {
@@ -498,6 +505,10 @@ TagSet.propTypes = {
     'right-bottom',
     'right-top',
   ]),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: PropTypes.bool,
   /**
    * overflowClassName for the tooltip popup
    */

diff --git a/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx b/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx
@@ -67,6 +67,10 @@ interface TagSetOverflowProps {
    * Type of rendering displayed inside of the tag overflow component
    */
   overflowType?: OverflowType;
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign?: boolean;
   /**
    * Open state of the popover
    */
@@ -90,6 +94,7 @@ export const TagSetOverflow = React.forwardRef(
       className,
       onShowAllClick,
       overflowAlign = 'bottom',
+      overflowAutoAlign,
       overflowTags,
       overflowType,
       showAllTagsLabel,
@@ -142,6 +147,7 @@ export const TagSetOverflow = React.forwardRef(
           highContrast
           onKeyDown={handleEscKeyPress}
           open={popoverOpen}
+          autoAlign={overflowAutoAlign}
         >
           <Tag
             onClick={() => setPopoverOpen?.(!popoverOpen)}
@@ -234,6 +240,10 @@ TagSetOverflow.propTypes = {
     'right-bottom',
     'right-top',
   ]),
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  overflowAutoAlign: PropTypes.bool,
   /**
    * tags shown in overflow
    */