Merge pull request #904 from strapi/release/1.6.4

Author: joshuaellis

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system-docs",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "license": "MIT",
   "private": true,
   "dependencies": {
@@ -10,8 +10,8 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@strapi/design-system": "^1.6.3",
-    "@strapi/icons": "^1.6.3",
+    "@strapi/design-system": "^1.6.4",
+    "@strapi/icons": "^1.6.4",
     "qs": "^6.11.0",
     "react": "17",
     "react-copy-to-clipboard": "^5.1.0",

lerna.json

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

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -22,21 +22,22 @@
     "@floating-ui/react-dom": "^1.0.0",
     "@internationalized/number": "^3.1.1",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@uiw/react-codemirror": "4.8.1",
+    "@uiw/react-codemirror": "^4.19.7",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.3",
+    "@strapi/icons": "^1.6.4",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
     "@types/jest": "^29.2.6",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
+    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.1.11",
     "cross-env": "^7.0.3",

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

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import styled, { DefaultTheme } from 'styled-components';
 
+import { AccordionContext } from './AccordionContext';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
 import { useId } from '../helpers/useId';
 import { Typography } from '../Typography';
-import { AccordionContext } from './AccordionContext';
 
 interface GetBorderParams extends AccordionWrapperProps {
   theme: DefaultTheme;

packages/strapi-design-system/src/Accordion/AccordionContent.tsx

@@ -1,5 +1,5 @@
-import { Box, BoxProps } from '../Box';
 import { useAccordion } from './AccordionContext';
+import { Box, BoxProps } from '../Box';
 
 export type AccordionContentProps = BoxProps;
 

packages/strapi-design-system/src/Accordion/AccordionToggle.tsx

@@ -3,14 +3,14 @@ import * as React from 'react';
 import { CarretDown } from '@strapi/icons';
 import styled from 'styled-components';
 
+import { AccordionSize, AccordionTypography } from './Accordion';
+import { useAccordion } from './AccordionContext';
+import { getBackground } from './utils';
 import { Flex } from '../Flex';
 import { Icon } from '../Icon';
 import { Stack } from '../Stack';
 import { TextButton } from '../TextButton';
 import { Typography } from '../Typography';
-import { AccordionSize, AccordionTypography } from './Accordion';
-import { useAccordion } from './AccordionContext';
-import { getBackground } from './utils';
 
 const ToggleButton = styled(TextButton)<{ expanded: boolean }>`
   text-align: left;

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

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Information, CheckCircle, ExclamationMarkCircle, Cross } from '@strapi/icons';
 import styled from 'styled-components';
 
+import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
 import { Box, BoxProps } from '../Box';
 import { Flex } from '../Flex';
 import { buttonFocusStyle } from '../themes/utils';
 import { Typography } from '../Typography';
-import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
 
 const AlertBody = styled(Box)`
   flex: 1;

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

@@ -2,10 +2,10 @@ import * as React from 'react';
 
 import styled from 'styled-components';
 
+import { avatarSize, previewSize } from './constants';
 import { Box } from '../Box';
 import { Flex, FlexProps } from '../Flex';
 import { Typography, TypographyProps } from '../Typography';
-import { avatarSize, previewSize } from './constants';
 
 const AvatarImg = styled.img`
   border-radius: 50%;

packages/strapi-design-system/src/Avatar/AvatarGroup.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { Flex } from '../Flex';
 import { avatarSize } from './constants';
+import { Flex } from '../Flex';
 
 export const AvatarGroup = styled(Flex)`
   & > * + * {

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

@@ -2,40 +2,47 @@ import React from 'react';
 
 import styled from 'styled-components';
 
+import { Flex, FlexProps } from '../Flex';
 import { buttonFocusStyle } from '../themes/utils';
 
-export const BaseButtonWrapper = styled.button`
-  display: flex;
-  cursor: pointer;
-  padding: ${({ theme }) => theme.spaces[2]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+export const BaseButtonWrapper = styled(Flex)`
   svg {
     height: ${({ theme }) => theme.spaces[3]};
     width: ${({ theme }) => theme.spaces[3]};
-  }
-  svg {
+
     > g,
     path {
       fill: ${({ theme }) => theme.colors.neutral0};
     }
   }
+
   &[aria-disabled='true'] {
     pointer-events: none;
   }
 
   ${buttonFocusStyle}
 `;
 
-export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
+export interface BaseButtonProps<TElement extends HTMLElement = HTMLButtonElement> extends FlexProps<TElement> {
+  disabled?: boolean;
 }
 
 export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
   ({ disabled, children, ...props }, ref) => {
     return (
-      <BaseButtonWrapper ref={ref} aria-disabled={disabled} type="button" disabled={disabled} {...props}>
+      <BaseButtonWrapper
+        ref={ref}
+        aria-disabled={disabled}
+        as="button"
+        type="button"
+        disabled={disabled}
+        padding={2}
+        hasRadius
+        background="neutral0"
+        borderColor="neutral200"
+        cursor="pointer"
+        {...props}
+      >
         {children}
       </BaseButtonWrapper>
     );