Skip to content

Commit

Permalink
fix(button): add icon/text wrapper (#6806)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcoker
mcoker committed Jun 20, 2024
1 parent c36a7a1 commit b57499d
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 136 deletions.
1 change: 1 addition & 0 deletions src/patternfly/components/Badge/badge.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<span class="{{pfv}}badge
{{#if badge--IsRead}}pf-m-read {{/if}}
{{#if badge--IsUnread}}pf-m-unread {{/if}}
{{#if badge--IsDisabled}}pf-m-disabled {{/if}}
{{#if badge--modifier}} {{badge--modifier}}{{/if}}"
Expand Down
12 changes: 4 additions & 8 deletions src/patternfly/components/Button/button--variations.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<br><br>

<div><strong>Icon</strong></div>
{{> button-list button--HasIcon=true}}
{{> button-list button--icon="plus-circle"}}

<br><br>

<div><strong>Icon end</strong></div>
{{> button-list button--HasIconEnd=true}}
{{> button-list button-icon--IsEnd=true button--icon="plus-circle"}}

{{#*inline "button-list"}}
{{#> button button--IsPrimary=true}}
Expand Down Expand Up @@ -49,17 +49,13 @@
Inline link
{{/button}}

{{#> button button--IsPlain=true button--attribute='aria-label="Remove"' button--HasIcon=false button--HasIconEnd=false}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{> button button--IsPlain=true button--aria-label="Remove" button--icon="times"}}

<br><br>

{{#> button button--IsControl=true}}
Control
{{/button}}

{{#> button button--IsControl=true button--HasIcon=false button--HasIconEnd=false button--attribute='aria-label="Copy input"'}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{> button button--IsControl=true button--aria-label="Copy input" button--icon="copy"}}
{{/inline}}
8 changes: 7 additions & 1 deletion src/patternfly/components/Button/button-count.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,11 @@
{{#if button-count--attribute}}
{{{button-count--attribute}}}
{{/if}}>
{{> @partial-block}}
{{#if button--count}}
{{#> badge badge--IsRead=button-count--IsRead badge--IsUnread=button-count--IsUnread}}
{{button--count}}
{{/badge}}
{{else if @partial-block}}
{{> @partial-block}}
{{/if}}
</span>
14 changes: 10 additions & 4 deletions src/patternfly/components/Button/button-icon.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<span class="{{pfv}}button__icon{{#if button-icon--modifier}} {{button-icon--modifier}}{{/if}}"
<span class="{{pfv}}button__icon
{{#if button-icon--IsEnd}}
pf-m-end
{{else}}
pf-m-start
{{/if}}
{{#if button-icon--modifier}} {{button-icon--modifier}}{{/if}}"
{{#if button-icon--attribute}}
{{{button-icon--attribute}}}
{{/if}}>
{{#if button-icon--name}}
<i class="{{{button-icon--name}}}" aria-hidden="true"></i>
{{else}}
{{#if button--icon}}
<i class="fas fa-{{button--icon}}" aria-hidden="true"></i>
{{else if @partial-block}}
{{> @partial-block}}
{{/if}}
</span>
6 changes: 6 additions & 0 deletions src/patternfly/components/Button/button-text.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<span class="{{pfv}}button__text{{#if button-text--modifier}} {{button-text--modifier}}{{/if}}"
{{#if button-text--attribute}}
{{{button-text--attribute}}}
{{/if}}>
{{> @partial-block}}
</span>
33 changes: 22 additions & 11 deletions src/patternfly/components/Button/button.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@
button--HasNoPadding='pf-m-no-padding'
button--IsSmall='pf-m-small'
button--IsClicked='pf-m-clicked'
button--IsStateful='pf-m-stateful'
button--IsRead='pf-m-read'
button--IsUnread='pf-m-unread'
button--IsAttention='pf-m-attention'
button--IsDisplayLg='pf-m-display-lg'
button--IsBlock='pf-m-block'
button--modifier=button--modifier
}}
{{#if button--IsDisabled}}
Expand Down Expand Up @@ -74,16 +80,21 @@
{{> button-progress}}
{{/if}}
{{#if button--icon}}
<i class="fas fa-{{button--icon}}" aria-hidden="true"></i>
{{else if button--HasIcon}}
{{#> button-icon button-icon--modifier="pf-m-start"}}
<i class="fas fa-plus-circle" aria-hidden="true"></i>
{{/button-icon}}
{{/if}}
{{> @partial-block}}
{{#if button--HasIconEnd}}
{{#> button-icon button-icon--modifier="pf-m-end"}}
<i class="fas fa-plus-circle" aria-hidden="true"></i>
{{/button-icon}}
{{#unless button-icon--IsEnd}}
{{> button-icon}}
{{/unless}}
{{/if}}
{{#if @partial-block}}
{{#> button-text}}
{{> @partial-block}}
{{/button-text}}
{{/if}}
{{#if button--icon}}
{{#if button-icon--IsEnd}}
{{> button-icon}}
{{/if}}
{{/if}}
{{#if button--count}}
{{> button-count}}
{{/if}}
</{{#if button--type}}{{button--type}}{{else if button--IsSpan}}span{{else if button--IsAnchor}}a{{else}}button{{/if}}>
50 changes: 36 additions & 14 deletions src/patternfly/components/Button/button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
@use '../../sass-utilities' as *;

:where(:root, .#{$button}) {
--#{$button}--Display: inline-block;
--#{$button}--Display: inline-flex;
--#{$button}--AlignItems: baseline;
--#{$button}--JustifyContent: center;
--#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
--#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
Expand Down Expand Up @@ -98,6 +101,7 @@
--#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);

// Link inline
--#{$button}--m-link--m-inline--Display: inline-flex;
--#{$button}--m-link--m-inline--FontSize: initial;
--#{$button}--m-link--m-inline--LineHeight: initial;
--#{$button}--m-link--m-inline--FontWeight: initial;
Expand All @@ -110,6 +114,9 @@
--#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
--#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
--#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
--#{$button}--span--m-link--m-inline--Display: inline;
--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);

// Plain
--#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
Expand All @@ -124,7 +131,8 @@
--#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
--#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
--#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
--#{$button}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
--#{$button}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
--#{$button}--m-plain--disabled--BackgroundColor: transparent;
--#{$button}--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
--#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
Expand Down Expand Up @@ -243,8 +251,10 @@
--#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
--#{$button}__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
--#{$button}__icon--MarginInlineStart: 0;
--#{$button}__icon--MarginInlineEnd: 0;
--#{$button}__icon--m-start--MarginInlineEnd: 0;
--#{$button}__icon--m-end--MarginInlineStart: 0;

// Progress
--#{$button}__progress--width: calc(var(--#{$spinner}--m-md--diameter) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
Expand All @@ -263,16 +273,19 @@
--#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;

// Count
--#{$button}__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
--#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);

// Block
--#{$button}--m-block--Display: flex;
--#{$button}--m-block--Width: 100%;
}

.#{$button} {
position: relative;
display: var(--#{$button}--Display);
flex: var(--#{$button}--Flex, initial);
align-items: var(--#{$button}--AlignItems, initial);
justify-content: var(--#{$button}--JustifyContent, initial);
gap: var(--#{$button}--Gap);
align-items: var(--#{$button}--AlignItems);
justify-content: var(--#{$button}--JustifyContent);
padding-block-start: var(--#{$button}--PaddingBlockStart);
padding-block-end: var(--#{$button}--PaddingBlockEnd);
padding-inline-start: var(--#{$button}--PaddingInlineStart);
Expand Down Expand Up @@ -381,6 +394,13 @@
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);

&.pf-m-inline {
@at-root span#{&} {
--#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
--#{$button}__icon--m-start--MarginInlineEnd: var(--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
--#{$button}__icon--m-end--MarginInlineStart: var(--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart);
}

--#{$button}--Display: var(--#{$button}--m-link--m-inline--Display);
--#{$button}--FontSize: var(--#{$button}--m-link--m-inline--FontSize);
--#{$button}--LineHeight: var(--#{$button}--m-link--m-inline--LineHeight);
--#{$button}--FontWeight: var(--#{$button}--m-link--m-inline--FontWeight);
Expand All @@ -397,7 +417,6 @@
--#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
--#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);

display: inline;
text-align: start;
white-space: normal;
outline-offset: #{pf-size-prem(2px)};
Expand Down Expand Up @@ -526,6 +545,7 @@
--#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
--#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
--#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
--#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
--#{$button}--m-small--PaddingBlockStart: var(--#{$button}--m-plain--m-small--PaddingBlockStart);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
Expand All @@ -548,8 +568,9 @@
}

&.pf-m-block {
display: block;
width: 100%;
--#{$button}--Display: var(--#{$button}--m-block--Display);

width: var(--#{$button}--m-block--Width);
}

&.pf-m-small {
Expand Down Expand Up @@ -638,14 +659,16 @@
}

.#{$button}__icon {
margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
color: var(--#{$button}__icon--Color);

&.pf-m-start {
margin-inline-end: var(--#{$button}__icon--m-start--MarginInlineEnd);
--#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
}

&.pf-m-end {
margin-inline-start: var(--#{$button}__icon--m-end--MarginInlineStart);
--#{$button}__icon--MarginInlineStart: var(--#{$button}__icon--m-end--MarginInlineStart);
}
}

Expand All @@ -665,5 +688,4 @@
.#{$button}__count {
display: inline-flex;
align-items: center;
margin-inline-start: var(--#{$button}__count--MarginInlineStart);
}
Loading

0 comments on commit b57499d

Please sign in to comment.