fix padding and overrides

last-rev-llc · Dec 9, 2024 · 6f673ce · 6f673ce
1 parent 77418b3
commit 6f673ce
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 36 deletions.
diff --git a/packages/components/src/components/Section/Section.fragment.graphql b/packages/components/src/components/Section/Section.fragment.graphql
@@ -33,6 +33,10 @@ fragment Section_BaseFieldsFragment on Section {
   }
   variant
   styles
+  paddingLeft
+  paddingRight
+  paddingTop
+  paddingBottom
   # Style fields
   backgroundColor
   contentWidth

diff --git a/packages/components/src/components/Section/Section.theme.ts b/packages/components/src/components/Section/Section.theme.ts
@@ -7,7 +7,51 @@ export const defaultProps: ComponentsProps['Section'] = {};
 // https://mui.com/customization/theme-components/#global-style-overrides
 export const styleOverrides: ComponentsOverrides<Theme>['Section'] = {
   // Set some static styles
-  root: ({ theme, ownerState = {} }: { theme: Theme; ownerState?: SectionProps }) => ({}),
+  root: ({ theme, ownerState = {} }: { theme: Theme; ownerState?: SectionProps }) => ({
+    'position': 'relative',
+    'overflow': 'hidden',
+
+    '[class*="Section-introTextWrapper"]': {
+      width: '100%',
+      marginBottom: '1rem'
+    },
+
+    // 'paddingLeft': ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
+    // 'paddingRight': ownerState?.styles?.root?.paddingRight || theme.spacing(0),
+    // 'paddingTop': ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+    // 'paddingBottom': ownerState?.styles?.root?.paddingBottom || theme.spacing(0),
+
+    // [theme.breakpoints.up('sm')]: {
+    //   paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
+    //   paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(0),
+    //   paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+    //   paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
+    // },
+
+    // [theme.breakpoints.up('xl')]: {
+    //   paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+    //   paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
+    // },
+
+    '&.section-baseline': {
+      paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(2),
+      paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(2),
+      paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(4),
+      paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(4),
+
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(3),
+        paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(3),
+        paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(6),
+        paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(6)
+      },
+
+      [theme.breakpoints.up('xl')]: {
+        paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(10),
+        paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(10)
+      }
+    }
+  }),
 
   gridContainer: ({ theme, ownerState = {} }: { theme: Theme; ownerState?: SectionProps }) => ({
     maxWidth: '100%',
@@ -33,44 +77,37 @@ const createVariants = (theme: Theme, ownerState?: any): ComponentsVariants['Sec
   {
     props: {},
     style: {
-      'position': 'relative',
-      'overflow': 'hidden',
-
-      '[class*="Section-introTextWrapper"]': {
-        width: '100%',
-        marginBottom: '1rem'
-      },
-
-      'paddingLeft': ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
-      'paddingRight': ownerState?.styles?.root?.paddingRight || theme.spacing(0),
-      'paddingTop': ownerState?.styles?.root?.paddingTop || theme.spacing(0),
-      'paddingBottom': ownerState?.styles?.root?.paddingBottom || theme.spacing(0),
-
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
-        paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(0),
-        paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
-        paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
-      },
-
-      [theme.breakpoints.up('xl')]: {
-        paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
-        paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
-      },
-
+      // 'position': 'relative',
+      // 'overflow': 'hidden',
+      // '[class*="Section-introTextWrapper"]': {
+      //   width: '100%',
+      //   marginBottom: '1rem'
+      // },
+      // 'paddingLeft': ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
+      // 'paddingRight': ownerState?.styles?.root?.paddingRight || theme.spacing(0),
+      // 'paddingTop': ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+      // 'paddingBottom': ownerState?.styles?.root?.paddingBottom || theme.spacing(0),
+      // [theme.breakpoints.up('sm')]: {
+      //   paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(0),
+      //   paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(0),
+      //   paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+      //   paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
+      // },
+      // [theme.breakpoints.up('xl')]: {
+      //   paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(0),
+      //   paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(0)
+      // },
       '&.section-baseline': {
         paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(2),
         paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(2),
         paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(4),
         paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(4),
-
         [theme.breakpoints.up('sm')]: {
           paddingLeft: ownerState?.styles?.root?.paddingLeft || theme.spacing(3),
           paddingRight: ownerState?.styles?.root?.paddingRight || theme.spacing(3),
           paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(6),
           paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(6)
         },
-
         [theme.breakpoints.up('xl')]: {
           paddingTop: ownerState?.styles?.root?.paddingTop || theme.spacing(10),
           paddingBottom: ownerState?.styles?.root?.paddingBottom || theme.spacing(10)

diff --git a/packages/components/src/components/Section/Section.tsx b/packages/components/src/components/Section/Section.tsx
@@ -40,6 +40,7 @@ const Section = (inProps: SectionProps) => {
     <ErrorBoundary>
       <Root
         {...sidekick(sidekickLookup)}
+        ownerState={ownerState}
         data-testid={testId}
         sx={{
           ...styles?.root,
@@ -117,7 +118,7 @@ const Root = styled(Box, {
   name: 'Section',
   slot: 'Root',
   overridesResolver: (_, styles) => [styles.root]
-})<{ variant?: string; backgroundColor?: string }>(() => ({
+})<{ variant?: string; backgroundColor?: string; ownerState?: any }>(() => ({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',

diff --git a/packages/components/src/theme/index.ts b/packages/components/src/theme/index.ts
@@ -260,13 +260,13 @@ const createSchemeTheme = (schemeKey?: string) => {
             }
           },
 
-          Section: {
-            styleOverrides: {
-              root: {
-                'main > &': { maxWidth: '100vw' }
-              }
-            }
-          },
+          // Section: {
+          //   styleOverrides: {
+          //     root: {
+          //       'main > &': { maxWidth: '100vw' }
+          //     }
+          //   }
+          // },
           NavigationBar: {
             styleOverrides: {
               root: {