Merge pull request #926 from strapi/release/1.6.6

Author: joshuaellis

.github/workflows/tests.yml

@@ -29,7 +29,7 @@ jobs:
         run: yarn bootstrap
 
       - name: Build
-        run: yarn build
+        run: yarn build --ignore=@strapi/design-system-docs
 
       - name: Run TSC
         run: yarn test:ts
@@ -75,7 +75,7 @@ jobs:
         run: yarn bootstrap
 
       - name: Build
-        run: yarn build
+        run: yarn build --ignore=@strapi/design-system-docs
 
       - name: Unit / Integration tests
         run: yarn test

.gitignore

@@ -9,4 +9,5 @@ dist
 storybook-static
 test-results
 playwright-report
-packages/strapi-icons/src
+packages/strapi-icons/src
+coverage

docs/package.json

@@ -25,6 +25,7 @@
   },
   "scripts": {
     "build": "build-storybook",
+    "clean": "rm -rf storybook-static node_modules",
     "develop": "start-storybook -p 6006",
     "lint": "eslint --ext .mdx ."
   }

docs/stories/DateTimePicker.stories.mdx

@@ -52,10 +52,8 @@ import { DateTimePicker } from '@strapi/design-system/DateTimePicker';
           label={'Date time picker'}
           disabled={false}
           name="datetimepicker"
-          onChange={(e) => setValue(e)}
           clearLabel="Clear"
-          onClear={() => setValue(undefined)}
-          value={value}
+          step={15}
           hint="This is a super description"
           selectedDateLabel={() => `Date picker, current is undefined`}
         />

docs/stories/IconButton.stories.mdx

@@ -43,7 +43,7 @@ minimal and by so, efficient in small areas. Icon Buttons should be associated w
           <Box paddingBottom={3}>
             <Typography>{currentAction}</Typography>
           </Box>
-          <Flex>
+          <Flex background="neutral100" gap={1} padding={2}>
             <IconButton onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
             <IconButton onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
             <IconButton onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
@@ -68,7 +68,7 @@ Depending on the status of an action or the permissions, an IconButton can be un
           <Box paddingBottom={3}>
             <Typography>{currentAction}</Typography>
           </Box>
-          <Flex>
+          <Flex background="neutral100" gap={1} padding={2}>
             <IconButton disabled onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
             <IconButton disabled onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
             <IconButton disabled onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
@@ -89,7 +89,9 @@ the button.**
 <Canvas>
   <Story name="without tooltip">
     <Box padding={7}>
-      <IconButton onClick={() => console.log('edit')} aria-label="Edit" icon={<Pencil />} />
+      <Flex background="neutral100" gap={1} padding={2}>
+        <IconButton onClick={() => console.log('edit')} aria-label="Edit" icon={<Pencil />} />
+      </Flex>
     </Box>
   </Story>
 </Canvas>
@@ -101,12 +103,14 @@ IconButtons can be used within another component is a Group shape.
 <Canvas>
   <Story name="group">
     <Box padding={7}>
-      <IconButtonGroup>
-        <IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
-        <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
-        <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
-        <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
-      </IconButtonGroup>
+      <Flex background="neutral100" gap={1} padding={2}>
+        <IconButtonGroup>
+          <IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
+          <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
+          <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
+          <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
+        </IconButtonGroup>
+      </Flex>
     </Box>
   </Story>
 </Canvas>
@@ -124,7 +128,7 @@ IconButtons can take Icons as their children and can be fully accessible without
           <Box paddingBottom={3}>
             <Typography>{currentAction}</Typography>
           </Box>
-          <Flex>
+          <Flex background="neutral100" gap={1} padding={2}>
             <IconButton onClick={() => setCurrentAction('Edit')} aria-label="Edit">
               <Pencil />
             </IconButton>

docs/stories/TextButton.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import { ArrowLeft, ArrowRight } from '@strapi/icons';
-import { TextButton } from '@strapi/design-system';
+import { Icon, TextButton } from '@strapi/design-system';
 
 <Meta title="Design System/Components/TextButton" component={TextButton} />
 
@@ -33,7 +33,17 @@ Depending on the permissions a user have or the status of an action, a TextButto
 <Canvas>
   <Story name="base">
     <div>
-      <TextButton endIcon={<ArrowRight />} startIcon={<ArrowLeft />}>
+      <TextButton>Click on me</TextButton>
+    </div>
+  </Story>
+</Canvas>
+
+## Icons
+
+<Canvas>
+  <Story name="icons">
+    <div>
+      <TextButton endIcon={<Icon as={ArrowRight} />} startIcon={<Icon as={ArrowLeft} />}>
         Click on me
       </TextButton>
     </div>
@@ -45,7 +55,7 @@ Depending on the permissions a user have or the status of an action, a TextButto
 <Canvas>
   <Story name="disabled">
     <div>
-      <TextButton disabled startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
+      <TextButton disabled startIcon={<Icon as={ArrowLeft} />}>
         Disabled TextButton
       </TextButton>
     </div>
@@ -57,7 +67,7 @@ Depending on the permissions a user have or the status of an action, a TextButto
 <Canvas>
   <Story name="loading">
     <div>
-      <TextButton loading startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
+      <TextButton loading startIcon={<Icon as={ArrowLeft} />}>
         Loading
       </TextButton>
     </div>

lerna.json

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

package.json

@@ -13,7 +13,7 @@
     "bootstrap": "lerna bootstrap",
     "develop": "lerna run develop --stream",
     "build": "lerna run build",
-    "clean": "lerna clean",
+    "clean": "lerna run clean && rm -rf node_modules",
     "format": "lerna run format",
     "lint": "lerna run lint",
     "lint-staged": "lerna run lint -- ",

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.5",
+    "@strapi/icons": "^1.6.6",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -62,6 +62,7 @@
     "develop": "vite build --watch",
     "build": "yarn build:prod",
     "build:prod": "vite build",
+    "clean": "rm -rf dist node_modules",
     "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
     "format": "yarn lint --fix",

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

@@ -28,7 +28,7 @@ export interface BaseButtonProps<TElement extends HTMLElement = HTMLButtonElemen
 }
 
 export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
-  ({ disabled, children, ...props }, ref) => {
+  ({ disabled, children, background = 'neutral0', ...props }, ref) => {
     return (
       <BaseButtonWrapper
         ref={ref}
@@ -38,7 +38,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         disabled={disabled}
         padding={2}
         hasRadius
-        background="neutral0"
+        background={background}
         borderColor="neutral200"
         cursor="pointer"
         {...props}