diff --git a/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap index 445d6203c95..6ea7d162071 100644 --- a/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap +++ b/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap @@ -2,10 +2,10 @@ exports[`Create a Form accepts both label and labelText 1`] = `
,
,
,
,
,
,
{ - return { - width: `calc(${(width * 100) / 12}% - ${hSpace}rem)` - }; -}; - -const getIndentForSpan = (width, hSpace = 0) => { - return { - marginLeft: `calc(${(width * 100) / 12}% + ${hSpace / 2}rem)` - }; -}; - -const getSpansForSpace = (hSpace = 0) => ({ - '&$gridSpan1': getWidthForSpan(1, hSpace), - '&$gridSpan2': getWidthForSpan(2, hSpace), - '&$gridSpan3': getWidthForSpan(3, hSpace), - '&$gridSpan4': getWidthForSpan(4, hSpace), - '&$gridSpan5': getWidthForSpan(5, hSpace), - '&$gridSpan6': getWidthForSpan(6, hSpace), - '&$gridSpan7': getWidthForSpan(7, hSpace), - '&$gridSpan8': getWidthForSpan(8, hSpace), - '&$gridSpan9': getWidthForSpan(9, hSpace), - '&$gridSpan10': getWidthForSpan(10, hSpace), - '&$gridSpan11': getWidthForSpan(11, hSpace), - '&$gridSpan12': getWidthForSpan(12, hSpace) -}); - -const getIndentsForSpace = (hSpace) => ({ - '&$gridIndent1': getIndentForSpan(1, hSpace), - '&$gridIndent2': getIndentForSpan(2, hSpace), - '&$gridIndent3': getIndentForSpan(3, hSpace), - '&$gridIndent4': getIndentForSpan(4, hSpace), - '&$gridIndent5': getIndentForSpan(5, hSpace), - '&$gridIndent6': getIndentForSpan(6, hSpace), - '&$gridIndent7': getIndentForSpan(7, hSpace), - '&$gridIndent8': getIndentForSpan(8, hSpace), - '&$gridIndent9': getIndentForSpan(9, hSpace), - '&$gridIndent10': getIndentForSpan(10, hSpace), - '&$gridIndent11': getIndentForSpan(11, hSpace), - '&$gridIndent12': getIndentForSpan(12, hSpace) -}); - -export const GridClasses = { - '@global html': { - '--_ui5wcr_Grid_float': 'left' - }, - '@global [dir="rtl"]': { - '--_ui5wcr_Grid_float': 'right' - }, +export const styles = { grid: { - '& $gridSpan': { ...getSpansForSpace(0), ...getIndentsForSpace(0) }, - '&$gridHSpace05': { - padding: '0 0.25rem', - '& > div': { - margin: '0 0.25rem' - }, - '& $gridSpan': { ...getSpansForSpace(0.5), ...getIndentsForSpace(0.5) } - }, - '&$gridHSpace1': { - padding: '0 0.5rem', - '& > div': { - margin: '0 0.5rem' - }, - '& $gridSpan': { ...getSpansForSpace(1), ...getIndentsForSpace(1) } - }, - '&$gridHSpace2': { - padding: '0 1rem', - '& > div': { - margin: '0 1rem' - }, - '& $gridSpan': { ...getSpansForSpace(2), ...getIndentsForSpace(2) } - }, - '&$gridVSpace0 > $gridSpan': { - marginBottom: 0 - }, - '&$gridVSpace05 > $gridSpan': { - marginBottom: '0.5rem' - }, - '&$gridVSpace1 > $gridSpan': { - marginBottom: '1rem' - }, - '&$gridVSpace2 > $gridSpan': { - marginBottom: '2rem' - }, - '& > div': { - float: 'var(--_ui5wcr_Grid_float)', - overflow: 'hidden', - minHeight: '1px' - }, - '&$gridPositionCenter': { - marginLeft: 'auto', - marginRight: 'auto' - }, - '&$gridPositionRight': { - marginLeft: 'auto', - marginRight: 0 - }, - '&:after, & > div:after': { - clear: 'both', - content: '" "', - display: 'block', - fontSize: 0, - height: 0, - visibility: 'hidden' - } + display: 'grid', + gridTemplateColumns: `repeat(12, 1fr)` + }, + gridSpan1: { gridColumn: 'span 1' }, + gridSpan2: { gridColumn: 'span 2' }, + gridSpan3: { gridColumn: 'span 3' }, + gridSpan4: { gridColumn: 'span 4' }, + gridSpan5: { gridColumn: 'span 5' }, + gridSpan6: { gridColumn: 'span 6' }, + gridSpan7: { gridColumn: 'span 7' }, + gridSpan8: { gridColumn: 'span 8' }, + gridSpan9: { gridColumn: 'span 9' }, + gridSpan10: { gridColumn: 'span 10' }, + gridSpan11: { gridColumn: 'span 11' }, + gridSpan12: { gridColumn: 'span 12' }, + positionCenter: { + marginLeft: 'auto', + marginRight: 'auto' }, - gridHSpace05: {}, - gridHSpace1: {}, - gridHSpace2: {}, - gridVSpace0: {}, - gridVSpace05: {}, - gridVSpace1: {}, - gridVSpace2: {}, - gridPositionCenter: {}, - gridPositionRight: {}, - // small spans - gridSpan: {}, - gridSpan1: {}, - gridSpan2: {}, - gridSpan3: {}, - gridSpan4: {}, - gridSpan5: {}, - gridSpan6: {}, - gridSpan7: {}, - gridSpan8: {}, - gridSpan9: {}, - gridSpan10: {}, - gridSpan11: {}, - gridSpan12: {}, - gridIndent1: {}, - gridIndent2: {}, - gridIndent3: {}, - gridIndent4: {}, - gridIndent5: {}, - gridIndent6: {}, - gridIndent7: {}, - gridIndent8: {}, - gridIndent9: {}, - gridIndent10: {}, - gridIndent11: {}, - gridIndent12: {} + positionRight: { + marginLeft: 'auto', + marginRight: 0 + } }; diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx index b2df9e9415d..4f49614e607 100644 --- a/packages/main/src/components/Grid/Grid.stories.tsx +++ b/packages/main/src/components/Grid/Grid.stories.tsx @@ -1,15 +1,23 @@ +import { text } from '@storybook/addon-knobs'; import { Grid } from '@ui5/webcomponents-react/lib/Grid'; import React from 'react'; export const defaultStory = () => { return ( - -
Div 1
+ +
+ {`Div 1 with prop: data-layout-span="XL8 L8 M8 S12" and data-layout-indent="XL1 L1 M1 S0"`} +
Div 2
Div 3
Div 4
-
Div 5
-
Div 6
+
Div 5
+
Div 6
 ); }; diff --git a/packages/main/src/components/Grid/Grid.test.tsx b/packages/main/src/components/Grid/Grid.test.tsx index 418a36173e3..f73988fe409 100644 --- a/packages/main/src/components/Grid/Grid.test.tsx +++ b/packages/main/src/components/Grid/Grid.test.tsx @@ -1,8 +1,8 @@ import { createPassThroughPropsTest } from '@shared/tests/utils'; import { mount } from 'enzyme'; import { Grid } from '@ui5/webcomponents-react/lib/Grid'; -import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition'; import React from 'react'; +import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition'; const GridContent = () => ( <> @@ -49,7 +49,7 @@ describe('Grid', () => { test('Custom Class Names and Styling', () => { const wrapper = mount( - + ); @@ -65,7 +65,7 @@ describe('Grid', () => { width: '100%', backgroundColor: '#A9EAFF' }} - data-layout={{ span: 'XL12 L12 M12 S12' }} + data-layout-span="XL12 L12 M12 S12" />
{ width: '100%', backgroundColor: '#A9EAFF' }} - data-layout={{ indent: 'XL1 L1 M1 S1' }} + data-layout-indent="XL1 L1 M1 S1" /> ); @@ -82,7 +82,7 @@ describe('Grid', () => { test('Grid Position Center', () => { const wrapper = mount( - + ); @@ -90,7 +90,7 @@ describe('Grid', () => { }); test('Grid Position Right', () => { const wrapper = mount( - + ); diff --git a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap index 8302d1523ce..5ab3bbae5e5 100644 --- a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap +++ b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap @@ -2,11 +2,11 @@ exports[`Grid Custom Class Names and Styling 1`] = `
+
diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 5a26d6066aa..f151735aa3c 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -1,8 +1,8 @@ import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; -import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange'; import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition'; +import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import React, { Children, CSSProperties, @@ -12,38 +12,38 @@ import React, { ReactNode, ReactNodeArray, Ref, - useMemo + useCallback } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; -import { GridClasses } from './Grid.jss'; +import { styles } from './Grid.jss'; export interface GridPropTypes extends CommonProps { /** - * Width of the Grid. If not specified, then 100%. + * Vertical spacing between the rows in the Grid. If not specified, then 1rem. */ - width?: CSSProperties['width']; + vSpacing?: CSSProperties['height']; /** - * Vertical spacing between the rows in the Grid. In rem, allowed values are 0, 0.5, 1 and 2. + * Horizontal spacing between the content in the Grid. If not specified, then 1rem. */ - vSpacing?: 0 | 0.5 | 1 | 2; - /** - * Horizontal spacing between the content in the Grid. In rem, allowed values are 0, 0.5 , 1 or 2. - */ - hSpacing?: 0 | 0.5 | 1 | 2; + hSpacing?: CSSProperties['width']; /** * Position of the Grid in the window or surrounding container. Possible values are "Center", "Left" and "Right". */ position?: GridPosition; /** - * A string type that represents Grid's default span values for large, medium and small screens for the whole Grid. - * Allowed values are separated by space Letters L, M or S followed by number of columns from 1 to 12 that the container has to take, for example: "L2 M4 S6", "M12", "s10" or "l4 m4". - * Note that the parameters has to be provided in the order large medium small. + * A string type that represents Grid's default span values for very large, large, medium and small screens for the whole Grid. + * Allowed values are separated by space Letters XL, L, M or S followed by number of columns from 1 to 12 that the container has to take, for example: "L2 M4 S6", "M12", "s10" or "l4 m4". + * Note that the parameters has to be provided in the order very large, large, medium, small. + *
+ * You can override this default span on each child element by setting the prop `data-layout-span`. */ defaultSpan?: string; /** - * Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. - * Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example: "L2 M4 S6", "M11", "s10" or "l4 m4". - * Note that the parameters has to be provided in the order large medium small. + * Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for very large, large, medium and small screens. + * Allowed values are separated by space Letters XL, L, M or S followed by number of columns from 0 to 12 that the container has to take, for example: "L2 M4 S6", "M11", "s10" or "l4 m4". + * Note that the parameters has to be provided in the order very-large, large, medium, small. + *
+ * You can override this default indent on each child element by setting the prop `data-layout-indent`. */ defaultIndent?: string; /** @@ -52,14 +52,14 @@ export interface GridPropTypes extends CommonProps { children: ReactNode | ReactNodeArray; } -const INDENT_PATTERN = /^([X][L](?[0-9]|1[0-1]))? ?([L](?[0-9]|1[0-1]))? ?([M](?[0-9]|1[0-1]))? ?([S](?[0-9]|1[0-1]))?$/i; +const INDENT_PATTERN = /^([X][L](?[0-9]|1[0-2]))? ?([L](?[0-9]|1[0-2]))? ?([M](?[0-9]|1[0-2]))? ?([S](?[0-9]|1[0-2]))?$/i; const SPAN_PATTERN = /^([X][L](?[1-9]|1[0-2]))? ?([L](?[1-9]|1[0-2]))? ?([M](?[1-9]|1[0-2]))? ?([S](?[1-9]|1[0-2]))?$/i; const DefaultSpanMap = new Map(); -DefaultSpanMap.set('Phone', 12); -DefaultSpanMap.set('Tablet', 6); -DefaultSpanMap.set('Desktop', 3); -DefaultSpanMap.set('LargeDesktop', 3); +DefaultSpanMap.set('Phone', 1); +DefaultSpanMap.set('Tablet', 2); +DefaultSpanMap.set('Desktop', 4); +DefaultSpanMap.set('LargeDesktop', 4); const DefaultIndentMap = new Map(); DefaultIndentMap.set('Phone', 0); @@ -69,90 +69,66 @@ DefaultIndentMap.set('LargeDesktop', 0); const getSpanFromString = (span, currentRange) => { const spanConfig = SPAN_PATTERN.exec(span); - return spanConfig.groups[currentRange] ?? DefaultSpanMap.get(currentRange); + return spanConfig?.groups[currentRange] ?? DefaultSpanMap.get(currentRange); }; const getIndentFromString = (indent, currentRange) => { const indentConfig = INDENT_PATTERN.exec(indent); - return indentConfig.groups[currentRange] ?? DefaultIndentMap.get(currentRange); + return indentConfig?.groups[currentRange] ?? DefaultIndentMap.get(currentRange); }; -const useStyles = createComponentStyles(GridClasses, { name: 'Grid' }); +const useStyles = createComponentStyles(styles, { name: 'Grid' }); /** * import { Grid } from '@ui5/webcomponents-react/lib/Grid'; */ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref) => { const { - children, - hSpacing, - vSpacing, position, - width, + children, + hSpacing = '1rem', + vSpacing = '1rem', style, className, tooltip, slot, - defaultIndent, - defaultSpan + defaultIndent = 'XL0 L0 M0 S0', + defaultSpan = 'XL3 L3 M6 S12' } = props; - const classes = useStyles(); - const gridClasses = StyleClassHelper.of(classes.grid); - gridClasses.put(classes[`gridHSpace${hSpacing === 0.5 ? '05' : hSpacing}`]); - gridClasses.put(classes[`gridVSpace${vSpacing === 0.5 ? '05' : vSpacing}`]); - const currentRange = useViewportRange('StdExt'); + const gridClasses = StyleClassHelper.of(classes.grid); if (GridPosition.Center === position) { - gridClasses.put(classes.gridPositionCenter); + gridClasses.put(classes.positionCenter); } if (GridPosition.Right === position) { - gridClasses.put(classes.gridPositionRight); + gridClasses.put(classes.positionRight); } - const gridStyle: CSSProperties = useMemo(() => { - const styles: CSSProperties = {}; - if (width !== '100%' && width !== 'auto' && width !== 'inherit') { - if (hSpacing === 0) { - styles.width = width; - } else { - styles.width = `calc(${width} - ${hSpacing}rem)`; - } - } - if (style) { - Object.assign(styles, style); - } - - return styles; - }, [width, hSpacing, style]); - if (className) { gridClasses.put(className); } - const renderGridElements = (child: ReactElement) => { - const gridSpanClasses = StyleClassHelper.of(classes.gridSpan); - if (child.props['data-layout'] && child.props['data-layout'].span) { - const childSpan = getSpanFromString(child.props['data-layout'].span, currentRange); - gridSpanClasses.put(classes[`gridSpan${childSpan}`]); - } else { - const span = getSpanFromString(defaultSpan, currentRange); - gridSpanClasses.put(classes[`gridSpan${span}`]); - } - - const indentSpan = getIndentFromString(defaultIndent, currentRange); - if (child.props['data-layout'] && child.props['data-layout'].indent) { - const childIndent = getIndentFromString(child.props['data-layout'].indent, currentRange); - if (childIndent && childIndent > 0) { - gridSpanClasses.put(classes[`gridIndent${childIndent}`]); + const renderGridElements = useCallback( + (child: ReactElement) => { + if (!child) return null; + + const childSpan = getSpanFromString(child.props['data-layout-span'] ?? defaultSpan, currentRange); + let childClass = classes[`gridSpan${childSpan}`]; + + const childrenWithGridLayout = [
{child}
]; + + const indentSpan = getIndentFromString(child.props['data-layout-indent'] ?? defaultIndent, currentRange); + if (indentSpan && indentSpan > 0) { + childrenWithGridLayout.unshift(); } - } else if (indentSpan && indentSpan > 0) { - gridSpanClasses.put(classes[`gridIndent${indentSpan}`]); - } - return
{child}
; - }; + + return childrenWithGridLayout; + }, + [currentRange, defaultSpan, defaultIndent, classes] + ); const passThroughProps = usePassThroughHtmlProps(props); @@ -160,7 +136,7 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref = forwardRef((props: GridPropTypes, ref: Ref