refactor: migrate Text and ExandableText to css modules

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

@@ -0,0 +1,20 @@
+.expandableText {
+    composes: text from '../Text/Text.module.css';
+}
+
+.text {
+  display: inline;
+}
+
+.ellipsis {
+  word-spacing: 0.125rem;
+}
+
+.popover {
+  max-width: 30rem;
+}
+
+.popover::part(content) {
+  padding: 1rem;
+}
+

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

@@ -1,10 +1,9 @@
 'use client';
 
-import { useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { createUseStyles } from 'react-jss';
 import { CLOSE_POPOVER, SHOW_FULL_TEXT, SHOW_LESS, SHOW_MORE } from '../../i18n/i18n-defaults.js';
 import { useCanRenderPortal } from '../../internal/ssr.js';
 import { getUi5TagWithSuffix } from '../../internal/utils.js';
@@ -14,7 +13,7 @@ import { Link } from '../../webComponents/index.js';
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import type { TextPropTypes } from '../Text/index.js';
 import { Text } from '../Text/index.js';
-import { TextStyles } from '../Text/Text.jss.js';
+import { classNames, styleData } from './ExpandableText.module.css.js';
 
 export interface ExpandableTextPropTypes
   extends Omit<TextPropTypes, 'maxLines' | 'wrapping' | 'children'>,
@@ -43,15 +42,6 @@ export interface ExpandableTextPropTypes
   portalContainer?: Element;
 }
 
-const useStyles = createUseStyles(
-  {
-    expandableText: { ...TextStyles.text },
-    text: { display: 'inline' },
-    ellipsis: { wordSpacing: '0.125rem' },
-    popover: { maxWidth: '30rem', '&::part(content)': { padding: '1rem' } }
-  },
-  { name: 'ExpandableText' }
-);
 /**
  * The `ExpandableText` component can be used to display long texts inside a table, list or form.
  *
@@ -71,10 +61,12 @@ const ExpandableText = forwardRef<HTMLSpanElement, ExpandableTextPropTypes>((pro
     className,
     ...rest
   } = props;
+
+  useStylesheet(styleData, ExpandableText.displayName);
+
   const [collapsed, setCollapsed] = useState(true);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const linkRef = useRef<LinkDomRef>(null);
-  const classes = useStyles();
   const uniqueId = useIsomorphicId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const trimmedChildren = renderWhitespace ? children : children?.replace(/\s+/g, ' ').trim();
@@ -112,18 +104,18 @@ const ExpandableText = forwardRef<HTMLSpanElement, ExpandableTextPropTypes>((pro
     return null;
   }
   return (
-    <span className={clsx(classes.expandableText, className)} {...rest} ref={ref}>
+    <span className={clsx(classNames.expandableText, className)} {...rest} ref={ref}>
       <Text
         emptyIndicator={emptyIndicator}
         renderWhitespace={renderWhitespace}
         hyphenated={hyphenated}
-        className={classes.text}
+        className={classNames.text}
       >
         {strippedChildren}
       </Text>
       {isOverflow && (
         <>
-          <span className={classes.ellipsis}>{showOverflowInPopover || collapsed ? '… ' : ' '}</span>
+          <span className={classNames.ellipsis}>{showOverflowInPopover || collapsed ? '… ' : ' '}</span>
           <Link
             accessibleName={
               showOverflowInPopover
@@ -144,8 +136,13 @@ const ExpandableText = forwardRef<HTMLSpanElement, ExpandableTextPropTypes>((pro
       {showOverflowInPopover &&
         popoverOpen &&
         createPortal(
-          <ResponsivePopover opener={`${uniqueId}-link`} open onAfterClose={closePopover} className={classes.popover}>
-            <Text renderWhitespace={renderWhitespace} hyphenated={hyphenated} className={classes.text}>
+          <ResponsivePopover
+            opener={`${uniqueId}-link`}
+            open
+            onAfterClose={closePopover}
+            className={classNames.popover}
+          >
+            <Text renderWhitespace={renderWhitespace} hyphenated={hyphenated} className={classNames.text}>
               {children}
             </Text>
           </ResponsivePopover>,

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

@@ -0,0 +1,61 @@
+.text {
+  font-family: var(--sapFontFamily);
+  font-size: var(--sapFontSize);
+  font-weight: normal;
+  color: var(--sapTextColor);
+  display: inline-block;
+  box-sizing: border-box;
+  white-space: pre-line;
+  word-wrap: break-word;
+  max-width: 100%;
+}
+
+.text::selection {
+  background: var(--sapSelectedColor);
+  color: var(--sapContent_ContrastTextColor);
+}
+
+/* renderWhitespace */
+.renderWhitespace {
+  white-space: pre-wrap;
+}
+
+/* noWrap */
+.noWrap {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+}
+
+.noWrap.renderWhitespace {
+  white-space: pre;
+}
+
+/* maxLines */
+.maxLines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: var(--_ui5wcr_maxLines);
+}
+
+/* hyphenated */
+.hyphenated {
+  hyphens: auto;
+}
+
+/* emptyIndicator */
+.emptyIndicator {
+  line-height: normal;
+  color: var(--sapTextColor);
+}
+
+/* pseudoInvisibleText */
+.pseudoInvisibleText {
+  font-size: 0;
+  position: absolute;
+  user-select: none;
+  left: 0;
+  top: 0;
+}

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

@@ -1,13 +1,12 @@
 'use client';
 
-import { useI18nBundle } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, ReactNode } from 'react';
 import React, { forwardRef } from 'react';
-import { createUseStyles } from 'react-jss';
 import { EMPTY_VALUE } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../types/index.js';
-import { TextStyles } from './Text.jss.js';
+import { classNames, styleData } from './Text.module.css.js';
 
 export interface TextPropTypes extends CommonProps {
   /**
@@ -44,7 +43,6 @@ export interface TextPropTypes extends CommonProps {
   hyphenated?: boolean;
 }
 
-const useStyles = createUseStyles(TextStyles, { name: 'Text' });
 /**
  * The `Text` component can be used for embedding text into your app. You can hyphenate the text with the use of the `wrapping` prop.
  *
@@ -62,20 +60,26 @@ const Text = forwardRef<HTMLSpanElement, TextPropTypes>((props, ref) => {
     emptyIndicator,
     ...rest
   } = props;
-  const classes = useStyles();
+
+  useStylesheet(styleData, Text.displayName);
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+
   const classNameString = clsx(
-    classes.text,
-    wrapping === false && classes.noWrap,
-    renderWhitespace && classes.renderWhitespace,
-    typeof maxLines === 'number' && classes.maxLines,
-    hyphenated && classes.hyphenated,
+    classNames.text,
+    wrapping === false && classNames.noWrap,
+    renderWhitespace && classNames.renderWhitespace,
+    typeof maxLines === 'number' && classNames.maxLines,
+    hyphenated && classNames.hyphenated,
     className
   );
 
   const showEmptyIndicator = emptyIndicator && !children;
   const computedChildren = showEmptyIndicator ? (
-    <span aria-hidden={showEmptyIndicator} data-component-name="TextEmptyIndicator" className={classes.emptyIndicator}>
+    <span
+      aria-hidden={showEmptyIndicator}
+      data-component-name="TextEmptyIndicator"
+      className={classNames.emptyIndicator}
+    >
       –
     </span>
   ) : (
@@ -91,7 +95,7 @@ const Text = forwardRef<HTMLSpanElement, TextPropTypes>((props, ref) => {
     >
       {computedChildren}
       {showEmptyIndicator && (
-        <span className={classes.pseudoInvisibleText} data-component-name="TextEmptyTextContainer">
+        <span className={classNames.pseudoInvisibleText} data-component-name="TextEmptyTextContainer">
           {i18nBundle.getText(EMPTY_VALUE)}
         </span>
       )}