Skip to content
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

Jump to bottom

fix(clipboardcopy): replace copy button with button component #2922

Merged
merged 5 commits into from Apr 8, 2020
Merged

fix(clipboardcopy): replace copy button with button component #2922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8b551e8
fix(clipboardcopy): replace copy button with button component
christiemolloy Apr 3, 2020
326f13d
fix(clipboardcopy): replace toggle
christiemolloy Apr 7, 2020
c3d0fb7
fix(clipboardcopy): make more updates
christiemolloy Apr 7, 2020
8915a33
fix(clipboardcopy): add expanded to documentation
christiemolloy Apr 8, 2020
2d7c340
fix(clipboardcopy): fix all ids
christiemolloy Apr 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/patternfly/components/Button/button.hbs
View file
Open in desktop
@@ -1,11 +1,14 @@
<button class="pf-c-button{{#if button--modifier}} {{button--modifier}}{{/if}}"
<button class="pf-c-button{{#if button--IsExpanded}} pf-m-expanded{{/if}}{{#if button--modifier}} {{button--modifier}}{{/if}}"
{{#if button--IsSubmit}}
type="submit"
{{else if button--IsReset}}
type="reset"
{{else}}
type="button"
{{/if}}
{{#if button--IsExpanded}}
aria-expanded="true"
{{/if}}
{{#if button--attribute}}
{{{button--attribute}}}
{{/if}}>
Expand Down
3 changes: 2 additions & 1 deletion src/patternfly/components/Button/examples/Button.md
View file
Open in desktop
Expand Up @@ -197,7 +197,7 @@ import './Button.css'
Control active
{{/button}}

{{#> button button--modifier="pf-m-control pf-m-expanded"}}
{{#> button button--IsExpanded="true" button--modifier="pf-m-control"}}
Control expanded
{{/button}}

Expand Down Expand Up @@ -255,6 +255,7 @@ Semantic buttons and links are important for usability as well as accessibility.
| `aria-label="[link description]"` | `a.pf-c-button` | The link text should adequately describe the link's purpose. If it does not, aria-label can provide more detailed interaction information. |
| `disabled` | `button.pf-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
| `aria-disabled="true"` | `a.pf-c-button` | When a link element is used, indicates that it is unavailable. **Required when link is disabled** |
| `aria-expanded="true"` | `.pf-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required**|
| `tabindex="-1"` | `a.pf-c-button` | When a link element is used, removes it from keyboard focus. **Required when link is disabled** |

### Usage
Expand Down
9 changes: 0 additions & 9 deletions src/patternfly/components/ClipboardCopy/clipboard-copy-group-copy.hbs
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions src/patternfly/components/ClipboardCopy/clipboard-copy-group-toggle.hbs
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions src/patternfly/components/ClipboardCopy/clipboard-copy-toggle-icon.hbs
View file
Open in desktop
@@ -0,0 +1,6 @@
<div class="pf-c-clipboard-copy__toggle-icon{{#if clipboard-copy-toggle-icon--modifier}} {{clipboard-copy-toggle-icon--modifier}}{{/if}}"
{{#if clipboard-copy-toggle-icon--attribute}}
{{{clipboard-copy-toggle-icon--attribute}}}
{{/if}}>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</div>
140 changes: 7 additions & 133 deletions src/patternfly/components/ClipboardCopy/clipboard-copy.scss
View file
Open in desktop
@@ -1,38 +1,7 @@
.pf-c-clipboard-copy {
// Clipboard copy toggle
--pf-c-clipboard-copy__group-toggle--PaddingRight: var(--pf-global--spacer--md);
--pf-c-clipboard-copy__group-toggle--PaddingLeft: var(--pf-global--spacer--md);
--pf-c-clipboard-copy__group-toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-clipboard-copy__group-toggle--BorderTopColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-toggle--BorderRightColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
--pf-c-clipboard-copy__group-toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-clipboard-copy__group-toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-clipboard-copy__group-toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-toggle--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));

// Icon
--pf-c-clipboard-copy__group-toggle-icon--Transition: .2s ease-in 0s;
--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform: rotate(90deg);

// Clipboard copy copy
--pf-c-clipboard-copy__group-copy--PaddingRight: var(--pf-global--spacer--md);
--pf-c-clipboard-copy__group-copy--PaddingLeft: var(--pf-global--spacer--md);
--pf-c-clipboard-copy__group-copy--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-clipboard-copy__group-copy--BorderTopColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-copy--BorderRightColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-global--BorderColor--200);
--pf-c-clipboard-copy__group-copy--BorderLeftColor: var(--pf-global--BorderColor--300);
--pf-c-clipboard-copy__group-copy--hover--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-copy--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-clipboard-copy__group-copy--active--BorderBottomColor: var(--pf-global--active-color--100);
--pf-c-clipboard-copy__group-copy--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
--pf-c-clipboard-copy__group-copy--focus--BorderBottomColor: var(--pf-global--active-color--100);
// Toggle icon
--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
--pf-c-clipboard-copy--m-expanded__toggle-icon--Transform: rotate(90deg);

// Clipboard copy expanded content
--pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md);
Expand All @@ -49,16 +18,8 @@

// Toggle button expanded
&.pf-m-expanded {
.pf-c-clipboard-copy__group-toggle {
&::before {
--pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColor);

border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidth);
}

.pf-c-clipboard-copy__group-toggle-icon {
transform: var(--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transform);
}
.pf-c-clipboard-copy__toggle-icon {
transform: var(--pf-c-clipboard-copy--m-expanded__toggle-icon--Transform);
}
}
}
Expand All @@ -71,95 +32,8 @@
}
}

.pf-c-clipboard-copy__group-toggle {
position: relative;
padding-right: var(--pf-c-clipboard-copy__group-toggle--PaddingRight);
padding-left: var(--pf-c-clipboard-copy__group-toggle--PaddingLeft);
border: none;
outline-offset: var(--pf-c-clipboard-copy__group-toggle--OutlineOffset);

.pf-c-clipboard-copy__group-toggle-icon {
transition: var(--pf-c-clipboard-copy__group-toggle-icon--Transition);
}

&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border: var(--pf-c-clipboard-copy__group-toggle--BorderWidth) solid;
border-color: var(--pf-c-clipboard-copy__group-toggle--BorderTopColor) var(--pf-c-clipboard-copy__group-toggle--BorderRightColor) var(--pf-c-clipboard-copy__group-toggle--BorderBottomColor) var(--pf-c-clipboard-copy__group-toggle--BorderLeftColor);
}

&:hover,
&.pf-m-hover {
&::before {
--pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--hover--BorderBottomColor);
}
}

&:active,
&.pf-m-active {
&::before {
--pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--active--BorderBottomColor);

border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--active--BorderBottomWidth);
}
}

&:focus,
&.pf-m-focus {
&::before {
--pf-c-clipboard-copy__group-toggle--BorderBottomColor: var(--pf-c-clipboard-copy__group-toggle--focus--BorderBottomColor);

border-bottom-width: var(--pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidth);
}
}
}

.pf-c-clipboard-copy__group-copy {
position: relative;
padding-right: var(--pf-c-clipboard-copy__group-copy--PaddingRight);
padding-left: var(--pf-c-clipboard-copy__group-copy--PaddingLeft);
border: none;

&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border: var(--pf-c-clipboard-copy__group-copy--BorderWidth) solid;
border-color: var(--pf-c-clipboard-copy__group-copy--BorderTopColor) var(--pf-c-clipboard-copy__group-copy--BorderRightColor) var(--pf-c-clipboard-copy__group-copy--BorderBottomColor) var(--pf-c-clipboard-copy__group-copy--BorderLeftColor);
}

&:hover,
&.pf-m-hover {
&::before {
--pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--hover--BorderBottomColor);
}
}

&:active,
&.pf-m-active {
&::before {
--pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--active--BorderBottomColor);

border-bottom-width: var(--pf-c-clipboard-copy__group-copy--active--BorderBottomWidth);
}
}

&:focus,
&.pf-m-focus {
&::before {
--pf-c-clipboard-copy__group-copy--BorderBottomColor: var(--pf-c-clipboard-copy__group-copy--focus--BorderBottomColor);

border-bottom-width: var(--pf-c-clipboard-copy__group-copy--focus--BorderBottomWidth);
}
}
.pf-c-clipboard-copy__toggle-icon {
transition: var(--pf-c-clipboard-copy__toggle-icon--Transition);
}

.pf-c-clipboard-copy__expandable-content {
Expand Down