refactor(ActionSheet): migrate to css module (#5532)

Author: MarcusNotheis

packages/main/src/components/ActionSheet/ActionSheet.jss.ts

@@ -0,0 +1,38 @@
+.actionSheet::part(content) {
+  padding: 0.1875rem 0.375rem;
+}
+
+.actionSheet [ui5-button] {
+  margin: var(--_ui5wcr-ButtonTopBottomPadding);
+  display: block;
+}
+
+.actionSheet [ui5-button]:not([data-cancel-btn])::part(button) {
+  justify-content: start;
+}
+
+.actionSheet::part(header) {
+  background: transparent;
+  box-shadow: var(--_ui5wcr_ActionSheet_HeaderBoxShadow);
+}
+
+/* actionSheetMobile */
+.actionSheetMobile::part(content) {
+  padding: 0 !important;
+}
+
+/* contentMobile */
+.contentMobile {
+  background-color: var(--sapGroup_ContentBackground);
+  padding: 0.25rem 0.5rem;
+  box-sizing: border-box;
+  overflow: auto;
+  max-height: 82vh;
+  border-top-left-radius: var(--_ui5wcr_ActionSheet_TopBorderRadius);
+  border-top-right-radius: var(--_ui5wcr_ActionSheet_TopBorderRadius);
+  box-shadow: var(--_ui5wcr_ActionSheet_BoxShadow);
+}
+
+.contentMobile > * {
+  margin: 0.25rem 0;
+}

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

@@ -1,12 +1,11 @@
 'use client';
 
 import { isPhone } from '@ui5/webcomponents-base/dist/Device.js';
-import { useI18nBundle, useSyncRef } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
 import React, { forwardRef, useReducer, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { createUseStyles } from 'react-jss';
 import { ButtonDesign } from '../../enums/index.js';
 import { AVAILABLE_ACTIONS, CANCEL, X_OF_Y } from '../../i18n/i18n-defaults.js';
 import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
@@ -20,7 +19,7 @@ import type {
   ResponsivePopoverPropTypes
 } from '../../webComponents/index.js';
 import { Button, ResponsivePopover } from '../../webComponents/index.js';
-import styles from './ActionSheet.jss.js';
+import { classNames, styleData } from './ActionSheet.module.css.js';
 
 export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, 'header' | 'headerText' | 'children'> {
   /**
@@ -64,8 +63,6 @@ export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, '
   portalContainer?: Element;
 }
 
-const useStyles = createUseStyles(styles, { name: 'ActionSheet' });
-
 if (isPhone()) {
   addCustomCSSWithScoping(
     'ui5-responsive-popover',
@@ -154,8 +151,9 @@ const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((p
     ...rest
   } = props;
 
+  useStylesheet(styleData, ActionSheet.displayName);
+
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
-  const classes = useStyles();
   const [componentRef, popoverRef] = useSyncRef(ref);
   const actionBtnsRef = useRef(null);
   const [focusedItem, setFocusedItem] = useReducer((_, action) => {
@@ -268,11 +266,11 @@ const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((p
       {...rest}
       onAfterOpen={handleAfterOpen}
       ref={componentRef}
-      className={clsx(classes.actionSheet, isPhone() && classes.actionSheetMobile, className)}
+      className={clsx(classNames.actionSheet, isPhone() && classNames.actionSheetMobile, className)}
       data-actionsheet
     >
       <div
-        className={isPhone() ? classes.contentMobile : undefined}
+        className={isPhone() ? classNames.contentMobile : undefined}
         data-component-name="ActionSheetMobileContent"
         role={a11yConfig?.actionSheetMobileContent?.role ?? 'application'}
         onKeyDown={handleKeyDown}