Merge pull request #1086 from strapi/release/1.7.8

[release]: 1.7.8

Author: gu-stav

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*", "docs"],
-  "version": "1.7.7",
+  "version": "1.7.8",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/primitives/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/ui-primitives",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-focus-scope": "1.0.2",
-    "@strapi/ui-primitives": "^1.7.7",
+    "@strapi/ui-primitives": "^1.7.8",
     "@uiw/react-codemirror": "^4.19.16",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.7",
+    "@strapi/icons": "^1.7.8",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",

packages/strapi-design-system/src/Box/Box.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 
 import styled, { CSSProperties, DefaultTheme } from 'styled-components';
 
-import handleResponsiveValues from '../helpers/handleResponsiveValues';
+import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';
 import { extractStyleFromTheme } from '../helpers/theme';
 
-type SpaceProps = keyof DefaultTheme['spaces'] | Array<keyof DefaultTheme['spaces']>;
-
 type DefaultThemeOrCSSProp<T extends keyof DefaultTheme, K extends keyof CSSProperties> =
   | keyof DefaultTheme[T]
   | CSSProperties[K];
@@ -25,7 +23,6 @@ export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Rea
     | 'animation'
     | 'textAlign'
     | 'textTransform'
-    | 'lineHeight'
   > & {
     /**
      * JavaScript hover handler
@@ -71,27 +68,27 @@ export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Rea
     /**
      * Padding. Supports responsive values
      */
-    padding?: SpaceProps;
+    padding?: ResponsiveValue;
     /**
      * Padding bottom. Supports responsive values
      */
-    paddingBottom?: SpaceProps;
+    paddingBottom?: ResponsiveValue;
     /**
      * Padding left. Supports responsive values
      */
-    paddingLeft?: SpaceProps;
+    paddingLeft?: ResponsiveValue;
     /**
      * Padding right. Supports responsive values
      */
-    paddingRight?: SpaceProps;
+    paddingRight?: ResponsiveValue;
     /**
      * Padding top. Supports responsive values
      */
-    paddingTop?: SpaceProps;
-    marginLeft?: SpaceProps;
-    marginBottom?: SpaceProps;
-    marginRight?: SpaceProps;
-    marginTop?: SpaceProps;
+    paddingTop?: ResponsiveValue;
+    marginLeft?: ResponsiveValue;
+    marginBottom?: ResponsiveValue;
+    marginRight?: ResponsiveValue;
+    marginTop?: ResponsiveValue;
     /**
      * Shadow name (see `theme.shadows`)
      */
@@ -101,6 +98,7 @@ export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Rea
      */
     shrink?: CSSProperties['flexShrink'];
 
+    lineHeight?: DefaultThemeOrCSSProp<'lineHeights', 'lineHeight'>;
     width?: DefaultThemeOrCSSProp<'spaces', 'width'>;
     minWidth?: DefaultThemeOrCSSProp<'spaces', 'minWidth'>;
     maxWidth?: DefaultThemeOrCSSProp<'spaces', 'maxWidth'>;
@@ -215,7 +213,7 @@ export const Box = styled.div.withConfig<BoxProps>({
   // Text
   text-align: ${({ textAlign }) => textAlign};
   text-transform: ${({ textTransform }) => textTransform};
-  line-height: ${({ lineHeight }) => lineHeight};
+  line-height: ${({ theme, lineHeight }) => extractStyleFromTheme(theme.lineHeights, lineHeight, lineHeight)};
 
   // Cursor
   cursor: ${({ cursor }) => cursor};

packages/strapi-design-system/src/Divider/Divider.tsx

@@ -7,7 +7,7 @@ export interface DividerProps extends Omit<BoxProps<'hr'>, 'as' | 'background'>
    * @preserve
    * @deprecated use `margin` style props instead
    */
-  unsetMargin: boolean;
+  unsetMargin?: boolean;
 }
 
 const DividerWrapper = styled(Box)<DividerProps>`

packages/strapi-design-system/src/Flex/Flex.tsx

@@ -1,7 +1,7 @@
-import styled, { CSSProperties, DefaultTheme } from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 
 import { Box, BoxProps } from '../Box';
-import handleResponsiveValues from '../helpers/handleResponsiveValues';
+import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';
 
 /**
  * Prevents these attributes from being spread on the DOM node
@@ -16,7 +16,7 @@ export type FlexProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Bo
   /**
    * Supports responsive values
    */
-  gap?: keyof DefaultTheme['spaces'] | Array<keyof DefaultTheme['spaces']>;
+  gap?: ResponsiveValue;
   inline?: boolean;
   justifyContent?: CSSProperties['justifyContent'];
   wrap?: CSSProperties['flexWrap'];

packages/strapi-design-system/src/Grid/Grid.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import styled from 'styled-components';
+
+import { Box, BoxProps } from '../Box';
+import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';
+
+export interface GridProps extends BoxProps {
+  gridCols?: number;
+  gap?: ResponsiveValue;
+}
+
+const GridWrapper = styled(Box)<Required<Pick<GridProps, 'gridCols' | 'gap'>>>`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
+  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
+`;
+
+export const Grid: React.FC<GridProps> = ({ gap = '0', gridCols = 12, ...props }) => {
+  return <GridWrapper gap={gap} gridCols={gridCols} {...props} />;
+};

packages/strapi-design-system/src/Grid/Grid.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+import { Box, BoxProps } from '../Box';
+
+export interface GridItemProps extends BoxProps {
+  col: number;
+  s?: number;
+  xs?: number;
+}
+
+export const GridItem = styled(Box)<GridItemProps>`
+  grid-column: span ${({ col }) => col};
+  max-width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.tablet} {
+    grid-column: span ${({ s }) => s};
+  }
+
+  ${({ theme }) => theme.mediaQueries.mobile} {
+    grid-column: span ${({ xs }) => xs};
+  }
+`;

packages/strapi-design-system/src/Grid/GridContext.js

@@ -0,0 +1,24 @@
+import { Flex } from '../Flex';
+
+interface ActionLayoutProps {
+  endActions?: React.ReactNode;
+  startActions?: React.ReactNode;
+}
+
+export const ActionLayout = ({ startActions, endActions }: ActionLayoutProps) => {
+  if (!startActions || !endActions) {
+    return null;
+  }
+
+  return (
+    <Flex justifyContent="space-between" alignItems="flex-start" paddingBottom={4} paddingLeft={10} paddingRight={10}>
+      <Flex gap={2} wrap="wrap">
+        {startActions}
+      </Flex>
+
+      <Flex gap={2} shrink={0} wrap="wrap">
+        {endActions}
+      </Flex>
+    </Flex>
+  );
+};

packages/strapi-design-system/src/Grid/GridItem.js

@@ -0,0 +1,13 @@
+import { Box } from '../Box';
+
+interface ContentLayoutProps {
+  children: React.ReactNode;
+}
+
+export const ContentLayout = ({ children }: ContentLayoutProps) => {
+  return (
+    <Box paddingLeft={10} paddingRight={10}>
+      {children}
+    </Box>
+  );
+};

packages/strapi-design-system/src/Grid/GridItem.tsx

@@ -1,12 +1,7 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 export const GridLayout = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: ${({ theme }) => theme.spaces[4]};
 `;
-
-GridLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};