Skip to content

Commit

Permalink
fix(clipboard-copy)!: remove BaseClipboardCopy (#2635)
Browse files Browse the repository at this point in the history 
* fix(clipboard-copy)!: remove BaseClipboardCopy

Closes #2611

* fix(clipboard-copy): use pfv4 styles

* fix(clipboard-copy)!: rename ClipboardCopyCopiedEvent to PfClipboardCopyCopiedEvent
  • Loading branch information
@bennypowers
bennypowers authored Mar 31, 2024
1 parent cf4723b commit 9a6e651
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 154 deletions.
35 changes: 35 additions & 0 deletions .changeset/remove-base-clipboard-copy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
"@patternfly/elements": major
---
`<pf-clipboard-copy>`: Removed `BaseClipboardCopy` class.
Reimplement (recommended) or extend `PfClipboardCopy`.
Renames `AvatarLoadEvent` to `PfAvatarLoadEvent` and moves it to `pf-avatar.js`.

**Before**:

```js
import {
ClipboardCopyCopiedEvent
} from '@patternfly/elements/pf-clipboard-copy/BaseClipboardCopy.js';

addEventListener('copy', function(event) {
if (event instanceof ClipboardCopyCopiedEvent) {
// ...
}
});
```

**After**:

```js
import {
PfClipboardCopyCopiedEvent
} from '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';

addEventListener('copy', function(event) {
if (event instanceof PfClipboardCopyCopiedEvent) {
// ...
}
});
```

127 changes: 127 additions & 0 deletions elements/form-control.css
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion elements/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"types": "./pfe.d.ts",
"exports": {
".": "./pfe.min.js",
"./form-control.css": "./form-control.css",
"./form-control.css.js": "./form-control.css.js",
"./pf-accordion/BaseAccordion.js": "./pf-accordion/BaseAccordion.js",
"./pf-accordion/BaseAccordionHeader.js": "./pf-accordion/BaseAccordionHeader.js",
"./pf-accordion/BaseAccordionPanel.js": "./pf-accordion/BaseAccordionPanel.js",
Expand All @@ -28,7 +30,6 @@
"./pf-card/pf-card.js": "./pf-card/pf-card.js",
"./pf-chip/pf-chip.js": "./pf-chip/pf-chip.js",
"./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
"./pf-clipboard-copy/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js",
"./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
"./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js",
"./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
Expand Down
6 changes: 0 additions & 6 deletions elements/pf-clipboard-copy/BaseClipboardCopy.css
View file

This file was deleted.

29 changes: 0 additions & 29 deletions elements/pf-clipboard-copy/BaseClipboardCopy.ts
View file

This file was deleted.

155 changes: 74 additions & 81 deletions elements/pf-clipboard-copy/pf-clipboard-copy.css
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,110 @@
.container {
display: flex;
flex-direction: column;
}

#input-group,
#wrapper,
pf-tooltip,
pf-button {
display: flex;
:host {
--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
--pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md, 1rem);
--pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md, 1rem);
--pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md, 1rem);
--pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md, 1rem);
--pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
--pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
--pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
--pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
--pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
--pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
--pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
--pf-c-clipboard-copy--m-inline--PaddingTop: 0;
--pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
--pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);
--pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
--pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
--pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
--pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
--pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
--pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
--pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
--pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
--pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
--pf-icon--size: var(--pf-global--FontSize--md, 1rem);
}

.inline #wrapper {
display: inline-flex;
[hidden],
[inert],
[inert]::slotted(*) {
display: none !important;
}

pf-button {
height: 100%;
#container {
flex-direction: column;
}

pf-tooltip::part(invoker) {
#container,
#input-group,
#wrapper {
display: flex;
height: 100%;
}

:host {
--pf-icon--size: var(--pf-global--FontSize--md, 1rem);
.inline #wrapper {
display: inline-flex;
}

#input-group > * + * {
margin-left: -1px;
}

input {
color: var(--pf-c-form-control--Color,
var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
color: var(--pf-c-form-control--Color);
width: var(--pf-c-form-control--Width);
padding:
var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))
var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))
var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))
var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));
var(--pf-c-form-control--PaddingTop)
var(--pf-c-form-control--PaddingRight)
var(--pf-c-form-control--PaddingBottom)
var(--pf-c-form-control--PaddingLeft);
font-size: var(--pf-c-form-control--FontSize);
line-height: var(--pf-c-form-control--LineHeight);
background-color: var(--pf-c-form-control--BackgroundColor);
background-repeat: no-repeat;
border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;
border: var(--pf-c-form-control--BorderWidth) solid;
border-color:
var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))
var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))
var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))
var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));
border-radius: var(--pf-c-form-control--BorderRadius, 0);
var(--pf-c-form-control--BorderTopColor)
var(--pf-c-form-control--BorderRightColor)
var(--pf-c-form-control--BorderBottomColor)
var(--pf-c-form-control--BorderLeftColor);
border-radius: var(--pf-c-form-control--BorderRadius);
margin: 0;
appearance: none;
height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);
height: var(--pf-c-form-control--Height);
text-overflow: ellipsis;
flex: 1 1 auto;
}

input[disabled] {
background-color: var(--pf-c-form-control--readonly--BackgroundColor,
var(--pf-global--disabled-color--300, #f0f0f0));
background-color: var(--pf-c-form-control--readonly--BackgroundColor);
}

textarea {
display: flex;
flex: 1 1 auto;
padding:
var(--pf-c-clipboard-copy__expandable-content--PaddingTop,
var(--pf-global--spacer--md, 1rem))
var(--pf-c-clipboard-copy__expandable-content--PaddingRight,
var(--pf-global--spacer--md, 1rem))
var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,
var(--pf-global--spacer--md, 1rem))
var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,
var(--pf-global--spacer--md, 1rem));
var(--pf-c-clipboard-copy__expandable-content--PaddingTop)
var(--pf-c-clipboard-copy__expandable-content--PaddingRight)
var(--pf-c-clipboard-copy__expandable-content--PaddingBottom)
var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
word-wrap: break-word;
background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));
background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor);
background-clip: padding-box;
border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,
var(--pf-global--BorderColor--100, #d2d2d2));
border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor);
border-width:
var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)
var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,
var(--pf-global--BorderWidth--sm, 1px))
var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,
var(--pf-global--BorderWidth--sm, 1px))
var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,
var(--pf-global--BorderWidth--sm, 1px));
var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth)
var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth)
var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth)
var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth);
box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
margin: 0;
color: inherit;
font-family: inherit;
}

.container.code textarea {
#container.code textarea {
font-family: var(--pf-global--FontFamily--monospace,
var(--pf-global--FontFamily--redhat--monospace,
"RedHatMono",
Expand All @@ -107,57 +117,40 @@ textarea {
monospace));
}

.container.expanded #expand-button pf-icon {
#container.expanded #expand-button pf-icon {
rotate: 90deg;
}

.container.inline {
#container.inline {
display: inline;
background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,
var(--pf-global--BackgroundColor--200, #f0f0f0));
padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);
padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);
padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,
var(--pf-global--spacer--xs, 0.25rem));
background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop);
padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom);
padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft);
word-break: break-word;
white-space: normal;
}

#input-group {
display: flex;
height: 100%;
}

.container:is(.compact, .inline) #input-group {
#container:is(.compact, .inline) #input-group {
display: contents;
}

.container:is(.compact, .inline) pf-tooltip,
.container:is(.compact, .inline) pf-tooltip::part(invoker) {
display: inline-flex;
}

.container:is(.compact, .inline) #input-group {
background-color: var(--pf-c-button--m-plain--BackgroundColor,
var(--pf-global--BackgroundColor--200, #f0f0f0));
}

.container.compact.block {
display: block;
background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,
var(--pf-global--BackgroundColor--200, #f0f0f0));
background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
}

.container:is(.compact, .inline) #copy-button,
.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {
--pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,
var(--pf-global--spacer--xs, 0.25rem));
--pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,
var(--pf-global--spacer--xs, 0.25rem));
--pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,
var(--pf-global--spacer--xs, 0.25rem));
--pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,
var(--pf-global--spacer--sm, 0.5rem));
--pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop) !important;
--pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight) !important;
--pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom) !important;
--pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft) !important;
margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));
margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));
}
Expand Down
Loading

0 comments on commit 9a6e651

Please sign in to comment.