refactor(Grid): use CSS Grid Layout

packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Create a Form accepts both label and labelText 1`] = `
 <div
-  class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+  class="Grid-grid-0"
 >
   <div
-    class="Grid-gridSpan-0 Grid-gridSpan6-0"
+    class="Grid-gridSpan6-0"
   >
     <div>
       <div
@@ -95,10 +95,10 @@ Array [
     Test form
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan6-0"
+      class="Grid-gridSpan6-0"
     >
       <div>
         <div
@@ -164,10 +164,10 @@ Array [
     To be Form title
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan6-0"
+      class="Grid-gridSpan6-0"
     >
       <div>
         <div
@@ -233,10 +233,10 @@ Array [
     Test form
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -296,7 +296,7 @@ Array [
       </div>
     </div>
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -368,10 +368,10 @@ Array [
     Test form
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -431,7 +431,7 @@ Array [
       </div>
     </div>
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -503,10 +503,10 @@ Array [
     Test form
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -566,7 +566,7 @@ Array [
       </div>
     </div>
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan12-0"
+      class="Grid-gridSpan12-0"
     >
       <div>
         <ui5-title
@@ -638,10 +638,10 @@ Array [
     Test form
   </ui5-title>,
   <div
-    class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
+    class="Grid-grid-0"
   >
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan6-0"
+      class="Grid-gridSpan6-0"
     >
       <div>
         <ui5-title
@@ -701,7 +701,7 @@ Array [
       </div>
     </div>
     <div
-      class="Grid-gridSpan-0 Grid-gridSpan6-0"
+      class="Grid-gridSpan6-0"
     >
       <div>
         <ui5-title

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

@@ -1,142 +1,26 @@
-const getWidthForSpan = (width, hSpace = 0) => {
-  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
+  }
 };

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 (
-    <Grid>
-      <div style={{ backgroundColor: 'lightgreen' }}>Div 1</div>
+    <Grid
+      defaultSpan={text('defaultSpan', 'XL3 L3 M6 S12')}
+      defaultIndent={text('defaultIndent', 'XL0 L0 M0 S0')}
+      vSpacing={text('vSpacing', '1rem')}
+      hSpacing={text('hSpacing', '1rem')}
+    >
+      <div style={{ backgroundColor: 'lightgreen' }} data-layout-span="XL8 L8 M8 S12" data-layout-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>
       <div style={{ backgroundColor: 'yellow' }}>Div 2</div>
       <div style={{ backgroundColor: 'cyan' }}>Div 3</div>
       <div style={{ backgroundColor: 'orange' }}>Div 4</div>
-      <div style={{ backgroundColor: '#f0ab00' }}>Div 5</div>
-      <div style={{ backgroundColor: 'red' }}>Div 6</div>
+      <div style={{ backgroundColor: 'red' }}>Div 5</div>
+      <div style={{ backgroundColor: 'blue' }}>Div 6</div>
     </Grid>
   );
 };

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(
-      <Grid width="60%" style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
+      <Grid style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
         <GridContent />
       </Grid>
     );
@@ -65,15 +65,15 @@ describe('Grid', () => {
             width: '100%',
             backgroundColor: '#A9EAFF'
           }}
-          data-layout={{ span: 'XL12 L12 M12 S12' }}
+          data-layout-span="XL12 L12 M12 S12"
         />
         <div
           style={{
             height: '6rem',
             width: '100%',
             backgroundColor: '#A9EAFF'
           }}
-          data-layout={{ indent: 'XL1 L1 M1 S1' }}
+          data-layout-indent="XL1 L1 M1 S1"
         />
       </Grid>
     );
@@ -82,15 +82,15 @@ describe('Grid', () => {
 
   test('Grid Position Center', () => {
     const wrapper = mount(
-      <Grid width="60%" position={GridPosition.Center}>
+      <Grid style={{ width: '60%' }} position={GridPosition.Center}>
         <GridContent />
       </Grid>
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
   test('Grid Position Right', () => {
     const wrapper = mount(
-      <Grid width="60%" position={GridPosition.Right}>
+      <Grid style={{ width: '60%' }} position={GridPosition.Right}>
         <GridContent />
       </Grid>
     );