paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

Add better support for breakpoints

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2024-12-15 09:37:00 +00:00
parent 5a2f83f460
commit f7a16565a3
11 changed files with 279 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/.storybook/preview.tsx
+46 -1
View File
@@ -11,6 +11,7 @@ import '../src/css/components.css';
// Custom themes
import './themes/backstage.css';
import { ThemeProvider } from '../src/theme/context';
const preview: Preview = {
parameters: {
@@ -28,6 +29,46 @@ const preview: Preview = {
method: 'alphabetical',
},
},
viewport: {
viewports: {
small: {
name: 'Small',
styles: {
width: '640px',
height: '100%',
},
},
medium: {
name: 'Medium',
styles: {
width: '768px',
height: '100%',
},
},
large: {
name: 'Large',
styles: {
width: '1024px',
height: '100%',
},
},
xlarge: {
name: 'XLarge',
styles: {
width: '1280px',
height: '100%',
},
},
'2xl': {
name: '2XL',
styles: {
width: '1536px',
height: '100%',
},
},
},
defaultViewport: 'small',
},
},
decorators: [
withThemeByDataAttribute<ReactRenderer>({
@@ -48,7 +89,11 @@ const preview: Preview = {
'var(--canon-background)';
});
return <Story />;
return (
<ThemeProvider>
<Story />
</ThemeProvider>
);
},
],
};
packages/canon/src/components/Text/Text.stories.tsx
+10
View File
@@ -31,3 +31,13 @@ export const Default: Story = {
' Lorem ipsum dolor sit amet consectetur. Nec arcu vel lacus magna adipiscing nisi mauris tortor viverra. Enim rhoncus quisque consectetur ligula diam ac lacus massa. Id interdum id pellentesque justo ut massa nibh amet. Odio massa in scelerisque tortor massa integer purus amet enim. Eros sit neque nullam facilisis. Purus massa dignissim aliquet purus eu in. Urna consequat ullamcorper arcu amet dictumst. Commodo praesent turpis fringilla tristique congue volutpat in. Nulla in nulla ultrices lacus. In ultrices id tellus ut. Semper duis in in non proin et pulvinar. Sit amet vulputate lorem sit ipsum quis amet pulvinar ultricies. Imperdiet enim molestie habitant eget. Aenean mollis aenean dolor sodales tempus blandit.',
},
};
export const Responsive: Story = {
args: {
...Default.args,
variant: {
xs: 'label',
md: 'body',
},
},
};
packages/canon/src/components/Text/Text.tsx
+10 -3
View File
@@ -16,6 +16,8 @@
import React, { forwardRef } from 'react';
import { TextProps } from './types';
import { useTheme } from '../../theme/context';
import { getResponsiveValue } from '../../utils/getResponsiveValue';
export const Text = forwardRef<HTMLParagraphElement, TextProps>(
(props, ref) => {
@@ -26,13 +28,18 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
...restProps
} = props;
const { breakpoint } = useTheme();
const responsiveVariant = getResponsiveValue(variant, breakpoint);
const responsiveWeight = getResponsiveValue(weight, breakpoint);
return (
<p
ref={ref}
{...restProps}
className={`text ${variant ? `text-${variant}` : ''} ${
weight ? `text-${weight}` : ''
}`}
className={`text ${
responsiveVariant ? `text-${responsiveVariant}` : ''
} ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
>
{children}
</p>
packages/canon/src/components/Text/types.ts
+9 -2
View File
@@ -14,9 +14,16 @@
* limitations under the License.
*/
import { Breakpoint } from '../../layout/types';
/** @public */
export interface TextProps {
children: React.ReactNode;
variant?: 'subtitle' | 'body' | 'caption' | 'label';
weight?: 'regular' | 'bold';
variant?:
| 'subtitle'
| 'body'
| 'caption'
| 'label'
| Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
}
packages/canon/src/css/components.css
+1
View File
@@ -24,3 +24,4 @@
@import '../components/Checkbox/styles.css';
@import '../components/Table/styles.css';
@import '../components/Text/styles.css';
@import '../components/Heading/styles.css';
packages/canon/src/css/core.css
+5 -5
View File
@@ -65,12 +65,12 @@ body {
--canon-font-size-caption: 0.75rem; /* 12px */
--canon-font-size-body: 0.875rem; /* 14px */
--canon-font-size-subtitle: 1rem; /* 16px */
--canon-font-size-title1: 1.25rem; /* 20px */
--canon-font-size-title2: 1.5rem; /* 24px */
--canon-font-size-title5: 1.25rem; /* 20px */
--canon-font-size-title4: 1.5rem; /* 24px */
--canon-font-size-title3: 2rem; /* 32px */
--canon-font-size-title4: 3rem; /* 48px */
--canon-font-size-title5: 4rem; /* 64px */
--canon-font-size-display: 5.75rem; /* 48px */
--canon-font-size-title2: 3rem; /* 48px */
--canon-font-size-title1: 4rem; /* 64px */
--canon-font-size-display: 5.75rem; /* 92px */
/* Spacing */
--canon-spacing-5xs: 0.125rem; /* 2px */
packages/canon/src/hooks/useIsomorphicLayoutEffect.ts
+19
View File
@@ -0,0 +1,19 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useEffect, useLayoutEffect } from 'react';
export const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
packages/canon/src/hooks/useMediaQuery.ts
+76
View File
@@ -0,0 +1,76 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState } from 'react';
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
type UseMediaQueryOptions = {
defaultValue?: boolean;
initializeWithValue?: boolean;
};
const IS_SERVER = typeof window === 'undefined';
export function useMediaQuery(
query: string,
{
defaultValue = false,
initializeWithValue = true,
}: UseMediaQueryOptions = {},
): boolean {
const getMatches = (query: string): boolean => {
if (IS_SERVER) {
return defaultValue;
}
return window.matchMedia(query).matches;
};
const [matches, setMatches] = useState<boolean>(() => {
if (initializeWithValue) {
return getMatches(query);
}
return defaultValue;
});
// Handles the change event of the media query.
function handleChange() {
setMatches(getMatches(query));
}
useIsomorphicLayoutEffect(() => {
const matchMedia = window.matchMedia(query);
// Triggered at the first client-side load and if query changes
handleChange();
// Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
if (matchMedia.addListener) {
matchMedia.addListener(handleChange);
} else {
matchMedia.addEventListener('change', handleChange);
}
return () => {
if (matchMedia.removeListener) {
matchMedia.removeListener(handleChange);
} else {
matchMedia.removeEventListener('change', handleChange);
}
};
}, [query]);
return matches;
}
packages/canon/src/theme/context.tsx
+39 -8
View File
@@ -17,28 +17,59 @@
import React, { createContext, useContext, ReactNode } from 'react';
import { IconMap, IconNames } from '../components/Icon/types';
import { defaultIcons } from '../components/Icon/icons';
import { useMediaQuery } from '../hooks/useMediaQuery';
import { Breakpoints } from '../types';
const defaultBreakpoints: Breakpoints = {
xs: '0px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
};
interface ThemeContextProps {
icons: IconMap;
breakpoint: keyof Breakpoints;
}
const ThemeContext = createContext<ThemeContextProps>({
icons: defaultIcons,
breakpoint: 'md',
});
interface ThemeProviderProps {
children?: ReactNode;
overrides?: Partial<Record<IconNames, React.ComponentType>>;
breakpoints?: Partial<Breakpoints>;
}
/** @public */
export const ThemeProvider = ({
children,
overrides,
}: {
children: ReactNode;
overrides: Partial<Record<IconNames, React.ComponentType>>;
}) => {
export const ThemeProvider = (props: ThemeProviderProps) => {
const { children, overrides, breakpoints = defaultBreakpoints } = props;
// Merge provided overrides with default icons
const combinedIcons = { ...defaultIcons, ...overrides };
const isBreakpointSm = useMediaQuery(`(min-width: ${breakpoints.sm})`);
const isBreakpointMd = useMediaQuery(`(min-width: ${breakpoints.md})`);
const isBreakpointLg = useMediaQuery(`(min-width: ${breakpoints.lg})`);
const isBreakpointXl = useMediaQuery(`(min-width: ${breakpoints.xl})`);
const isBreakpoint2xl = useMediaQuery(`(min-width: ${breakpoints['2xl']})`);
// Determine the current breakpoint
const breakpoint = (() => {
if (isBreakpoint2xl) return '2xl';
if (isBreakpointXl) return 'xl';
if (isBreakpointLg) return 'lg';
if (isBreakpointMd) return 'md';
if (isBreakpointSm) return 'sm';
return 'xs';
})();
return (
<ThemeContext.Provider value={{ icons: combinedIcons }}>
<ThemeContext.Provider value={{ icons: combinedIcons, breakpoint }}>
{children}
</ThemeContext.Provider>
);
packages/canon/src/types.ts
+23
View File
@@ -0,0 +1,23 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface Breakpoints {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
}
packages/canon/src/utils/getResponsiveValue.ts
+41
View File
@@ -0,0 +1,41 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Breakpoints } from '../types';
export const getResponsiveValue = (
value: any,
breakpoint: keyof Breakpoints,
) => {
if (typeof value === 'object') {
const breakpointsOrder: (keyof Breakpoints)[] = [
'xs',
'sm',
'md',
'lg',
'xl',
'2xl',
];
const index = breakpointsOrder.indexOf(breakpoint);
for (let i = index; i >= 0; i--) {
if (value[breakpointsOrder[i]]) {
return value[breakpointsOrder[i]];
}
}
return value['xs'];
}
return value;
};