chore(buttons): update guidelines content #4484
Conversation
removed modal exception because we standardized this.
Added semantic spacer info and changed two images
typo fix
image too small
| <img src="./img/link-left.png" alt="Example of link button with icon on the left" width="143"/> | ||
|
|
||
| <img src="./img/link-right.png" alt="Example of link button with icon on the right" width="143"/> | ||
| <img src="./img/external_links.png" alt="Example of link button with icon on the left and the right" width="218"/> |
There was a problem hiding this comment.
| <img src="./img/external_links.png" alt="Example of link button with icon on the left and the right" width="218"/> | |
| <div class="ws-docs-content-img"> | |
| <img src="./img/external_links.png" alt="Example of link button with icon on the left and the right" width="218"/> | |
| </div> |
There was a problem hiding this comment.
If you add this import line at the top of the file:
import '../components.css';
You should be able to use this class for all images, which centers them / controls max width! I would assume that you can keep the width you're manually setting on these individual/smaller images still?
There was a problem hiding this comment.
Sorry in advance that this would require a handful of updates (maybe ctrl f is handy) -- I couldn't leave GH suggestions on all of them!
...ges/documentation-site/patternfly-docs/content/design-guidelines/components/button/button.md
Outdated
Show resolved
Hide resolved
| @@ -187,27 +185,19 @@ Exceptions to the standard spacing guidelines are as follows: | |||
|
|
|||
| #### Wizards #### | |||
|
|
|||
| In wizards, the **Cancel** button is spaced 48px away from the primary and secondary **Next** and **Back** buttons, and 24px away if stacked. | |||
| In wizards, the **Cancel** button is spaced `--pf-t--global--spacer--2xl` (48px) away from the primary and secondary **Next** and **Back** buttons, and `--pf-t--global--spacer--md` (24px) away if stacked. | |||
There was a problem hiding this comment.
| In wizards, the **Cancel** button is spaced `--pf-t--global--spacer--2xl` (48px) away from the primary and secondary **Next** and **Back** buttons, and `--pf-t--global--spacer--md` (24px) away if stacked. | |
| In wizards, the **Cancel** button is spaced `--pf-t--global--spacer--2xl` (48px) away from the primary and secondary **Next** and **Back** buttons, and `--pf-t--global--spacer--md` (16px) away if stacked. |
unless 24 px is right here, in which case that's the lg spacer I think
There was a problem hiding this comment.
I think the 2nd "secondary" button label is meant to be tertiary?
There was a problem hiding this comment.
Do we now recommend the danger icon instead of the warning icon for delete modals? Only asking because we detail specific guidance about this in the actions pattern, so I would just open a follow up if we need to update that doc!
There was a problem hiding this comment.
could you either add an annotation tag to the tertiary button or change the label from edit to "Tertiary"? Just to help find it quicker
…delines/components/button/button.md Co-authored-by: Erin Donehoo <[email protected]>
…n/patternfly-org into buttons-guidance
|
|
||
| #### Toolbars #### | ||
|
|
||
| Button spacing in toolbars depends on the button type. Normal 16px spacing applies between primary and secondary buttons. However, there should only be 8px between icon buttons. | ||
| Button spacing in toolbars depends on the button type and how they are grouped. For example, groups of primary and secondary buttons use `--pf-t--global--spacer--sm` (8px) spacing between buttons and `--pf-t--global--spacer--md` (16px) between groups. Icon buttons inside a grouping use `--pf-t--global--spacer--xs` (4px) spacing and `--pf-t--global--spacer--md` (16px) between groups. | ||
|
|
||
| _Toolbar spacing_ | ||
|
|
There was a problem hiding this comment.
this image (https://patternfly-org-pr-4484-site.surge.sh/components/button/design-guidelines#toolbars) is missing the div, all the others look great!
missing tag
Closes #4274