fix(breadcrumb): account for menu direction in breadcrumb overflow ca…

…ret (#9189) * fix(breadcrumb): account for menu direction in breadcrumb overflow caret * fix(ComponentToggle): apply `displayName` to wrapped components properly * fix(BreadcrumbItem): account for FeatureToggle displayNames * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 22, 2021 · 388008d · 388008d
1 parent 1c1c751
commit 388008d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -128,7 +128,7 @@
   }
 
   $caret-size: rem(7px);
-  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
+  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
     top: -$caret-size;
     left: $caret-size * 2;
     width: 0;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4054,22 +4054,27 @@ Map {
   },
   "ToastNotification" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(ToastNotification)",
     "render": [Function],
   },
   "InlineNotification" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(InlineNotification)",
     "render": [Function],
   },
   "NotificationActionButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(NotificationActionButton)",
     "render": [Function],
   },
   "NotificationButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(NotificationButton)",
     "render": [Function],
   },
   "NotificationTextDetails" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(NotificationTextDetails)",
     "render": [Function],
   },
   "NumberInput" => Object {
@@ -4102,6 +4107,7 @@ Map {
   },
   "OverflowMenu" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(OverflowMenu)",
     "render": [Function],
   },
   "OverflowMenuItem" => Object {
@@ -4995,26 +5001,32 @@ Map {
   },
   "StructuredListWrapper" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListWrapper)",
     "render": [Function],
   },
   "StructuredListHead" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListHead)",
     "render": [Function],
   },
   "StructuredListBody" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListBody)",
     "render": [Function],
   },
   "StructuredListRow" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListRow)",
     "render": [Function],
   },
   "StructuredListInput" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListInput)",
     "render": [Function],
   },
   "StructuredListCell" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(StructuredListCell)",
     "render": [Function],
   },
   "StructuredListSkeleton" => Object {
@@ -6085,6 +6097,7 @@ Map {
   },
   "Toggle" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "FeatureToggle(Toggle)",
     "render": [Function],
   },
   "ToggleSmall" => Object {

diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
@@ -37,7 +37,7 @@ const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
   if (
     children.type &&
     children.type.displayName !== undefined &&
-    children.type.displayName === 'OverflowMenu'
+    children.type.displayName.includes('OverflowMenu')
   ) {
     const horizontalOverflowIcon = (
       <OverflowMenuHorizontal16 className={`${prefix}--overflow-menu__icon`} />

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2436,7 +2436,7 @@ exports[`DataTable should render 1`] = `
                   }
                 }
               >
-                <ForwardRef(FeatureToggle(OverflowMenu))
+                <FeatureToggle(OverflowMenu)
                   ariaLabel="Settings"
                   className="bx--toolbar-action bx--overflow-menu"
                   flipped={true}
@@ -2549,7 +2549,7 @@ exports[`DataTable should render 1`] = `
                       </ClickListener>
                     </OverflowMenu>
                   </ForwardRef(OverflowMenu)>
-                </ForwardRef(FeatureToggle(OverflowMenu))>
+                </FeatureToggle(OverflowMenu)>
               </TableToolbarMenu>
               <Button
                 dangerDescription="danger"
@@ -3497,7 +3497,7 @@ exports[`DataTable sticky header should render 1`] = `
                   }
                 }
               >
-                <ForwardRef(FeatureToggle(OverflowMenu))
+                <FeatureToggle(OverflowMenu)
                   ariaLabel="Settings"
                   className="bx--toolbar-action bx--overflow-menu"
                   flipped={true}
@@ -3610,7 +3610,7 @@ exports[`DataTable sticky header should render 1`] = `
                       </ClickListener>
                     </OverflowMenu>
                   </ForwardRef(OverflowMenu)>
-                </ForwardRef(FeatureToggle(OverflowMenu))>
+                </FeatureToggle(OverflowMenu)>
               </TableToolbarMenu>
               <Button
                 dangerDescription="danger"

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -11,7 +11,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
     }
   }
 >
-  <ForwardRef(FeatureToggle(OverflowMenu))
+  <FeatureToggle(OverflowMenu)
     ariaLabel="Add"
     className="custom-class bx--toolbar-action bx--overflow-menu"
     flipped={true}
@@ -121,6 +121,6 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         </ClickListener>
       </OverflowMenu>
     </ForwardRef(OverflowMenu)>
-  </ForwardRef(FeatureToggle(OverflowMenu))>
+  </FeatureToggle(OverflowMenu)>
 </TableToolbarMenu>
 `;
diff --git a/packages/react/src/internal/ComponentToggle.js b/packages/react/src/internal/ComponentToggle.js
@@ -16,15 +16,16 @@ export function createComponentToggle(spec) {
     if (enabled) {
       if (next) {
         return React.createElement(next, { ...props, ref: ref });
-      } else {
-        return null;
       }
+
+      return null;
     }
 
     return React.createElement(classic, { ...props, ref: ref });
   }
 
-  ComponentToggle.displayName = `FeatureToggle(${name})`;
+  const wrappedComponent = React.forwardRef(ComponentToggle);
+  wrappedComponent.displayName = `FeatureToggle(${name})`;
 
-  return React.forwardRef(ComponentToggle);
+  return wrappedComponent;
 }