-
Notifications
You must be signed in to change notification settings - Fork 106
feat(card): pfe-card 1:1 #2222
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.
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
Merged
feat(card): pfe-card 1:1 #2222
Changes from all commits
Commits
Show all changes
42 commits
Select commit
Hold shift + click to select a range
be6724e
fix: initial commit for pfv4 card
brianferry 57aa9b6
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry 8242cdd
fix: adding BaseCard.ts / scss and reformatting stylings
brianferry ec577c6
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry a787353
fix: updating the --pf-c-card css
brianferry 85e4211
fix: updating the --pf-c-card css
brianferry 28d11cc
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry b23e668
Merge branch 'feat/pfe-card-pfv4' of https://github.com/patternfly/pa…
brianferry be22169
fix: export basecard.js
brianferry 1c6bb61
fix: updating the base styles to match new format
brianferry ff21901
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry 44de05d
fix: removing attributes from basecard
brianferry 94443b5
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry a87ac71
chore: updating the pfe-card styles and the styledocs
brianferry 2ac9277
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry f3c9bb4
fix: updating font-size to not be private variable for user data
brianferry 8813c0f
fix: removing old styles for demos, adding newlines back for css
brianferry 3c15dba
fix: adding stylings back to the pfe-card demo and adding spacing for…
brianferry 1ad246e
chore: merging from main
brianferry 79c0d57
fix: updating demo to show fullHeight and border more easily. adding…
brianferry e7ab645
chore: updating to main
brianferry 8daa07b
test(card): :white_check_mark: updating tests for pfe-card 1:1
brianferry fc42425
Merge branch 'main' of https://github.com/patternfly/patternfly-eleme…
brianferry 9a1b996
fix: removing pfe specific class names from basecard
brianferry 782b569
docs: updating docs to use pfe-switch instead of checkbox inputs
brianferry 7fb7b0d
fix(card): updating fullHeight to full-height attribute
brianferry fa561b4
Merge branch 'main' into feat/pfe-card-pfv4
brianferry cb48f4d
fix(card): fixing broken unit test, adding accessibility tests, artic…
brianferry 476dc90
feat(card): adding a11ysnapshot plugin, test to card spec
brianferry 52bda97
Merge branch 'main' into feat/pfe-card-pfv4
brianferry dc009ca
Merge branch 'main' into feat/pfe-card-pfv4
bennypowers f8ded8f
Merge remote-tracking branch 'origin/main' into feat/pfe-card-pfv4
Nouveau 24df42d
Merge branch 'main' into feat/pfe-card-pfv4
brianferry e91a4a1
fix(card): clean up in demo and tests
Nouveau 329d131
Merge branch 'feat/pfe-card-pfv4' of github.com:patternfly/patternfly…
brianferry fa3b61b
Merge branch 'main' into feat/pfe-card-pfv4
brianferry d356003
Merge branch 'main' into feat/pfe-card-pfv4
brianferry 01fbef3
Merge branch 'main' into feat/pfe-card-pfv4
bennypowers 8c4e691
fix(card): hide empty regions
bennypowers 4ae5e9d
docs(card): update demo
bennypowers 350f7af
test(card): update tests
bennypowers 98e3a58
Merge branch 'main' into feat/pfe-card-pfv4
bennypowers File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| --- | ||
| "@patternfly/pfe-card": major | ||
| --- | ||
|
|
||
| ## Patternfly Card 1:1 🎉 | ||
|
|
||
| This release migrates Patternfly Card `pfe-card` to Patternfly 1:1 and matches the style and functionality to PFv4. | ||
|
|
||
| This will have several breaking changes from the existing `pfe-card`. Many of the attributes will be moving to `rh-card`. | ||
|
|
||
| ### NEW: Features and Updates | ||
| - Styles now match PFv4 Card. | ||
| - Size Attribute: `small` is updated to `compact` and `large` is now an option | ||
| - Example: `<pfe-card size='large'></pfe-card>`. | ||
| - Rounded Attribute: NEW! Optionally applies a border radius for the drop shadow and/or border of the card. | ||
| - Example: `<pfe-card rounded></pfe-card>` | ||
| - FullHeight Attribute: NEW! Optionally allow the card to take up the full height of the parent element. | ||
| - Example: `<pfe-card fullHeight></pfe-card>` | ||
| - Plain Attribute: NEW! Removes the border on the card element. | ||
| - Example: `<pfe-card plain></pfe-card>` | ||
|
|
||
|
|
||
| ### Breaking Changes | ||
| - No longer includes an `imgSrc` attribute. | ||
| - No longer has a dark mode theme. | ||
| - No longer includes a `border` attribute. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| [part=header] { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
|
|
||
| [part=body] ::slotted(:not([slot]):first-of-type) { | ||
| margin-block-start: 0; | ||
| } | ||
|
|
||
| [part=body] ::slotted(:not([slot]):last-of-type) { | ||
| margin-block-end: 0; | ||
| } | ||
|
|
||
| [part=footer] { | ||
| display: flex; | ||
| gap: 0.5em; | ||
| } | ||
|
|
||
| .empty { | ||
| display: none; | ||
| } | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { LitElement, html } from 'lit'; | ||
| import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; | ||
|
|
||
| import { classMap } from 'lit/directives/class-map.js'; | ||
|
|
||
| import style from './BaseCard.scss'; | ||
|
|
||
| /** | ||
| * This element creates a header, body, and footer region in which to place | ||
| * content or other components. | ||
| * | ||
| * @summary Gives a preview of information in a small layout | ||
| * | ||
| * @slot header | ||
| * If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). | ||
| * An icon, svg, or use of the icon component are also valid in this region. | ||
| * @slot - Any content that is not designated for the header or footer slot, will go to this slot. | ||
| * @slot footer | ||
| * Use this slot for anything that you want to be stuck to the base of the card. | ||
| * | ||
| * @csspart header - The container for *header* content | ||
| * @csspart body - The container for *body* content | ||
| * @csspart footer - The container for *footer* content | ||
| */ | ||
| export abstract class BaseCard extends LitElement { | ||
| static readonly version = '{{version}}'; | ||
|
|
||
| static readonly styles = [style]; | ||
|
|
||
| protected slots = new SlotController(this, 'header', null, 'footer'); | ||
|
|
||
| render() { | ||
| return html` | ||
| <article> | ||
| <header id="header" | ||
| part="header" | ||
| class="${classMap({ empty: !this.slots.hasSlotted('header') })}"> | ||
| <slot name="header"></slot> | ||
| </header> | ||
| <div id="body" | ||
| part="body" | ||
| class="${classMap({ empty: !this.querySelector(':not([slot])') })}"> | ||
| <slot></slot> | ||
| </div> | ||
| <footer id="footer" | ||
| part="footer" | ||
| class="${classMap({ empty: !this.slots.hasSlotted('footer') })}"> | ||
| <slot name="footer"></slot> | ||
| </footer> | ||
| </article> | ||
| `; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js'; | ||
|
|
||
| export default pfeCustomElementsManifestConfig({ | ||
| globs: ['pfe-*.ts'], | ||
| globs: ['pfe-*.ts', 'BaseCard.ts'], | ||
| }); |
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,44 @@ | ||
| [data-demo] { | ||
| padding: 1em; | ||
| display: contents; | ||
| } | ||
|
|
||
| main { | ||
| padding: 2em; | ||
| background: #eeeeee; | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(200px, calc(25% - 32px))); | ||
| grid-auto-rows: max-content; | ||
| gap: 32px; | ||
| grid-template-columns: 1fr; | ||
| grid-template-rows: max-content 1fr; | ||
| } | ||
|
|
||
| .button-series::part(footer) { | ||
| display: flex; | ||
| gap: 15px; | ||
| @media (min-width: 800px) { | ||
| main { | ||
| grid-template-columns: 1fr 4fr; | ||
| grid-template-rows: 1fr; | ||
| } | ||
| } | ||
|
|
||
| #first-image { | ||
| grid-column: 1/2; | ||
| form { | ||
| display: grid; | ||
| grid-template-columns: max-content auto; | ||
| grid-auto-rows: max-content; | ||
| gap: 1em; | ||
| } | ||
|
|
||
| h2[slot="header"] { | ||
| font-size: 1.1em; | ||
| font-weight: bolder; | ||
| pfe-card { | ||
| max-width: 50%; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .custom-border { | ||
| --pfe-card--BorderColor: #eee; | ||
| --pfe-card--BorderWeight: 1px; | ||
| .resize { | ||
| padding: 2em; | ||
| resize: vertical; | ||
| overflow: auto; | ||
| min-height: 40vh; | ||
| background: repeating-linear-gradient( | ||
| 45deg, | ||
| #fff, | ||
| #fff 10px, | ||
| #eee 10px, | ||
| #eee 20px | ||
| ); | ||
| } |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,22 @@ | ||
| import '@patternfly/pfe-band'; | ||
| import '@patternfly/pfe-card'; | ||
| import '@patternfly/pfe-select'; | ||
| import '@patternfly/pfe-button'; | ||
| import '@patternfly/pfe-switch'; | ||
| const form = document.getElementById('card-settings'); | ||
| const card = document.querySelector('pfe-card'); | ||
|
|
||
| const root = document.querySelector('[data-demo="pfe-card"]')?.shadowRoot ?? document; | ||
|
|
||
| root.querySelector('#context-selector').addEventListener('select', event => { | ||
| event.target.closest('pfe-card').setAttribute('color', event.value); | ||
| form.addEventListener('change', function(event) { | ||
| const { checked } = event.target; | ||
| const { attribute } = event.target.dataset; | ||
| switch (attribute) { | ||
| case 'flat': | ||
| case 'rounded': | ||
| case 'plain': | ||
| case 'full-height': | ||
| card.toggleAttribute(attribute, checked); | ||
| break; | ||
| case 'size': | ||
| card.setAttribute('size', form.querySelector('label[for="size"]:not([hidden])').textContent.toLowerCase()); | ||
| break; | ||
| } | ||
| }); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.