Skip to content

feat(Button): extended inline styling #5696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcoker merged 6 commits into from
Sep 18, 2023
Merged

feat(Button): extended inline styling #5696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2a87a5d
feat(Button): extended inline styling
Jun 28, 2023
2838b60
feat(Button): updated logical properties
Aug 15, 2023
27f1a42
Replaced inline styling with compact
Aug 29, 2023
5fb86c4
Updated modifier to no-padding
Sep 13, 2023
73e23ed
Added documentation for use
Sep 15, 2023
ddedd51
Updated verbiage for no padding class
Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/patternfly/components/Button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,6 +559,10 @@
color: var(--#{$button}--m-plain--Color);
background-color: var(--#{$button}--m-plain--BackgroundColor);

&.pf-m-no-padding {
padding: 0;
}

&:hover {
--#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
--#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
Expand Down
14 changes: 10 additions & 4 deletions src/patternfly/components/Button/examples/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,15 @@ import './Button.css'
{{/button}}
<br>
<br>
<span>Default plain button: </span>
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Remove"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
<br>
<span>No padding plain button: </span>
{{#> button button--modifier="pf-m-plain pf-m-no-padding" button--attribute='aria-label="Remove"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
<br><br>
{{#> button button--modifier="pf-m-control"}}
Control
Expand All @@ -72,11 +78,11 @@ import './Button.css'
{{#> button button--modifier="pf-m-control" button--attribute='aria-label="Copy input"'}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
```

<br>
<br>
<br>
### Small buttons

```hbs
{{#> button button--modifier="pf-m-primary pf-m-small"}}
Primary
{{/button}}
Expand Down Expand Up @@ -123,7 +129,6 @@ import './Button.css'
Control
{{/button}}
```

### Disabled
```hbs
{{#> button button--modifier="pf-m-primary" button--attribute="disabled"}}
Expand Down Expand Up @@ -406,6 +411,7 @@ Semantic buttons and links are important for usability as well as accessibility.
| `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
| `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
| `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
| `.pf-m-no-padding` | `.pf-v5-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
| `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
| `.pf-m-block` | `.pf-v5-c-button` | Creates a block level button. |
| `.pf-m-control` | `.pf-v5-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
Expand Down