refactor(Toolbar): migrate from react-jss to css modules (#5695)

Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>

packages/main/src/components/OverflowToolbarButton/index.tsx

@@ -23,6 +23,8 @@ export interface OverflowToolbarButtonPropTypes extends Omit<ButtonPropTypes, 'c
 
 /**
  * The `OverflowToolbarButton` represents a push button that shows its text only when in the overflow area of a `Toolbar`.
+ *
+ * __Note:__ This component is only compatible with the `Toolbar` component and __not__ with `ToolbarV2`.
  */
 const OverflowToolbarButton = forwardRef<ButtonDomRef, OverflowToolbarButtonPropTypes>((props, ref) => {
   const { children, ...rest } = props;

packages/main/src/components/OverflowToolbarToggleButton/index.tsx

@@ -23,6 +23,8 @@ export interface OverflowToolbarToggleButtonPropTypes extends Omit<ToggleButtonP
 
 /**
  * The `OverflowToolbarToggleButton` represents a toggle button that shows its text only when in the overflow area of a `Toolbar`.
+ *
+ * __Note:__ This component is only compatible with the `Toolbar` component and __not__ with `ToolbarV2`.
  */
 const OverflowToolbarToggleButton = forwardRef<ToggleButtonDomRef, OverflowToolbarToggleButtonPropTypes>(
   (props, ref) => {

packages/main/src/components/Toolbar/Toolbar.module.css

@@ -0,0 +1,137 @@
+.outerContainer {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: var(--_ui5wcr-ToolbarHeight);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-block-end: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+  overflow: hidden;
+}
+
+.hasOverflow {
+  .toolbar {
+    max-width: calc(100% - 44px);
+  }
+}
+
+.clear {
+  border-block-end: none;
+}
+
+.active {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--sapList_Hover_Background);
+  }
+
+  &:focus {
+    outline: var(--_ui5wcr_Toolbar_FocusOutline);
+    outline-offset: -0.1875rem;
+    box-shadow: var(--_ui5wcr_Toolbar_FocusShadow);
+  }
+
+  &:active {
+    background-color: var(--sapActiveColor);
+  }
+}
+
+.info {
+  height: 2rem;
+  background-color: var(--sapInfobar_NonInteractive_Background);
+  color: var(--sapList_TextColor);
+
+  &.active {
+    outline-color: var(--sapContent_ContrastFocusColor);
+    background-color: var(--sapInfobar_Background);
+    color: var(--sapInfobar_TextColor);
+
+    &:hover {
+      background-color: var(--sapInfobar_Hover_Background);
+    }
+
+    &:active {
+      background-color: var(--sapInfobar_Active_Background);
+    }
+  }
+}
+
+.solid {
+  background-color: var(--sapToolbar_Background);
+}
+
+.transparent {
+  background-color: transparent;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+
+  > :first-child:not(:global(.spacer)) {
+    margin-inline: 0.5rem 0.25rem;
+  }
+
+  > :last-child:not(:global(.spacer)) {
+    margin-inline: 0.25rem 0.5rem;
+  }
+
+  > *:not(:first-child):not(:last-child):not(:global(.spacer)) {
+    margin-inline: 0.25rem;
+  }
+}
+
+.overflowButtonContainer {
+  display: flex;
+  margin-inline: 0 0.5rem;
+}
+
+.popover {
+  &[ui5-popover]::part(content) {
+    padding: 0;
+  }
+}
+
+.popoverPhone {
+  width: calc(100% - 10px);
+  max-width: calc(100% - 10px);
+  inset-inline-start: 5px !important;
+}
+
+.popoverContent {
+  padding: var(--_ui5wcr-ToolbarPopoverContentPadding);
+  display: flex;
+  flex-direction: column;
+
+  > [ui5-toggle-button],
+  > [ui5-button] {
+    margin-block: 0.25rem;
+  }
+
+  > [ui5-button]::part(button),
+  > [ui5-toggle-button]::part(button) {
+    justify-content: start;
+  }
+
+  > [ui5-button][icon-only]::part(button),
+  > [ui5-toggle-button][icon-only]::part(button) {
+    padding: revert;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+}
+
+.childContainer {
+  display: flex;
+}

packages/main/src/components/Toolbar/index.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { debounce, useI18nBundle, useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base';
+import {
+  debounce,
+  useI18nBundle,
+  useIsomorphicLayoutEffect,
+  useStylesheet,
+  useSyncRef
+} from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ElementType, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from 'react';
 import React, {
@@ -14,17 +20,14 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { createUseStyles } from 'react-jss';
 import type { PopupAccessibleRole } from '../../enums/index.js';
 import { ToolbarDesign, ToolbarStyle } from '../../enums/index.js';
 import { SHOW_MORE } from '../../i18n/i18n-defaults.js';
 import { flattenFragments } from '../../internal/utils.js';
 import type { CommonProps } from '../../types/index.js';
 import type { ButtonPropTypes, PopoverDomRef, ToggleButtonPropTypes } from '../../webComponents/index.js';
 import { OverflowPopover } from './OverflowPopover.js';
-import { styles } from './Toolbar.jss.js';
-
-const useStyles = createUseStyles(styles, { name: 'Toolbar' });
+import { classNames, styleData } from './Toolbar.module.css.js';
 
 export interface ToolbarPropTypes extends Omit<CommonProps, 'onClick' | 'children'> {
   /**
@@ -166,7 +169,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
     ...rest
   } = props;
 
-  const classes = useStyles();
+  useStylesheet(styleData, Toolbar.displayName);
   const [componentRef, outerContainer] = useSyncRef<HTMLDivElement>(ref);
   const controlMetaData = useRef([]);
   const [lastVisibleIndex, setLastVisibleIndex] = useState<number>(null);
@@ -180,12 +183,12 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   const showMoreText = i18nBundle.getText(SHOW_MORE);
 
   const toolbarClasses = clsx(
-    classes.outerContainer,
-    toolbarStyle === ToolbarStyle.Clear && classes.clear,
-    active && classes.active,
-    design === ToolbarDesign.Solid && classes.solid,
-    design === ToolbarDesign.Transparent && classes.transparent,
-    design === ToolbarDesign.Info && classes.info,
+    classNames.outerContainer,
+    toolbarStyle === ToolbarStyle.Clear && classNames.clear,
+    active && classNames.active,
+    design === ToolbarDesign.Solid && classNames.solid,
+    design === ToolbarDesign.Transparent && classNames.transparent,
+    design === ToolbarDesign.Info && classNames.info,
     className
   );
   const flatChildren = useMemo(() => {
@@ -207,12 +210,17 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
         return item;
       }
       return (
-        <div ref={itemRef} key={index} className={classes.childContainer} data-component-name="ToolbarChildContainer">
+        <div
+          ref={itemRef}
+          key={index}
+          className={classNames.childContainer}
+          data-component-name="ToolbarChildContainer"
+        >
           {item}
         </div>
       );
     });
-  }, [flatChildren, controlMetaData, classes.childContainer]);
+  }, [flatChildren, controlMetaData, classNames.childContainer]);
 
   const overflowNeeded =
     (lastVisibleIndex || lastVisibleIndex === 0) &&
@@ -368,7 +376,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   return (
     <CustomTag
       style={styleWithMinWidth}
-      className={clsx(toolbarClasses, overflowNeeded && classes.hasOverflow)}
+      className={clsx(toolbarClasses, overflowNeeded && classNames.hasOverflow)}
       ref={componentRef}
       slot={slot}
       onClick={handleToolbarClick}
@@ -378,7 +386,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
       data-sap-ui-fastnavgroup="true"
       {...rest}
     >
-      <div className={classes.toolbar} data-component-name="ToolbarContent" ref={contentRef}>
+      <div className={classNames.toolbar} data-component-name="ToolbarContent" ref={contentRef}>
         {overflowNeeded &&
           Children.map(childrenWithRef, (item, index) => {
             if (index >= lastVisibleIndex + 1 && index > numberOfAlwaysVisibleItems - 1) {
@@ -393,13 +401,13 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
       {overflowNeeded && (
         <div
           ref={overflowBtnRef}
-          className={classes.overflowButtonContainer}
+          className={classNames.overflowButtonContainer}
           data-component-name="ToolbarOverflowButtonContainer"
         >
           <OverflowPopover
             overflowPopoverRef={overflowPopoverRef}
             lastVisibleIndex={lastVisibleIndex}
-            classes={classes}
+            classes={classNames}
             portalContainer={portalContainer}
             overflowContentRef={overflowContentRef}
             numberOfAlwaysVisibleItems={numberOfAlwaysVisibleItems}

packages/main/src/components/ToolbarSeparator/ToolbarSeparator.module.css

@@ -0,0 +1,5 @@
+.separator {
+  width: 0.0625rem;
+  height: var(--_ui5wcr-ToolbarSeparatorHeight);
+  background: var(--sapToolbar_SeparatorColor);
+}