From 8e310af078c0eb20b717531080e14b29b95260df Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Tue, 12 May 2020 11:18:49 +0200 Subject: [PATCH 1/6] refactor(Grid): use CSS Grid Layout, remove position and width prop --- .../Form/__snapshots__/Form.test.tsx.snap | 36 ++-- packages/main/src/components/Grid/Grid.jss.ts | 156 ++---------------- .../main/src/components/Grid/Grid.stories.tsx | 16 +- .../main/src/components/Grid/Grid.test.tsx | 18 -- .../Grid/__snapshots__/Grid.test.tsx.snap | 65 ++------ packages/main/src/components/Grid/index.tsx | 153 ++++++----------- packages/main/src/enums/GridPosition.ts | 5 - packages/main/src/index.ts | 2 - packages/main/src/lib/GridPosition.ts | 3 - 9 files changed, 111 insertions(+), 343 deletions(-) delete mode 100644 packages/main/src/enums/GridPosition.ts delete mode 100644 packages/main/src/lib/GridPosition.ts 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' }, - 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: {} + 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' } }; diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx index b2df9e9415d..07270fc5d6c 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', 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..a8dba7b9090 100644 --- a/packages/main/src/components/Grid/Grid.test.tsx +++ b/packages/main/src/components/Grid/Grid.test.tsx @@ -1,7 +1,6 @@ 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'; const GridContent = () => ( @@ -80,22 +79,5 @@ describe('Grid', () => { expect(wrapper.render()).toMatchSnapshot(); }); - test('Grid Position Center', () => { - const wrapper = mount( - - - - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - test('Grid Position Right', () => { - const wrapper = mount( - - - - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - createPassThroughPropsTest(Grid); }); 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..bdf2645f774 100644 --- a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap +++ b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap @@ -2,57 +2,11 @@ exports[`Grid Custom Class Names and Styling 1`] = `
-
-
-
-
-
-
-`; - -exports[`Grid Grid Position Center 1`] = ` -
-
-
-
-
-
-
-
-`; - -exports[`Grid Grid Position Right 1`] = ` -
-
+
`; diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 5a26d6066aa..f465a1cfe0c 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -1,8 +1,6 @@ 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 React, { Children, CSSProperties, @@ -12,38 +10,30 @@ 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['width']; /** - * 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; + hSpacing?: CSSProperties['width']; /** - * 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; - /** - * 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. */ 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. */ defaultIndent?: string; /** @@ -52,14 +42,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,98 +59,63 @@ 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, - style, - className, - tooltip, - slot, - defaultIndent, - defaultSpan - } = props; - + const { children, hSpacing, vSpacing, style, className, tooltip, slot, defaultIndent, defaultSpan } = 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'); - if (GridPosition.Center === position) { - gridClasses.put(classes.gridPositionCenter); - } - - if (GridPosition.Right === position) { - gridClasses.put(classes.gridPositionRight); - } - - const gridStyle: CSSProperties = useMemo(() => { - const styles: CSSProperties = {}; - if (width !== '100%' && width !== 'auto' && width !== 'inherit') { - if (hSpacing === 0) { - styles.width = width; + const renderGridElements = useCallback( + (child: ReactElement) => { + let childClass = ''; + if (child.props['data-layout'] && child.props['data-layout'].span) { + const childSpan = getSpanFromString(child.props['data-layout'].span, currentRange); + childClass = classes[`gridSpan${childSpan}`]; } else { - styles.width = `calc(${width} - ${hSpacing}rem)`; + const span = getSpanFromString(defaultSpan, currentRange); + childClass = classes[`gridSpan${span}`]; } - } - 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 childrenWithGridLayout = [
{child}
]; + + const indentSpan = getIndentFromString(defaultIndent, currentRange); + let indentClass = ''; + if (child.props['data-layout'] && child.props['data-layout'].indent) { + const childIndent = getIndentFromString(child.props['data-layout'].indent, currentRange); + if (childIndent && childIndent > 0) { + indentClass = classes[`gridSpan${childIndent}`]; + } + } else if (indentSpan && indentSpan > 0) { + indentClass = classes[`gridSpan${indentSpan}`]; + } + if (indentClass) { + childrenWithGridLayout.push(); } - } else if (indentSpan && indentSpan > 0) { - gridSpanClasses.put(classes[`gridIndent${indentSpan}`]); - } - return
{child}
; - }; - const passThroughProps = usePassThroughHtmlProps(props); + return childrenWithGridLayout; + }, + [currentRange, defaultSpan, defaultIndent, classes] + ); + const passThroughProps = usePassThroughHtmlProps(props); + const withClassName = className ? `${className} ${classes.grid}` : classes.grid; return (
= forwardRef((props: GridPropTypes, ref: Ref Date: Thu, 14 May 2020 08:59:45 +0200 Subject: [PATCH 2/6] change data-layout to data-layout-span and data-layout-indent BREAKING CHANGE: change prop `data-layout` (object) on child elements to `data-layout-span` and `data-layout-indent` --- packages/main/src/components/Grid/Grid.jss.ts | 4 +- .../main/src/components/Grid/Grid.stories.tsx | 4 +- .../main/src/components/Grid/Grid.test.tsx | 4 +- packages/main/src/components/Grid/index.tsx | 55 +++++++++---------- 4 files changed, 30 insertions(+), 37 deletions(-) diff --git a/packages/main/src/components/Grid/Grid.jss.ts b/packages/main/src/components/Grid/Grid.jss.ts index 6c528108ea2..4cd68a3f7cd 100644 --- a/packages/main/src/components/Grid/Grid.jss.ts +++ b/packages/main/src/components/Grid/Grid.jss.ts @@ -3,9 +3,7 @@ export const styles = { display: 'grid', gridTemplateColumns: `repeat(12, 1fr)` }, - gridSpan1: { - gridColumn: 'span 1' - }, + gridSpan1: { gridColumn: 'span 1' }, gridSpan2: { gridColumn: 'span 2' }, gridSpan3: { gridColumn: 'span 3' }, gridSpan4: { gridColumn: 'span 4' }, diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx index 07270fc5d6c..4f49614e607 100644 --- a/packages/main/src/components/Grid/Grid.stories.tsx +++ b/packages/main/src/components/Grid/Grid.stories.tsx @@ -10,8 +10,8 @@ export const defaultStory = () => { vSpacing={text('vSpacing', '1rem')} hSpacing={text('hSpacing', '1rem')} > -
- {`Div 1 with prop: data-layout={{ span: 'XL8 L8 M8 S12', indent: 'XL1 L1 M1 S0' }}`} +
+ {`Div 1 with prop: data-layout-span="XL8 L8 M8 S12" and data-layout-indent="XL1 L1 M1 S0"`}
Div 2
Div 3
diff --git a/packages/main/src/components/Grid/Grid.test.tsx b/packages/main/src/components/Grid/Grid.test.tsx index a8dba7b9090..97c62a08efa 100644 --- a/packages/main/src/components/Grid/Grid.test.tsx +++ b/packages/main/src/components/Grid/Grid.test.tsx @@ -64,7 +64,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" /> ); diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index f465a1cfe0c..e5af885943d 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -28,12 +28,16 @@ export interface GridPropTypes extends CommonProps { * 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 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; /** @@ -73,35 +77,32 @@ 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, style, className, tooltip, slot, defaultIndent, defaultSpan } = props; + const { + children, + hSpacing = '1rem', + vSpacing = '1rem', + style, + className, + tooltip, + slot, + defaultIndent = 'XL0 L0 M0 S0', + defaultSpan = 'XL3 L3 M6 S12' + } = props; const classes = useStyles(); const currentRange = useViewportRange('StdExt'); const renderGridElements = useCallback( (child: ReactElement) => { - let childClass = ''; - if (child.props['data-layout'] && child.props['data-layout'].span) { - const childSpan = getSpanFromString(child.props['data-layout'].span, currentRange); - childClass = classes[`gridSpan${childSpan}`]; - } else { - const span = getSpanFromString(defaultSpan, currentRange); - childClass = classes[`gridSpan${span}`]; - } + 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(defaultIndent, currentRange); - let indentClass = ''; - if (child.props['data-layout'] && child.props['data-layout'].indent) { - const childIndent = getIndentFromString(child.props['data-layout'].indent, currentRange); - if (childIndent && childIndent > 0) { - indentClass = classes[`gridSpan${childIndent}`]; - } - } else if (indentSpan && indentSpan > 0) { - indentClass = classes[`gridSpan${indentSpan}`]; - } - if (indentClass) { - childrenWithGridLayout.push(); + const indentSpan = getIndentFromString(child.props['data-layout-indent'] ?? defaultIndent, currentRange); + if (indentSpan && indentSpan > 0) { + childrenWithGridLayout.unshift(); } return childrenWithGridLayout; @@ -110,12 +111,12 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref = forwardRef((props: GridPropTypes, ref: Ref Date: Thu, 14 May 2020 09:02:02 +0200 Subject: [PATCH 3/6] update tests --- .../components/Grid/__snapshots__/Grid.test.tsx.snap | 12 ++++++------ packages/main/src/components/Grid/index.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) 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 bdf2645f774..d4b575fdb10 100644 --- a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap +++ b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap @@ -2,7 +2,7 @@ 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 e5af885943d..5ca4c9d13fa 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -115,7 +115,7 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref Date: Thu, 14 May 2020 09:04:46 +0200 Subject: [PATCH 4/6] types: use height for hSpacing --- packages/main/src/components/Grid/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 5ca4c9d13fa..83aa05ad7c2 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -23,7 +23,7 @@ export interface GridPropTypes extends CommonProps { /** * Horizontal spacing between the content in the Grid. If not specified, then 1rem. */ - hSpacing?: CSSProperties['width']; + hSpacing?: CSSProperties['height']; /** * 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". From 05957005034b6e42a6c7d67ab3bb73719adf90d4 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 14 May 2020 09:31:01 +0200 Subject: [PATCH 5/6] re-add grid position again --- packages/main/src/components/Grid/Grid.jss.ts | 10 +++- .../main/src/components/Grid/Grid.test.tsx | 20 +++++++- .../Grid/__snapshots__/Grid.test.tsx.snap | 48 +++++++++++++++++++ packages/main/src/components/Grid/index.tsx | 22 ++++++++- packages/main/src/enums/GridPosition.ts | 5 ++ packages/main/src/index.ts | 2 + packages/main/src/lib/GridPosition.ts | 3 ++ 7 files changed, 107 insertions(+), 3 deletions(-) create mode 100644 packages/main/src/enums/GridPosition.ts create mode 100644 packages/main/src/lib/GridPosition.ts diff --git a/packages/main/src/components/Grid/Grid.jss.ts b/packages/main/src/components/Grid/Grid.jss.ts index 4cd68a3f7cd..b0859c8593d 100644 --- a/packages/main/src/components/Grid/Grid.jss.ts +++ b/packages/main/src/components/Grid/Grid.jss.ts @@ -14,5 +14,13 @@ export const styles = { gridSpan9: { gridColumn: 'span 9' }, gridSpan10: { gridColumn: 'span 10' }, gridSpan11: { gridColumn: 'span 11' }, - gridSpan12: { gridColumn: 'span 12' } + gridSpan12: { gridColumn: 'span 12' }, + positionCenter: { + marginLeft: 'auto', + marginRight: 'auto' + }, + positionRight: { + marginLeft: 'auto', + marginRight: 0 + } }; diff --git a/packages/main/src/components/Grid/Grid.test.tsx b/packages/main/src/components/Grid/Grid.test.tsx index 97c62a08efa..f73988fe409 100644 --- a/packages/main/src/components/Grid/Grid.test.tsx +++ b/packages/main/src/components/Grid/Grid.test.tsx @@ -2,6 +2,7 @@ import { createPassThroughPropsTest } from '@shared/tests/utils'; import { mount } from 'enzyme'; import { Grid } from '@ui5/webcomponents-react/lib/Grid'; import React from 'react'; +import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition'; const GridContent = () => ( <> @@ -48,7 +49,7 @@ describe('Grid', () => { test('Custom Class Names and Styling', () => { const wrapper = mount( - + ); @@ -79,5 +80,22 @@ describe('Grid', () => { expect(wrapper.render()).toMatchSnapshot(); }); + test('Grid Position Center', () => { + const wrapper = mount( + + + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); + test('Grid Position Right', () => { + const wrapper = mount( + + + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); + createPassThroughPropsTest(Grid); }); 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 d4b575fdb10..5ab3bbae5e5 100644 --- a/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap +++ b/packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap @@ -24,6 +24,54 @@ exports[`Grid Custom Class Names and Styling 1`] = `
`; +exports[`Grid Grid Position Center 1`] = ` +
+
+
+
+
+
+
+
+`; + +exports[`Grid Grid Position Right 1`] = ` +
+
+
+
+
+
+
+
+`; + exports[`Grid Renders Children 1`] = `
= forwardRef((props: GridPropTypes, ref: Ref) => { const { + position, children, hSpacing = '1rem', vSpacing = '1rem', @@ -90,6 +97,19 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref) => { @@ -115,7 +135,7 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref Date: Thu, 14 May 2020 09:35:36 +0200 Subject: [PATCH 6/6] Update index.tsx --- packages/main/src/components/Grid/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 1372c280ff2..f151735aa3c 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -21,11 +21,11 @@ export interface GridPropTypes extends CommonProps { /** * Vertical spacing between the rows in the Grid. If not specified, then 1rem. */ - vSpacing?: CSSProperties['width']; + vSpacing?: CSSProperties['height']; /** * Horizontal spacing between the content in the Grid. If not specified, then 1rem. */ - hSpacing?: CSSProperties['height']; + hSpacing?: CSSProperties['width']; /** * Position of the Grid in the window or surrounding container. Possible values are "Center", "Left" and "Right". */