From cd7d2386bbea47423b1f556365937384664482b4 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 21 Nov 2023 10:49:52 +0100 Subject: [PATCH 01/51] change name of button story, change name of button doc to match story and overwrite autodocs --- stories/button.mdx | 149 ++++++++++++++++ ...uttonv2.stories.tsx => button.stories.tsx} | 160 +++++++----------- stories/common.tsx | 1 - 3 files changed, 212 insertions(+), 98 deletions(-) create mode 100644 stories/button.mdx rename stories/{buttonv2.stories.tsx => button.stories.tsx} (67%) diff --git a/stories/button.mdx b/stories/button.mdx new file mode 100644 index 0000000000..bf23b1a7cd --- /dev/null +++ b/stories/button.mdx @@ -0,0 +1,149 @@ +import { Meta, Story, Canvas, Primary, Controls } from '@storybook/blocks'; +import { Button } from '../src/lib/components/buttonv2/Buttonv2.component'; + +import * as ButtonStories from './button.stories'; + + + +# Button + +Button are used to trigger an action or event when clicked. + +## Size & style + +### Style + +- Only 1 size is used - Height: 2rem +- Border-radius: 3px +- Minimum width: 5rem + +{/* if different sizes, add story with different the different and their size in rem */} + +### Padding + +Button’s label measurement: + +- Line height: 1.25rem +- Vertical padding: 0.5rem +- Horizontal padding of 1rem +- Space between icon & label: 0.5rem + +### Button spacing + +- Horizontal spacing: 1rem +- Vertical spacing: 0.75rem +- Space between 2 buttons: 1.5rem - when there is no space constraint + +## Explicit button label + +Button labels should be as short and clear as possible and should describe the action the button performs.\ +Use one or two words if possible. Remove most prepositions and articles (a, an, the). + +Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc. + +Since buttons are action points for the user, button text should also be actionable. \ +Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). \ +Whichever labeling method you choose, maintain consistency across all of your buttons. + +- Use sentence case. +- Capitalize proper nouns. +- Use specific action-oriented text for CTAs. + +{/* Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc. */} + +
+ + + +
+ +## Type + +Buttons have a set of predefined defined variations to use in different context + + + +### Primary + +Used for the main action. It appears once within a group of buttons. For example, “Continue” in a form. + + + +### Secondary + +Use for the secondary action within a group of buttons. + + + +### Outline + +Dismissive action, such as the cancel button. + + + +### Danger + +Use for critical action, typically delete actions + + + +### Links + +_to add_ + +## States + +### Disabled button + +Disabled state only if an action on the current screen can enable it (action possibility). + + + +## Group of Button + +- Primary buttons placed on the right of a group. +- Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process. + +Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently. + + + +## Icon on buttons + +Every button gets a label.\ +Icons are optional and mainly used to show how buttons are different, to aid memory and differentiation.\ +Universally understood icons work well (ie. print, close, play/pause, save).\ +Use standard icons when their use matches their meaning, or at least the user's intent.\ +Avoid creating new icons for every action, especially infrequently used ones.\ +Avoid using an icon alone in a button, with no label. + +### Placement + +If icon + label, then the icon is placed on the left side.\ +Seeing the icon first help users to scan the page more easily, except for few cases such as navigation (right arrow). + + + + + +### Size + +The icon should be (approximately) the same height as the text, or a lot bigger. + +**Example** + +### Playground + + + + diff --git a/stories/buttonv2.stories.tsx b/stories/button.stories.tsx similarity index 67% rename from stories/buttonv2.stories.tsx rename to stories/button.stories.tsx index 26a7c2d739..a18e35afcb 100644 --- a/stories/buttonv2.stories.tsx +++ b/stories/button.stories.tsx @@ -1,17 +1,12 @@ -import React from 'react'; import { action } from '@storybook/addon-actions'; -import { - Button, - Props, -} from '../src/lib/components/buttonv2/Buttonv2.component'; -import { Wrapper } from './common'; -import { CopyButton } from '../src/lib/next'; - -import { tooltipArgTypes, iconArgType } from './controls'; +import React from 'react'; import { Form, Icon, Input, Stack } from '../src/lib'; import { StoryObj } from '@storybook/react'; import { Position } from '../src/lib/components/tooltip/Tooltip.component'; import { CSSProperties } from 'styled-components'; +import { Button } from '../src/lib/components/buttonv2/Buttonv2.component'; +import { CopyButton } from '../src/lib/next'; +import { Wrapper } from './common'; export default { title: 'Components/Button', @@ -26,29 +21,42 @@ export default { args: { onClick: action('Button clicked'), }, + render: ({ icon, ...args }) => { + return - ); + parameters: { + docs: { + canvas: { + additionalActions: [ + { + title: 'Open in GitHub', + onClick: () => { + window.open('https://github.com/scality/core-ui', '_blank'); + }, + }, + ], + }, + }, }, }; @@ -59,33 +67,13 @@ export const Playground = { }; export const DefaultButtons = { - render: ({ icon, ...args }) => { + render: ({ ...args }) => { return ( <> -