From 06d9776ec9491bc445205ed826cc51ef27cea1a9 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Wed, 10 Apr 2024 15:35:09 +0200 Subject: [PATCH 1/4] refactor(Form): replace react-jss with css modules [ci chromatic] --- packages/main/src/components/Form/Form.jss.ts | 58 ------------------ .../main/src/components/Form/Form.module.css | 61 +++++++++++++++++++ packages/main/src/components/Form/index.tsx | 15 ++--- .../components/FormItem/FormItem.module.css | 30 +++++++++ .../main/src/components/FormItem/index.tsx | 61 +++---------------- 5 files changed, 105 insertions(+), 120 deletions(-) delete mode 100644 packages/main/src/components/Form/Form.jss.ts create mode 100644 packages/main/src/components/Form/Form.module.css create mode 100644 packages/main/src/components/FormItem/FormItem.module.css diff --git a/packages/main/src/components/Form/Form.jss.ts b/packages/main/src/components/Form/Form.jss.ts deleted file mode 100644 index b03979112ee..00000000000 --- a/packages/main/src/components/Form/Form.jss.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { ThemingParameters } from '@ui5/webcomponents-react-base'; - -const styles = { - formContainer: { - containerType: 'inline-size' - }, - form: { - display: 'grid', - alignItems: 'center', - rowGap: '0.25rem', - columnGap: '0.5rem', - '--_ui5wcr_form_label_text_align': 'end', - - '@container (max-width: 599px)': { - '--_ui5wcr_form_label_span': 'var(--_ui5wcr_form_label_span_s)', - '--_ui5wcr_form_columns': 'var(--_ui5wcr_form_columns_s)', - gridTemplateColumns: `repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr)`, - '--_ui5wcr_form_content_span': 'calc(12 - var(--_ui5wcr_form_label_span))' - }, - '@container (min-width: 600px) and (max-width: 1023px)': { - '--_ui5wcr_form_label_span': 'var(--_ui5wcr_form_label_span_m)', - '--_ui5wcr_form_columns': 'var(--_ui5wcr_form_columns_m)', - gridTemplateColumns: `repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr)`, - '--_ui5wcr_form_content_span': 'calc(12 - var(--_ui5wcr_form_label_span))' - }, - '@container (min-width: 1024px) and (max-width: 1439px)': { - '--_ui5wcr_form_label_span': 'var(--_ui5wcr_form_label_span_l)', - '--_ui5wcr_form_columns': 'var(--_ui5wcr_form_columns_l)', - gridTemplateColumns: `repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr)`, - '--_ui5wcr_form_content_span': 'calc(12 - var(--_ui5wcr_form_label_span))' - }, - '@container (min-width: 1440px)': { - '--_ui5wcr_form_label_span': 'var(--_ui5wcr_form_label_span_xl)', - '--_ui5wcr_form_columns': 'var(--_ui5wcr_form_columns_xl)', - gridTemplateColumns: `repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr)`, - '--_ui5wcr_form_content_span': 'calc(12 - var(--_ui5wcr_form_label_span))' - } - }, - solid: { - backgroundColor: ThemingParameters.sapGroup_ContentBackground - }, - transparent: { - backgroundColor: 'transparent' - }, - formTitle: { - borderBlockEnd: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`, - marginBlockEnd: '1.75rem', - gridColumn: '1 / -1' - }, - labelSpan12: { - '--_ui5wcr_form_content_span': 12, - '--_ui5wcr_form_label_text_align': 'start', - '--_ui5wcr_form_label_span': 12, - rowGap: 0 - } -}; - -export { styles }; diff --git a/packages/main/src/components/Form/Form.module.css b/packages/main/src/components/Form/Form.module.css new file mode 100644 index 00000000000..1df8534aadc --- /dev/null +++ b/packages/main/src/components/Form/Form.module.css @@ -0,0 +1,61 @@ +.formContainer { + container-type: inline-size; +} + +.form { + display: grid; + align-items: center; + row-gap: 0.25rem; + column-gap: 0.5rem; + + --_ui5wcr_form_label_text_align: end; +} + +@container (max-width: 599px) { + --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_s); + --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_s); + --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span)); + grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr); +} + +@container (min-width: 600px) and (max-width: 1023px): { + --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_m); + --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_m); + --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span)); + grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr); +} + +@container (min-width: 1024px) and (max-width: 1439px): { + --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_l); + --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_l); + --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span)); + grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr); +} + +@container (min-width: 1440px): { + --_ui5wcr_form_label_span: var(--_ui5wcr_form_label_span_xl); + --_ui5wcr_form_columns: var(--_ui5wcr_form_columns_xl); + --_ui5wcr_form_content_span: calc(12 - var(--_ui5wcr_form_label_span)); + grid-template-columns: repeat(calc(12 * var(--_ui5wcr_form_columns)), 1fr); +} + +.solid { + background-color: var(--sapGroup_ContentBackground); +} + +.transparent { + background-color: transparent; +} + +.formTitle { + border-block-end: 1px solid var(--sapGroup_TitleBorderColor); + margin-block-end: 1.75rem; + grid-column: 1 / -1; +} + +.labelSpan12 { + --_ui5wcr_form_content_span: 12; + --_ui5wcr_form_label_text_align: start; + --_ui5wcr_form_label_span: 12; + row-gap: 0; +} diff --git a/packages/main/src/components/Form/index.tsx b/packages/main/src/components/Form/index.tsx index 5a0c8a2a6d7..6401a6f6803 100644 --- a/packages/main/src/components/Form/index.tsx +++ b/packages/main/src/components/Form/index.tsx @@ -1,14 +1,13 @@ 'use client'; -import { Device, useSyncRef } from '@ui5/webcomponents-react-base'; +import { Device, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { ElementType, ReactNode } from 'react'; import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; -import { createUseStyles } from 'react-jss'; import { FormBackgroundDesign, TitleLevel } from '../../enums/index.js'; import type { CommonProps } from '../../types/index.js'; import { Title } from '../../webComponents/index.js'; -import { styles } from './Form.jss.js'; +import { classNames, styleData } from './Form.module.css.js'; import { FormContext } from './FormContext.js'; import type { FormContextType, FormElementTypes, FormGroupLayoutInfo, FormItemLayoutInfo, ItemInfo } from './types.js'; @@ -16,8 +15,6 @@ const recalcReducerFn = (prev: number) => { return prev + 1; }; -const useStyles = createUseStyles(styles, { name: 'Form' }); - export interface FormPropTypes extends CommonProps { /** * Components that are placed into Form. @@ -130,7 +127,7 @@ const Form = forwardRef((props, ref) => { } = props; const [items, setItems] = useState>(() => new Map()); - const classes = useStyles(); + useStylesheet(styleData, Form.displayName); const columnsMap = new Map(); columnsMap.set('Phone', columnsS); @@ -265,7 +262,7 @@ const Form = forwardRef((props, ref) => { return { formItems, formGroups, registerItem, unregisterItem, rowsWithGroup }; }, [items, registerItem, unregisterItem, currentNumberOfColumns, titleText, currentLabelSpan]); - const formClassNames = clsx(classes.form, classes[backgroundDesign.toLowerCase()]); + const formClassNames = clsx(classNames.form, classNames[backgroundDesign.toLowerCase()]); const CustomTag = as as ElementType; const prevFormItems = useRef(undefined); @@ -298,7 +295,7 @@ const Form = forwardRef((props, ref) => { return ( ((props, ref) => { >
{titleText && ( - + <Title level={TitleLevel.H3} className={classNames.formTitle} style={{ gridColumn: '1 / -1' }}> {titleText} )} diff --git a/packages/main/src/components/FormItem/FormItem.module.css b/packages/main/src/components/FormItem/FormItem.module.css new file mode 100644 index 00000000000..55f294d530f --- /dev/null +++ b/packages/main/src/components/FormItem/FormItem.module.css @@ -0,0 +1,30 @@ +.label { + grid-column-end: span var(--_ui5wcr_form_label_span); + justify-self: var(--_ui5wcr_form_label_text_align); + text-align: var(--_ui5wcr_form_label_text_align); + + &[data-label-span='12'] { + justify-self: start; + } + + &:has( + + .content + > *:is([ui5-checkbox], [ui5-checkbox], [ui5-radio-button], [ui5-switch], [ui5-range-slider], [ui5-slider]) + ) { + align-self: center; + } +} + +.content { + display: flex; + grid-column-end: span var(--_ui5wcr_form_content_span); + + &[data-label-span='12'] { + grid-column-end: span 12; + padding-block-end: 0.75rem; + } +} + +.lastGroupItem { + margin-block-end: 1rem; +} diff --git a/packages/main/src/components/FormItem/index.tsx b/packages/main/src/components/FormItem/index.tsx index b15ec06f746..55c75664b11 100644 --- a/packages/main/src/components/FormItem/index.tsx +++ b/packages/main/src/components/FormItem/index.tsx @@ -1,16 +1,16 @@ 'use client'; -import { useIsomorphicId } from '@ui5/webcomponents-react-base'; +import { useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties, ReactElement, ReactNode } from 'react'; import React, { cloneElement, Fragment, isValidElement, useEffect, useMemo } from 'react'; -import { createUseStyles } from 'react-jss'; import { WrappingType } from '../../enums/index.js'; import { flattenFragments } from '../../internal/utils.js'; import type { ReducedReactNodeWithBoolean } from '../../types/index.js'; import type { LabelPropTypes } from '../../webComponents/Label/index.js'; import { Label } from '../../webComponents/Label/index.js'; import { useFormContext, useFormGroupContext } from '../Form/FormContext.js'; +import { classNames, styleData } from './FormItem.module.css.js'; type FormItemContent = | ReducedReactNodeWithBoolean @@ -35,56 +35,13 @@ interface InternalProps extends FormItemPropTypes { rowIndex?: number; } -const CENTER_ALIGNED_CHILDREN = new Set(['CheckBox', 'RadioButton', 'Switch', 'RangeSlider', 'Slider']); - -const useStyles = createUseStyles( - { - label: { - gridColumnEnd: 'span var(--_ui5wcr_form_label_span)', - justifySelf: 'var(--_ui5wcr_form_label_text_align)', - textAlign: 'var(--_ui5wcr_form_label_text_align)', - '&[data-label-span="12"]': { - justifySelf: 'start' - }, - '&:has(+ $content > [ui5-checkbox])': { - alignSelf: 'center' - }, - '&:has(+ $content > [ui5-radio-button])': { - alignSelf: 'center' - }, - '&:has(+ $content > [ui5-switch])': { - alignSelf: 'center' - }, - '&:has(+ $content > [ui5-range-slider])': { - alignSelf: 'center' - }, - '&:has(+ $content > [ui5-slider])': { - alignSelf: 'center' - } - }, - content: { - display: 'flex', - gridColumnEnd: 'span var(--_ui5wcr_form_content_span)', - '&[data-label-span="12"]': { - gridColumnEnd: 'span 12', - paddingBlockEnd: '0.75rem' - } - }, - lastGroupItem: { - marginBlockEnd: '1rem' - } - }, - { name: 'FormItem' } -); - function FormItemLabel({ label, style, className }: { label: ReactNode; style?: CSSProperties; className?: string }) { - const classes = useStyles(); const { labelSpan } = useFormContext(); if (typeof label === 'string') { return (