Skip to content

Commit

Permalink
fix(clipboard-copy): adjust inline icons (#6788)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcoker
mcoker committed Jun 18, 2024
1 parent 82ebaf8 commit 9fd8280
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 27 deletions.
32 changes: 12 additions & 20 deletions src/patternfly/components/ClipboardCopy/clipboard-copy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,17 @@
--#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);

// Inline
--#{$clipboard-copy}--m-inline--PaddingBlockStart: 0; // remove at breaking change
--#{$clipboard-copy}--m-inline--PaddingBlockEnd: 0; // remove at breaking change
--#{$clipboard-copy}--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
--#{$clipboard-copy}__actions--Gap: var(--pf-t--global--spacer--sm);
--#{$clipboard-copy}__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
--#{$clipboard-copy}__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);

// Text
--#{$clipboard-copy}__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
--#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);

// Actions
--#{$clipboard-copy}__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
--#{$clipboard-copy}__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
--#{$clipboard-copy}__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
--#{$clipboard-copy}__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
}

.#{$clipboard-copy} {
Expand All @@ -52,9 +47,8 @@

&.pf-m-inline {
display: inline;
padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingBlockStart);
padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBlockEnd);
padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingInlineStart);
padding-inline-end: var(--#{$clipboard-copy}--m-inline--PaddingInlineEnd);
white-space: nowrap;
background-color: var(--#{$clipboard-copy}--m-inline--BackgroundColor);

Expand Down Expand Up @@ -114,17 +108,15 @@

.#{$clipboard-copy}__actions {
display: inline-flex;
gap: var(--#{$clipboard-copy}__actions--Gap);
margin-inline-start: var(--#{$clipboard-copy}__actions--MarginInlineStart);
}

.#{$clipboard-copy}__actions-item {
margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart));
margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd));

.#{$button} {
--#{$button}--PaddingBlockStart: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart);
--#{$button}--PaddingInlineEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineEnd);
--#{$button}--PaddingBlockEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd);
--#{$button}--PaddingInlineStart: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineStart);

.#{$button}.pf-m-plain {
--#{$button}--m-plain--Color: var(--#{$clipboard-copy}__actions-item--button--Color);
--#{$button}--m-plain--hover--Color: var(--#{$clipboard-copy}__actions-item--button--hover--Color);
}
}

Expand Down
14 changes: 7 additions & 7 deletions src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ cssPrefix: pf-v6-c-clipboard-copy
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand All @@ -174,7 +174,7 @@ cssPrefix: pf-v6-c-clipboard-copy
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand All @@ -190,12 +190,12 @@ cssPrefix: pf-v6-c-clipboard-copy
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Run in web terminal"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Run in web terminal"}}
<i class="fas fa-play" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand All @@ -213,7 +213,7 @@ Lorem ipsum&nbsp;
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand All @@ -231,7 +231,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand All @@ -248,7 +248,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;
{{/clipboard-copy-text}}
{{#> clipboard-copy-actions}}
{{#> clipboard-copy-actions-item}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Copy to clipboard"'}}
{{#> button button--IsPlain=true button--HasNoPadding=true button--aria-label="Copy to clipboard"}}
<i class="fas fa-copy" aria-hidden="true"></i>
{{/button}}
{{/clipboard-copy-actions-item}}
Expand Down

0 comments on commit 9fd8280

Please sign in to comment.