fix(layout): ability to override breakpoint during theme (#1512)

Co-authored-by: Alexandr Isaev <[email protected]>
gravity-ui · Apr 16, 2024 · bad4fa9 · bad4fa9
1 parent f93496c
commit bad4fa9
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 78 deletions.
diff --git a/src/components/layout/Col/Col.scss b/src/components/layout/Col/Col.scss
@@ -6,16 +6,12 @@
     flex-basis: 0;
     max-width: 100%;
 
-    @each $media, $_ in v.$MEDIA_TO_BREAKPOINT_WIDTH {
-        @each $size, $value in v.$COL_SIZE {
-            @include v.use-media($media) {
-                &_s-#{$media}_#{$size} {
-                    box-sizing: border-box;
-                    flex-grow: 0;
-                    flex-basis: $value;
-                    max-width: $value;
-                }
-            }
+    @each $size, $value in v.$COL_SIZE {
+        &_size_#{$size} {
+            box-sizing: border-box;
+            flex-grow: 0;
+            flex-basis: $value;
+            max-width: $value;
         }
     }
 }
diff --git a/src/components/layout/Col/Col.tsx b/src/components/layout/Col/Col.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import type {QAProps} from '../../types';
 import {block} from '../../utils/cn';
+import {useLayoutContext} from '../hooks/useLayoutContext';
 import type {ColSize, MediaPartial} from '../types';
 import {makeCssMod} from '../utils';
 
@@ -41,14 +42,15 @@ export interface ColProps extends MediaPartial<ColSize>, QAProps {
  * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#col
  */
 export const Col = ({children, style, className, qa, ...media}: ColProps) => {
-    const mods = Object.entries(media).reduce<Record<string, string>>((acc, [mod, modSize]) => {
-        acc[`s-${mod}`] = makeCssMod(modSize);
-
-        return acc;
-    }, {});
+    const {getClosestMediaProps} = useLayoutContext();
+    const sizeModValue = getClosestMediaProps(media);
 
     return (
-        <div style={style} className={b(mods, className)} data-qa={qa}>
+        <div
+            style={style}
+            className={b({size: sizeModValue ? makeCssMod(sizeModValue) : undefined}, className)}
+            data-qa={qa}
+        >
             {children}
         </div>
     );

diff --git a/src/components/layout/Col/__stories__/Col.stories.tsx b/src/components/layout/Col/__stories__/Col.stories.tsx
@@ -107,6 +107,61 @@ Dynamic.args = {
     space: '2',
 };
 
+const theme = {
+    breakpoints: {
+        s: 500,
+        m: 500,
+        l: 1200,
+        xl: 1200,
+        xxl: 1900,
+        xxxl: 1900,
+    },
+};
+
+const DynamicWithOverriddenBreakpointsTemplate: StoryFn<{space?: Space; spaceRow?: Space}> = ({
+    space = '2',
+    spaceRow,
+}) => (
+    <LayoutPresenter theme={theme}>
+        <Container spaceRow="8">
+            <Row {...{space, spaceRow}}>
+                <ColPresenter s="1" l="12" />
+                <ColPresenter s="1" l="12" />
+                <ColPresenter s="1" l="11" />
+                <ColPresenter s="1" l="1" />
+                <ColPresenter s="1" l="10" />
+                <ColPresenter s="1" l="2" />
+                <ColPresenter s="1" l="9" />
+                <ColPresenter s="1" l="3" />
+                <ColPresenter s="1" l="8" />
+                <ColPresenter s="1" l="4" />
+                <ColPresenter s="1" l="7" />
+                <ColPresenter s="1" l="5" />
+            </Row>
+            <Row {...{space, spaceRow}}>
+                <ColPresenter s="7" l="1" />
+                <ColPresenter s="5" l="1" />
+                <ColPresenter s="8" l="1" />
+                <ColPresenter s="4" l="1" />
+                <ColPresenter s="9" l="1" />
+                <ColPresenter s="3" l="1" />
+                <ColPresenter s="10" l="1" />
+                <ColPresenter s="2" l="1" />
+                <ColPresenter s="11" l="1" />
+                <ColPresenter s="1" l="1" />
+                <ColPresenter s="12" l="1" />
+                <ColPresenter s="12" l="1" />
+            </Row>
+        </Container>
+    </LayoutPresenter>
+);
+
+export const DynamicWithOverriddenBreakpoints = DynamicWithOverriddenBreakpointsTemplate.bind({});
+
+DynamicWithOverriddenBreakpoints.args = {
+    space: '2',
+};
+
 const AllModsTemplate: StoryFn<ColProps & {space?: Space; spaceRow?: Space}> = ({
     space = '3',
     spaceRow,

diff --git a/src/components/layout/Container/Container.scss b/src/components/layout/Container/Container.scss
@@ -5,12 +5,6 @@
     max-width: 100%;
     height: 100%;
 
-    @each $media, $breakpoint-width in v.$MEDIA_TO_BREAKPOINT_WIDTH {
-        &_mw_#{$media} {
-            max-width: $breakpoint-width;
-        }
-    }
-
     @each $space, $value in v.$SPACE {
         // space row - space between Row components
         &_sr_#{$space} {

diff --git a/src/components/layout/Container/Container.tsx b/src/components/layout/Container/Container.tsx
@@ -63,15 +63,24 @@ export interface ContainerProps extends QAProps {
  */
 export const Container = ({
     children,
-    style,
+    style: propsStyle,
     as: Tag = 'div',
     className,
     maxWidth,
     gutters,
     spaceRow,
     qa,
 }: ContainerProps) => {
-    const {getClosestMediaProps, containerThemeProps} = useContainerThemeProps();
+    const {getClosestMediaProps, containerThemeProps, breakpoints} = useContainerThemeProps();
+
+    const style = {
+        ...(maxWidth
+            ? {
+                  maxWidth: breakpoints[maxWidth],
+              }
+            : {}),
+        ...propsStyle,
+    };
 
     let sr: string | undefined;
 
@@ -90,7 +99,6 @@ export const Container = ({
             style={style}
             className={b(
                 {
-                    mw: maxWidth,
                     sr,
                 },
                 gutters === false

diff --git a/src/components/layout/Container/useContainerThemeProps.ts b/src/components/layout/Container/useContainerThemeProps.ts
@@ -34,5 +34,6 @@ export const useContainerThemeProps = () => {
     return {
         getClosestMediaProps,
         containerThemeProps,
+        breakpoints: theme.breakpoints,
     };
 };
diff --git a/src/components/layout/LayoutProvider/LayoutProvider.tsx b/src/components/layout/LayoutProvider/LayoutProvider.tsx
@@ -25,7 +25,7 @@ export function LayoutProvider({
     theme: override,
     initialMediaQuery,
 }: LayoutProviderProps) {
-    const theme = makeLayoutDefaultTheme({override});
+    const theme = React.useMemo(() => makeLayoutDefaultTheme({override}), [override]);
     const activeMediaQuery = useCurrentActiveMediaQuery(theme.breakpoints, initialMediaQuery);
 
     return (

diff --git a/src/components/layout/LayoutProvider/__stories__/Layout.mdx b/src/components/layout/LayoutProvider/__stories__/Layout.mdx
@@ -118,6 +118,21 @@ We use `mobile-first` approach. It means that you should adapt you app to deskto
 -   `xxl` - 1400px;
 -   `xxxl` - 1920px;
 
+> To override breakpoint use `theme` breakpoints property;
+
+    ```tsx
+    export const APP_LAYOUT_THEME: LayoutTheme = {
+        breakpoints: {
+            s: 320,
+            l: 980,
+        }
+    };
+
+    <LayoutProvider theme={APP_LAYOUT_THEME}>
+        {...}
+    </LayoutProvider>
+    ```
+
 ## LayoutProvider and LayoutTheme
 
 Through `LayoutProvider` components can get default props which are corresponding to different screen sizes.

diff --git a/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx b/src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {Text} from '../../../Text';
+import type {LayoutTheme} from '../../../layout';
 import {Flex} from '../../Flex/Flex';
 import {LayoutProvider} from '../../LayoutProvider/LayoutProvider';
 import {useLayoutContext} from '../../hooks/useLayoutContext';
@@ -9,10 +10,14 @@ import {sp} from '../../spacing/spacing';
 interface LayoutPresenterProps {
     children?: React.ReactNode;
     title?: string;
+    theme?: LayoutTheme;
 }
 
 function Title({title}: {title?: string}) {
-    const {activeMediaQuery} = useLayoutContext();
+    const {
+        activeMediaQuery,
+        theme: {breakpoints},
+    } = useLayoutContext();
     return (
         <Flex direction="column" space="5" className={sp({mb: '5'})}>
             {title && (
@@ -21,15 +26,16 @@ function Title({title}: {title?: string}) {
                 </Text>
             )}
             <Text color="secondary" as="div">
-                Active media query: {activeMediaQuery}
+                Active media query: {activeMediaQuery}, breakpoint value:{' '}
+                {breakpoints[activeMediaQuery]}
             </Text>
         </Flex>
     );
 }
 
-export const LayoutPresenter = ({children, title}: LayoutPresenterProps) => {
+export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps) => {
     return (
-        <LayoutProvider>
+        <LayoutProvider theme={theme}>
             <Title title={title} />
             <div
                 style={{

diff --git a/src/components/layout/types.ts b/src/components/layout/types.ts
@@ -83,8 +83,6 @@ interface ComponentProps {
 export interface LayoutTheme {
     /**
      * Override default breakpoints values.
-     *
-     * @important **you must override corresponding scss variables**
      */
     breakpoints: MediaProps<number>;
     /**

diff --git a/src/components/layout/utils/index.ts b/src/components/layout/utils/index.ts
@@ -22,7 +22,7 @@ const mediaOrder = ['s', 'm', 'l', 'xl', 'xxl', 'xxxl'] as const;
 
 export const getClosestMediaPropsFactory =
     (currentActive: MediaType) =>
-    <T = unknown>(medias: MediaPartial<T> = {}): T | undefined => {
+    <T>(medias: MediaPartial<T> = {}): T | undefined => {
         if (!currentActive) {
             return undefined;
         }

diff --git a/src/components/layout/variables.scss b/src/components/layout/variables.scss
@@ -7,13 +7,6 @@ $flexBlock: '.#{variables.$ns}flex';
 $containerBlock: '.#{variables.$ns}container';
 $spacingBlock: '.#{variables.$ns}s';
 
-$breakpoint-s: 576px !default;
-$breakpoint-m: 768px !default;
-$breakpoint-l: 1080px !default;
-$breakpoint-xl: 1200px !default;
-$breakpoint-xxl: 1400px !default;
-$breakpoint-xxxl: 1920px !default;
-
 $COL_SIZE: (
     1: 8.33333333%,
     2: 16.66666667%,
@@ -43,41 +36,3 @@ $SPACE: (
     9: var(--g-spacing-9),
     10: var(--g-spacing-10),
 );
-
-$MEDIA_TO_BREAKPOINT_WIDTH: (
-    's' $breakpoint-s,
-    'm' $breakpoint-m,
-    'l' $breakpoint-l,
-    'xl' $breakpoint-xl,
-    'xxl' $breakpoint-xxl,
-    'xxxl' $breakpoint-xxxl
-);
-
-// mobile first
-// for example if we set `m` breakpoint condition, then the same condition will be applied to `l`, `xl`, `xxl` and 'xxxl' breakpoints
-
-@mixin use-media($size) {
-    @if $size == s {
-        @content;
-    } @else if $size == m {
-        @media (min-width: $breakpoint-m) {
-            @content;
-        }
-    } @else if $size == l {
-        @media (min-width: $breakpoint-l) {
-            @content;
-        }
-    } @else if $size == xl {
-        @media (min-width: $breakpoint-xl) {
-            @content;
-        }
-    } @else if $size == xxl {
-        @media (min-width: $breakpoint-xxl) {
-            @content;
-        }
-    } @else if $size == xxxl {
-        @media (min-width: $breakpoint-xxxl) {
-            @content;
-        }
-    }
-}