Merge pull request #1113 from strapi/release/1.8.0

Author: joshuaellis

README.md

@@ -30,13 +30,17 @@ $ npm i react react-dom @strapi/design-system @strapi/icons styled-components re
 
 ## Getting Started
 
-Wrap your application with the `ThemeProvider` and pass the default `lightTheme` or `darkTheme` provided by `@strapi/design-system`.
+Wrap your application with the `DesignSystemProvider`. You can additionally pass a theme and/or locale, although you don't have to as we have default values for both.
 
 ```jsx
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { DesignSystemProvider, lightTheme } from '@strapi/design-system';
 
 function MyApp({ children }) {
-  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
+  return (
+    <DesignSystemProvider locale="en-GB" theme={lightTheme}>
+      {children}
+    </DesignSystemProvider>
+  );
 }
 
 export default App;

docs/.storybook/components/Theme.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 import { parse } from 'qs';
-import { ThemeProvider, Box, lightTheme, darkTheme } from '@strapi/design-system';
+import { DesignSystemProvider, Box, lightTheme, darkTheme } from '@strapi/design-system';
 
 const themeQueryURL = parse(document.location.search).theme;
 
@@ -16,11 +16,11 @@ const Theme = ({ children }) => {
   }, [isDarkAddon, isDark]);
 
   return (
-    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+    <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
       <Box padding={2} background="neutral0">
         {children}
       </Box>
-    </ThemeProvider>
+    </DesignSystemProvider>
   );
 };
 

docs/components/DeprecationNotice.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-import { Flex, Typography, ThemeProvider, lightTheme } from '@strapi/design-system';
+import { Flex, Typography, DesignSystemProvider, lightTheme } from '@strapi/design-system';
 
 export const DeprecationNotice = ({ children, href }) => (
-  <ThemeProvider theme={lightTheme}>
+  <DesignSystemProvider theme={lightTheme}>
     <Flex padding={5} background="danger200" justifyContent="center" marginTop={4} marginBottom={4}>
       <Typography fontSize={4} fontWeight="bold" as="p">
         ⛔️
@@ -18,7 +18,7 @@ export const DeprecationNotice = ({ children, href }) => (
         ⛔️
       </Typography>
     </Flex>
-  </ThemeProvider>
+  </DesignSystemProvider>
 );
 
 DeprecationNotice.propTypes = {

docs/stories/Combobox.stories.mdx

@@ -1,6 +1,14 @@
 import { useState, useEffect } from 'react';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { Combobox, CreatableCombobox, ComboboxOption } from '@strapi/design-system';
+import {
+  Combobox,
+  CreatableCombobox,
+  ComboboxOption,
+  Flex,
+  Button,
+  SingleSelect,
+  SingleSelectOption,
+} from '@strapi/design-system';
 
 <Meta title="Design System/Components/Combobox" component={Combobox} />
 
@@ -21,13 +29,51 @@ import { Combobox, ComboboxOption, CreatableCombobox } from '@strapi/design-syst
 
 ### Basic Usage
 
-By default, the combobox uses both inline and list autocomplete, that is where as the user types suggestions
+By default, the combobox is uncontrolled & uses both inline and list autocomplete, that is where as the user types suggestions
 (based on the order of the options) are shown in the input field whilst the list gradually gets filtered.
 
 <Canvas>
   <Story name="basic">
     {() => {
-      const [value, setValue] = useState('');
+      const [error, toggleError] = useState();
+      const [disabled, toggleDisabled] = useState();
+      return (
+        <Flex direction="column" alignItems="stretch" gap={11}>
+          <Combobox placeholder="My favourite fruit is..." label="Fruits" error={error} disabled={disabled}>
+            <ComboboxOption value="apple">Apple</ComboboxOption>
+            <ComboboxOption value="avocado">Avocado</ComboboxOption>
+            <ComboboxOption value="banana">Banana</ComboboxOption>
+            <ComboboxOption value="kiwi">Kiwi</ComboboxOption>
+            <ComboboxOption value="mango">Mango</ComboboxOption>
+            <ComboboxOption value="orange">Orange</ComboboxOption>
+            <ComboboxOption value="strawberry">Strawberry</ComboboxOption>
+          </Combobox>
+          <Flex gap={2} justifyContent="center">
+            <Button
+              variant="danger-light"
+              onClick={() => toggleError((s) => (s ? undefined : 'Oh no, the fruits have gone mouldy!'))}
+            >
+              {`${error ? 'Hide' : 'Show'} the error state`}
+            </Button>
+            <Button variant="tertiary" onClick={() => toggleDisabled((s) => !s)}>
+              {`${disabled ? 'Hide' : 'Show'} the disabled state`}
+            </Button>
+          </Flex>
+        </Flex>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Controlled
+
+The combobox can be a controlled component by passing a `value` prop and an `onChange` callback, this also
+enables you to have the ability to "clear" the input.
+
+<Canvas>
+  <Story name="controlled">
+    {() => {
+      const [value, setValue] = useState();
       return (
         <Combobox
           placeholder="My favourite fruit is..."
@@ -154,6 +200,46 @@ still pass an `onCreateOption` callback to handle the creation of the new option
   </Story>
 </Canvas>
 
+### Autocomplete settings
+
+By default, the combobox uses both inline and list autocomplete, however you can change this behaviour
+to only be `list` or `none`. If you set the autocomplete mode to `none`, the first matching option will
+be visually focussed
+
+<Canvas>
+  <Story name="autocomplete">
+    {() => {
+      const [value, setValue] = useState('');
+      const [autocompleteMode, setAutocompleteMode] = useState('both');
+      return (
+        <Flex direction="column" alignItems="stretch" gap={11}>
+          <Combobox
+            placeholder="My favourite fruit is..."
+            label="Fruits"
+            value={value}
+            onChange={setValue}
+            autocomplete={autocompleteMode}
+            onClear={() => setValue('')}
+          >
+            <ComboboxOption value="apple">Apple</ComboboxOption>
+            <ComboboxOption value="avocado">Avocado</ComboboxOption>
+            <ComboboxOption value="banana">Banana</ComboboxOption>
+            <ComboboxOption value="kiwi">Kiwi</ComboboxOption>
+            <ComboboxOption value="mango">Mango</ComboboxOption>
+            <ComboboxOption value="orange">Orange</ComboboxOption>
+            <ComboboxOption value="strawberry">Strawberry</ComboboxOption>
+          </Combobox>
+          <SingleSelect label="Autocomplete Mode" value={autocompleteMode} onValueChange={setAutocompleteMode}>
+            <SingleSelectOption value="both">both</SingleSelectOption>
+            <SingleSelectOption value="list">list</SingleSelectOption>
+            <SingleSelectOption value="none">none</SingleSelectOption>
+          </SingleSelect>
+        </Flex>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Props
 
 ### Combobox