@carbon-labs/react-ui-shell 0.28.0 → 0.29.0

package/README.md

@@ -26,7 +26,7 @@ yarn add @carbon-labs/react-ui-shell @carbon/react
 ## ⚡ Usage
 
 To use this package you will need to import components from both `@carbon/react`
-and `@carbon-labs/react-ui-shell`o compose the UI Shell. The following
+and `@carbon-labs/react-ui-shell` to compose the UI Shell. The following
 components are provided by `@carbon-labs/react-ui-shell`:
 
 - `SideNav`
@@ -35,6 +35,8 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `SideNavMenu`
 - `SideNavMenuItem`
 - `HeaderPanel`
+- `HeaderDivider`
+- `SharkFinIcon`
 
 ```jsx
 import { SideNav } from '@carbon-labs/react-ui-shell/es/index';

package/es/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/es/components/HeaderDivider.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+
+const HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+export { HeaderDivider };

package/es/index.d.ts

@@ -15,3 +15,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/es/index.js

@@ -14,3 +14,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer.js';
 export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
+export { HeaderDivider } from './components/HeaderDivider.js';

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 

package/lib/components/HeaderDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface HeaderDividerProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+}
+export declare const HeaderDivider: React.FC<HeaderDividerProps>;

package/lib/components/HeaderDivider.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 strict';
+
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+
+const HeaderDivider = _ref => {
+  let {
+    className
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = index.default(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames
+  });
+};
+HeaderDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string
+};
+
+exports.HeaderDivider = HeaderDivider;

package/lib/index.d.ts

@@ -15,3 +15,4 @@ export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
+export { HeaderDivider } from './components/HeaderDivider';

package/lib/index.js

@@ -16,6 +16,7 @@ var SideNavMenuItem = require('./components/SideNavMenuItem.js');
 var HeaderContainer = require('./components/HeaderContainer.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
+var HeaderDivider = require('./components/HeaderDivider.js');
 
 
 
@@ -29,3 +30,4 @@ exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
 exports.HeaderContainer = HeaderContainer.HeaderContainer;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
+exports.HeaderDivider = HeaderDivider.HeaderDivider;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "4a8aca9677b353f76cfcd7021a2665d95a22782c"
+  "gitHead": "0b543e502dcedecdc6d8b624536dc3d7f153607b"
 }

package/scss/styles/_header-divider.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 *;
+
+$prefix: 'cds' !default;
+
+.#{$prefix}--header__divider {
+  flex-shrink: 0;
+  background: $border-subtle;
+  block-size: convert.to-rem(24px);
+  inline-size: 1px;
+}

package/scss/styles/_header.scss

@@ -4,9 +4,27 @@
  * 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/theme' as *;
 
 $prefix: 'cds' !default;
 
+.#{$prefix}--header__global {
+  align-items: center;
+}
+
+.#{$prefix}--header__action {
+  flex-shrink: 0;
+}
+
 .#{$prefix}--header__action:focus {
   border-width: 2px;
 }
+
+//----------------------------------------------------------------------------
+// Menu button inside Header
+//----------------------------------------------------------------------------
+
+.#{$prefix}--header
+  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
+  color: $text-secondary;
+}

package/scss/ui-shell.scss

@@ -9,3 +9,4 @@
 @use 'styles/side-nav';
 @use 'styles/content';
 @use 'styles/shark-fin-icon.scss';
+@use 'styles/header-divider.scss';