refactor(container): rename containerFluidMargin to containerMargin and update related styles and stories

Author: imagine10255

example/src/components/primary/Container/Container.stories.tsx

@@ -95,10 +95,10 @@ export const WithSpacerBreakpoints: Story = {
 };
 
 
-export const WithContainerFluidMargin: Story = {
+export const WithContainerMargin: Story = {
     decorators:  (Story) => (
         <GridThemeProvider gridTheme={{
-            containerFluidMargin: '20px',
+            containerMargin: '20px',
         }}>
             <Story />
         </GridThemeProvider>
@@ -109,10 +109,10 @@ export const WithContainerFluidMargin: Story = {
 };
 
 
-export const WithContainerFluidMarginBreakpoints: Story = {
+export const WithContainerMarginBreakpoints: Story = {
     decorators:  (Story) => (
         <GridThemeProvider gridTheme={{
-            containerFluidMargin: {
+            containerMargin: {
                 xs: '40px',
                 lg: '80px',
             },

src/GridSystem/Container/utils.ts

@@ -10,30 +10,30 @@ import {IContainerProps, NoXsMediaSize,TStyledProps} from '../../types';
  * @param props
  */
 export const createFluidBreakpoint = (props: TStyledProps<IContainerProps>) => {
-    const containerFluidMargin = props.theme[themeName]?.containerFluidMargin;
+    const containerMargin = props.theme[themeName]?.containerMargin;
 
-    if(!containerFluidMargin){
+    if(!containerMargin){
         return undefined;
     }
 
-    if(typeof containerFluidMargin === 'string'){
+    if(typeof containerMargin === 'string'){
         return `
-            --acrool-container-fluid-padding: ${containerFluidMargin};
+            --acrool-container-padding: ${containerMargin};
         `;
     }
 
     return mediaSizes.reduce<string[]>((curr, sizeName) => {
 
-        const rwdContainerFluidMargin = containerFluidMargin[sizeName];
-        if(rwdContainerFluidMargin){
+        const rwdContainerMargin = containerMargin[sizeName];
+        if(rwdContainerMargin){
             if(sizeName === 'xs'){
                 return curr.concat(`
-                    --acrool-container-fluid-padding: ${rwdContainerFluidMargin};
+                    --acrool-container-padding: ${rwdContainerMargin};
                 `);
             }
 
             return curr.concat(media[sizeName]`
-                   --acrool-container-fluid-padding: ${rwdContainerFluidMargin};
+                   --acrool-container-padding: ${rwdContainerMargin};
             `);
         }
 

src/styles.scss

@@ -258,8 +258,8 @@ $directions: (
     width: 100%;
     margin-right: auto;
     margin-left: auto;
-    padding-right: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-fluid-padding, 0px));
-    padding-left: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-fluid-padding, 0px));
+    padding-right: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-padding, 0px));
+    padding-left: calc((var(--acrool-gutter-x) * 0.5) + var(--acrool-container-padding, 0px));
 }
 
 [data-grid="row"]{

src/types.ts

@@ -74,7 +74,7 @@ export interface IGridThemeProviderProps {
 
 export interface IGridSetting {
     spacer: TGutterWidth|Partial<IBreakpointsTGutterWidth>
-    containerFluidMargin?: TGutterWidth|Partial<IBreakpointsTGutterWidth>
+    containerMargin?: TGutterWidth|Partial<IBreakpointsTGutterWidth>
     gridColumns: number
     gridBreakpoints: IBreakpoints
     containerMaxWidths: TContainerMaxWidths