feat(uishell): update HeaderPopover styles

examples/react/AnimatedHeader/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/ExampleButton/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/FirstTimeOrientation/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "^2.76.0",
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/Processing/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/Resizer/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/StylePicker/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/TextHighlighter/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/react/UIShell/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "latest",
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^7.6.1"

examples/react/UIShell/src/components/HeaderGlobalBarExample.tsx

@@ -251,7 +251,7 @@ export const HeaderGlobalBarExample = ({
           />
         </ThemeSettings>
         <Profile.ReadOnly items={readOnlyItems} />
-        <ContainedList label="Profile links">
+        <ContainedList>
           <ContainedListItem
             renderIcon={User}
             onClick={() => (window.location.href = 'https://example.com')}>

examples/react/WhatsNew/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.95.0-rc.0",
+    "@carbon/react": "^1.95.0",
     "@carbon/ibm-products": "^2.76.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package.json

@@ -33,14 +33,14 @@
     "storybook:build": "storybook build"
   },
   "resolutions": {
-    "@carbon/react": "^1.95.0-rc.0",
-    "@carbon/styles": "^1.94.0-rc.0",
+    "@carbon/react": "^1.95.0",
+    "@carbon/styles": "^1.94.0",
     "@carbon/icons-react": "^11.65.0"
   },
   "devDependencies": {
     "@carbon/icons-react": "^11.65.0",
-    "@carbon/react": "^1.95.0-rc.0",
-    "@carbon/styles": "^1.94.0-rc.0",
+    "@carbon/react": "^1.95.0",
+    "@carbon/styles": "^1.94.0",
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
     "@rollup/plugin-commonjs": "^28.0.6",

packages/react/package.json

@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^11.65.0",
-    "@carbon/react": "^1.95.0-rc.0",
-    "@carbon/styles": "^1.94.0-rc.0",
+    "@carbon/react": "^1.95.0",
+    "@carbon/styles": "^1.94.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

packages/react/src/components/UIShell/__stories__/HeaderPopover.stories.js

@@ -65,10 +65,12 @@ export const Default = (args) => (
 );
 
 Default.args = {
-  dropShadow: false,
+  dropShadow: true,
   highContrast: false,
   open: true,
   align: 'bottom-end',
+  backgroundToken: 'background',
+  border: true,
 };
 
 Default.argTypes = {
@@ -90,6 +92,11 @@ Default.argTypes = {
       type: 'boolean',
     },
   },
+  border: {
+    control: {
+      type: 'boolean',
+    },
+  },
   align: {
     options: [
       'top',

packages/react/src/components/UIShell/__stories__/Profile.stories.js

@@ -186,7 +186,7 @@ export const withLinks = () => {
       <HeaderGlobalBar>
         <Profile.Root label="Profile" renderIcon={<UserAvatar size={20} />}>
           <Profile.UserInfo name="Ruth Leach" email="[email protected]" />
-          <ContainedList label="Profile links">
+          <ContainedList>
             <ContainedListItem
               renderIcon={User}
               onClick={() => (window.location.href = 'https://example.com')}>

packages/react/src/components/UIShell/__stories__/UIShell.scss

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/react/scss/breakpoint' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/__stories__/UIShell.stories.js

@@ -511,7 +511,7 @@ export const Demo = () => {
                     />
                   </ThemeSettings>
                   <Profile.ReadOnly items={readOnlyItems} />
-                  <ContainedList label="Profile links">
+                  <ContainedList>
                     <ContainedListItem
                       renderIcon={User}
                       onClick={() =>

packages/react/src/components/UIShell/components/HeaderPopover.tsx

@@ -134,9 +134,11 @@ export function HeaderPopover({
         align={align}
         autoAlign={autoAlign}
         as={as}
+        backgroundToken="background"
+        border
         isTabTip
         className={className}
-        dropShadow={false}
+        dropShadow={true}
         highContrast={false}
         open={open}
         onKeyDown={onKeyDown}

packages/react/src/components/UIShell/components/styles/_content.scss

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/react/scss/utilities/convert' as convert;
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/breakpoint' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/components/styles/_header-divider.scss

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-@use '@carbon/styles/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/utilities/convert' as convert;
+@use '@carbon/react/scss/theme' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/components/styles/_header-overflow-panel.scss

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/breakpoint' as *;
+@use '@carbon/react/scss/type' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/components/styles/_header.scss

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/react/scss/motion' as *;
 @use '@carbon/react/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/utilities/custom-property' as custom-property;
-@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/react/scss/utilities/custom-property' as custom-property;
+@use '@carbon/react/scss/breakpoint' as *;
 
 $prefix: 'cds' !default;
 
@@ -51,6 +51,12 @@ $prefix: 'cds' !default;
   background-color: $layer;
 }
 
+.#{$prefix}--popover--border.#{$prefix}--header-action
+  .#{$prefix}--tooltip
+  .#{$prefix}--tooltip-content {
+  outline: none;
+}
+
 .#{$prefix}--header-action .#{$prefix}--toggletip-content {
   @include custom-property.declaration('button-focus-color', $focus);
   @include custom-property.declaration('link-text-color', $link-primary);

packages/react/src/components/UIShell/components/styles/_profile.scss

@@ -5,27 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/utilities/custom-property' as custom-property;
+@use '@carbon/react/scss/utilities/custom-property' as custom-property;
 @use '@carbon/ibm-products/scss/components/UserAvatar';
 
 $prefix: 'cds' !default;
 
 // profile
 
-.#{$prefix}--profile.#{$prefix}--popover--open {
-  background-color: $background;
-}
-
 .#{$prefix}--header-overflow-panel .#{$prefix}--toggletip-content,
 .#{$prefix}--profile .#{$prefix}--toggletip-content {
   padding: 0;
-  background-color: $background;
-  border-block-end: 1px solid $border-subtle;
-  border-inline-start: 1px solid $border-subtle;
   gap: 0;
   inline-size: convert.to-rem(256px);
   max-block-size: 100vh;
@@ -82,8 +75,3 @@ $prefix: 'cds' !default;
 .#{$prefix}--header-action__content .#{$prefix}--contained-list--on-page {
   padding: 0;
 }
-
-// TODO: remove when https://github.com/carbon-design-system/carbon/pull/19813 is released
-.#{$prefix}--header-action__content .#{$prefix}--contained-list__header {
-  display: none;
-}

packages/react/src/components/UIShell/components/styles/_shark-fin-icon.scss

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/theme' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/components/styles/_side-nav.scss

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/utilities/convert' as convert;
-@use '@carbon/styles/scss/utilities/custom-property' as custom-property;
-@use '@carbon/styles/scss/utilities/button-reset' as button-reset;
-@use '@carbon/styles/scss/utilities/focus-outline' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/utilities/z-index' as *;
+@use '@carbon/react/scss/utilities/convert' as convert;
+@use '@carbon/react/scss/utilities/custom-property' as custom-property;
+@use '@carbon/react/scss/utilities/button-reset' as button-reset;
+@use '@carbon/react/scss/utilities/focus-outline' as *;
+@use '@carbon/react/scss/breakpoint' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/utilities/z-index' as *;
 @use '@carbon/styles/scss/components/ui-shell/mixins' as *;
 @use '@carbon/styles/scss/components/ui-shell/functions' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/spacing' as *;
 
 $prefix: 'cds' !default;
 

packages/react/src/components/UIShell/components/styles/_trial-countdown.scss

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/react/scss/spacing' as *;
 
 $prefix: 'cds' !default;
 
 :root {
-  // these should be set up as component tokens if/when moved to @carbon/styles
+  // these should be set up as component tokens if/when moved to @carbon/react
   --trial-countdown-start: #{$blue-60};
   --trial-countdown-end: #{$purple-50};
 }

packages/react/tasks/generate/templates/example/package-edit.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.93.0",
+    "@carbon/react": "^1.94.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/web-components/package.json

@@ -39,7 +39,7 @@
     "@carbon/layout": "^11.43.0",
     "@carbon/motion": "^11.37.0",
     "@carbon/pictograms": "^12.63.0",
-    "@carbon/styles": "^1.94.0-rc.0",
+    "@carbon/styles": "^1.94.0",
     "@carbon/themes": "^11.62.0",
     "@carbon/type": "^11.49.0",
     "@carbon/web-components": "^2.41.0",