refactor(VariantManagement): replace react-jss with css modules

packages/main/src/components/VariantManagement/ManageViewsDialog.module.css

@@ -0,0 +1,46 @@
+.manageViewsDialog {
+  width: 100%;
+
+  &::part(content),
+  &::part(header) {
+    padding: 0;
+  }
+
+  &::part(footer) {
+    padding: 0;
+    border-block-start: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .manageViewsDialog {
+    width: 70vw;
+  }
+}
+
+.headerText {
+  margin: 0;
+  text-align: center;
+  align-self: start;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
+  padding-inline-start: 1rem;
+  font-family: '72override', var(--_ui5_popup_header_font_family);
+  font-size: 1rem;
+  min-height: var(--_ui5_popup_default_header_height);
+  max-height: var(--_ui5_popup_default_header_height);
+  line-height: var(--_ui5_popup_default_header_height);
+}
+
+.search {
+  width: calc(100% - 2rem);
+  margin-block-end: 0.5rem;
+}
+
+.inputIcon {
+  cursor: pointer;
+  color: var(--sapContent_IconColor);
+}

packages/main/src/components/VariantManagement/ManageViewsDialog.tsx

@@ -1,29 +1,21 @@
-import { isDesktop, isPhone, isTablet } from '@ui5/webcomponents-base/dist/Device.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import {
-  enrichEventWithDetails,
-  ThemingParameters,
-  useI18nBundle,
-  useIsomorphicId
-} from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React, { Children, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { createUseStyles } from 'react-jss';
-import { BarDesign, FlexBoxAlignItems, FlexBoxDirection, ButtonDesign } from '../../enums/index.js';
+import { BarDesign, ButtonDesign, FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
 import {
   APPLY_AUTOMATICALLY,
   CANCEL,
   CREATED_BY,
   DEFAULT,
   MANAGE_VIEWS,
   SAVE,
+  SEARCH,
   SHARING,
-  VIEW,
-  SEARCH
+  VIEW
 } from '../../i18n/i18n-defaults.js';
 import { useCanRenderPortal } from '../../internal/ssr.js';
-import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
@@ -32,47 +24,11 @@ import { Icon, Input } from '../../webComponents/index.js';
 import { Table } from '../../webComponents/Table/index.js';
 import { TableColumn } from '../../webComponents/TableColumn/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { classNames, styleData } from './ManageViewsDialog.module.css.js';
 import { ManageViewsTableRows } from './ManageViewsTableRows.js';
 import type { VariantManagementPropTypes } from './types.js';
 import type { VariantItemPropTypes } from './VariantItem.js';
 
-const _popupDefaultHeaderHeight = `var(${cssVarVersionInfoPrefix}popup_default_header_height)`;
-const _popupHeaderFontFamily = `var(${cssVarVersionInfoPrefix}popup_header_font_family)`;
-
-const styles = {
-  manageViewsDialog: {
-    // isTablet is true for some desktops with touch screens
-    width: isPhone() || (isTablet() && !isDesktop()) ? '100%' : '70vw',
-    '&::part(content), &::part(header)': {
-      padding: 0
-    },
-    '&::part(footer)': {
-      padding: 0,
-      borderBlockStart: 'none'
-    }
-  },
-  headerText: {
-    margin: 0,
-    textAlign: 'center',
-    alignSelf: 'start',
-    minHeight: _popupDefaultHeaderHeight,
-    maxHeight: _popupDefaultHeaderHeight,
-    lineHeight: _popupDefaultHeaderHeight,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    maxWidth: '100%',
-    display: 'inline-block',
-    paddingInlineStart: '1rem',
-    fontFamily: `"72override",${_popupHeaderFontFamily}`,
-    fontSize: '1rem'
-  },
-  search: { width: 'calc(100% - 2rem)', marginBlockEnd: '0.5rem' },
-  inputIcon: { cursor: 'pointer', color: ThemingParameters.sapContent_IconColor }
-};
-
-const useStyles = createUseStyles(styles, { name: 'ManageViewsDialog' });
-
 interface ManageViewsDialogPropTypes {
   children: ReactNode | ReactNode[];
   onAfterClose: any;
@@ -123,7 +79,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   const [changedVariantNames, setChangedVariantNames] = useState(new Map());
   const [invalidVariants, setInvalidVariants] = useState<Record<string, InputDomRef & { isInvalid?: boolean }>>({});
 
-  const classes = useStyles();
+  useStylesheet(styleData, 'ManageViewsDialog');
 
   const columns = (
     <>
@@ -258,21 +214,21 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   return createPortal(
     <Dialog
       open
-      className={classes.manageViewsDialog}
+      className={classNames.manageViewsDialog}
       data-component-name="VariantManagementManageViewsDialog"
       onAfterClose={onAfterClose}
       onBeforeClose={handleClose}
       headerText={manageViewsText}
       initialFocus={`search-${uniqueId}`}
       header={
         <FlexBox direction={FlexBoxDirection.Column} style={{ width: '100%' }} alignItems={FlexBoxAlignItems.Center}>
-          <h2 className={classes.headerText}>{manageViewsText}</h2>
+          <h2 className={classNames.headerText}>{manageViewsText}</h2>
           <Input
             id={`search-${uniqueId}`}
-            className={classes.search}
+            className={classNames.search}
             placeholder={searchText}
             showClearIcon
-            icon={<Icon name={searchIcon} className={classes.inputIcon} />}
+            icon={<Icon name={searchIcon} className={classNames.inputIcon} />}
             onInput={handleSearchInput}
           />
         </FlexBox>

packages/main/src/components/VariantManagement/SaveViewDialog.module.css

@@ -0,0 +1,15 @@
+.dialog {
+  &::part(footer) {
+    border-block-start: none;
+    padding: 0;
+  }
+}
+
+.input {
+  width: 100%;
+  margin-block: 0.1875rem;
+}
+
+.checkBoxesContainer {
+  padding-inline: 0.5rem;
+}

packages/main/src/components/VariantManagement/SaveViewDialog.tsx

@@ -1,18 +1,17 @@
-import { enrichEventWithDetails, useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { createUseStyles } from 'react-jss';
 import { BarDesign, ButtonDesign, FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
 import {
   APPLY_AUTOMATICALLY,
   CANCEL,
-  VARIANT_MANAGEMENT_ERROR_DUPLICATE,
   PUBLIC,
   SAVE,
   SAVE_VIEW,
   SET_AS_DEFAULT,
   SPECIFY_VIEW_NAME,
+  VARIANT_MANAGEMENT_ERROR_DUPLICATE,
   VIEW
 } from '../../i18n/i18n-defaults.js';
 import { useCanRenderPortal } from '../../internal/ssr.js';
@@ -22,22 +21,9 @@ import type { Ui5CustomEvent } from '../../types/index.js';
 import type { ButtonDomRef, DialogDomRef, InputPropTypes } from '../../webComponents/index.js';
 import { Bar, Button, CheckBox, Dialog, Input, Label } from '../../webComponents/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { classNames, styleData } from './SaveViewDialog.module.css.js';
 import type { VariantManagementPropTypes } from './types.js';
 
-const useStyles = createUseStyles(
-  {
-    dialog: {
-      '&::part(footer)': {
-        borderBlockStart: 'none',
-        padding: 0
-      }
-    },
-    input: { width: '100%', marginBlock: '0.1875rem' },
-    checkBoxesContainer: { paddingInline: '0.5rem' }
-  },
-  { name: 'SaveViewDialogStyles' }
-);
-
 interface SaveViewDialogPropTypes {
   onAfterClose: (event: Ui5CustomEvent<DialogDomRef>) => void;
   handleSave: (event: Ui5CustomEvent<ButtonDomRef>, selectedVariant: SelectedVariant) => void;
@@ -67,7 +53,7 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
   const saveViewDialogRef = useRef<DialogDomRef | null>(null);
   const inputRef = useRef(undefined);
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
-  const classes = useStyles();
+  useStylesheet(styleData, 'SaveViewDialog');
   const uniqueId = useIsomorphicId();
 
   const cancelText = i18nBundle.getText(CANCEL);
@@ -164,7 +150,7 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
   return createPortal(
     <Dialog
       open
-      className={classes.dialog}
+      className={classNames.dialog}
       ref={saveViewDialogRef}
       headerText={headingText}
       onAfterClose={onAfterClose}
@@ -196,15 +182,15 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
           {...saveViewInputProps}
           valueState={saveViewInputProps?.valueState ?? (!variantNameInvalid ? 'None' : 'Error')}
           valueStateMessage={saveViewInputProps?.valueStateMessage ?? <div>{variantNameInvalid}</div>}
-          className={clsx(classes.input, saveViewInputProps?.className)}
+          className={clsx(classNames.input, saveViewInputProps?.className)}
           id={`view-${uniqueId}`}
           value={variantName}
           onInput={handleInputChange}
         />
         <FlexBox
           alignItems={FlexBoxAlignItems.Start}
           direction={FlexBoxDirection.Column}
-          className={classes.checkBoxesContainer}
+          className={classNames.checkBoxesContainer}
         >
           {showSetAsDefault && <CheckBox onChange={handleChangeDefault} text={defaultCbLabel} checked={isDefault} />}
           {showShare && <CheckBox onChange={handleChangePublic} text={publicCbLabel} checked={isPublic} />}

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

@@ -0,0 +1,79 @@
+.container {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  cursor: pointer;
+  color: var(--sapLinkColor);
+  text-shadow: none;
+
+  &:hover {
+    color: var(--sapLink_Hover_Color);
+  }
+
+  &:active {
+    color: var(--sapLink_Active_Color);
+  }
+}
+
+.disabled {
+  .title {
+    color: var(--sapGroup_TitleTextColor);
+    cursor: default;
+
+    &:hover {
+      color: var(--sapGroup_TitleTextColor);
+    }
+  }
+}
+
+.dirtyState {
+  color: var(--sapGroup_TitleTextColor);
+  padding-inline: 0.125rem;
+  font-family: var(--sapFontBoldFamily);
+  font-size: var(--sapFontSize);
+  flex-grow: 1;
+}
+
+.dirtyStateText {
+  font-size: var(--sapFontSmallSize);
+  font-weight: normal;
+}
+
+.navDownBtn {
+  margin-inline-start: 0.125rem;
+}
+
+.footer {
+  > :last-child {
+    margin-inline-end: 0;
+  }
+}
+
+.inputIcon {
+  cursor: pointer;
+  color: var(--sapContent_IconColor);
+}
+
+.searchInputContainer {
+  padding: 0.25rem 1rem;
+}
+
+.searchInput {
+  width: 100%;
+}
+
+.popover {
+  min-width: 25rem;
+
+  &::part(content) {
+    padding: 0;
+  }
+
+  &::part(footer) {
+    padding: 0;
+    border-block-start: none;
+  }
+}