From 163bb1f9c833f6f610aafaeadc1b57b433712b9a Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Mon, 16 Jan 2023 12:06:23 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20add=20do's=20and=20don't?= =?UTF-8?q?=20to=20Button=20doc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Based on the work delivered by designers, we simply replicates those in the storybook documentation in order to centralize everything related to the Button component. --- packages/react/.storybook/main.cjs | 1 + .../src/components/Button/index.stories.mdx | 31 ++++++++++- .../src/components/Button/resources/dd_1.svg | 42 +++++++++++++++ .../src/components/Button/resources/dd_2.svg | 53 +++++++++++++++++++ .../src/components/Button/resources/dd_3.svg | 48 +++++++++++++++++ .../src/components/Button/resources/dd_4.svg | 47 ++++++++++++++++ 6 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/Button/resources/dd_1.svg create mode 100644 packages/react/src/components/Button/resources/dd_2.svg create mode 100644 packages/react/src/components/Button/resources/dd_3.svg create mode 100644 packages/react/src/components/Button/resources/dd_4.svg diff --git a/packages/react/.storybook/main.cjs b/packages/react/.storybook/main.cjs index a89af0f..58eb6cc 100644 --- a/packages/react/.storybook/main.cjs +++ b/packages/react/.storybook/main.cjs @@ -20,6 +20,7 @@ module.exports = { }, staticDirs: [ 'dist', + '../src' ], "features": { "storyStoreV7": true diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx index 12dc759..1af6446 100644 --- a/packages/react/src/components/Button/index.stories.mdx +++ b/packages/react/src/components/Button/index.stories.mdx @@ -63,4 +63,33 @@ Here a the custom design tokens defined by the button. | border-radius | Border radius of the button | | height | Height of the button | | font-size | Font size of the label | -| font-weight | Font weight of the label | \ No newline at end of file +| font-weight | Font weight of the label | + +## Do's and don'ts + +### Never use two "filled buttons" or "primary buttons" on the same page for two main actions. + +The primary button designates the user's primary action, it is highlighted here with a primary color. +The primary button should not be used for a secondary action. + + + +### Size of icons in a primary MD button + +When you go to change the icon in the properties by browsing the icon library, you must choose only icons a size of 24x24px +to respect the size of the container + + + +### Good practice for primary, secondary and tertiary button + +For a good practice we use only one primary button per page to define the main action with 1/3 of secondary buttons and as +many tertiary buttons as needed. + + + +### Exceptional red button for delete + +Secondary button to be used when important non-reversible action surrounded by red. + + \ No newline at end of file diff --git a/packages/react/src/components/Button/resources/dd_1.svg b/packages/react/src/components/Button/resources/dd_1.svg new file mode 100644 index 0000000..4414651 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_1.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_2.svg b/packages/react/src/components/Button/resources/dd_2.svg new file mode 100644 index 0000000..0949200 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_2.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_3.svg b/packages/react/src/components/Button/resources/dd_3.svg new file mode 100644 index 0000000..3a348c1 --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_3.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react/src/components/Button/resources/dd_4.svg b/packages/react/src/components/Button/resources/dd_4.svg new file mode 100644 index 0000000..b53b7cf --- /dev/null +++ b/packages/react/src/components/Button/resources/dd_4.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +