From f62040686792948a2823cfbbf9eaeaa347d81294 Mon Sep 17 00:00:00 2001
From: Alan Greene <github.com@alangreene.net>
Date: Sat, 21 Sep 2024 17:36:19 +0100
Subject: [PATCH] Fix global namespaces dropdown loading styles

With the move to Carbon 11 the ComboBox and Dropdown skeleton states
have changes, and the component props are slightly different.

Remove the obsolete `inline` prop, and update the styles to account
for the updated components to prevent the loading styles overflowing
the header and causing a layout shift on other pages too.
---
 .../src/components/TooltipDropdown/TooltipDropdown.jsx    | 8 ++++----
 src/scss/App.scss                                         | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx b/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx
index fbdb295e5..be1ece526 100644
--- a/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx
+++ b/packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx
@@ -35,12 +35,12 @@ const TooltipDropdown = ({
   disabled,
   emptyText,
   id,
-  inline,
   items = defaults.items,
   label,
   loading = false,
   onChange,
   selectedItem,
+  size = 'md',
   titleText,
   ...rest
 }) => {
@@ -55,9 +55,9 @@ const TooltipDropdown = ({
           <span className={`${carbonPrefix}--label`}>{titleText}</span>
         )}
         <DropdownSkeleton
-          className={`${carbonPrefix}--combo-box ${className || ''}`}
+          className={`${carbonPrefix}--combo-box ${carbonPrefix}--list-box ${carbonPrefix}--list-box--${size} ${className || ''}`}
+          hideLabel
           id={id}
-          inline={inline}
         />
       </div>
     );
@@ -87,13 +87,13 @@ const TooltipDropdown = ({
         }
       })}
       id={id}
-      inline={inline}
       items={options}
       itemToString={itemToString}
       key={key}
       onChange={onChange}
       placeholder={options.length === 0 ? emptyString : label}
       selectedItem={selectedItem}
+      size={size}
       titleText={titleText}
       translateWithId={getTranslateWithId(intl)}
       {...rest}
diff --git a/src/scss/App.scss b/src/scss/App.scss
index a88073c6a..1b3da1932 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -95,6 +95,10 @@ body {
   margin-inline-start: 16rem;
 }
 
+.#{$prefix}--header .#{$prefix}--list-box__wrapper:has(.#{$prefix}--list-box.#{$prefix}--skeleton) {
+  inline-size: 245px;
+}
+
 .#{$prefix}--modal-header,
 .#{$prefix}--modal-content {
   inline-size: 100%;