diff --git a/CHANGELOG-prerelease.md b/CHANGELOG-prerelease.md index b041f5e4e9..7d0d493678 100644 --- a/CHANGELOG-prerelease.md +++ b/CHANGELOG-prerelease.md @@ -1,7 +1,8 @@ ## Prerelese 46 ( TBD ) - [27fee5f](https://github.com/patternfly/patternfly-elements/commit/27fee5f5c5eb021ac126f3767dd0299f5cda8231) fix: pfe-tabs check for tagName on addedNode mutation before continuing -- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Add clearfix within tab and accordion panels +- [2c950b0](https://github.com/patternfly/patternfly-elements/commit/2c950b08f7638787df50aa5ee6738f1205ea3a9d) fix: Add clearfix within tab and accordion panels +- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add border to the card component ## Prerelese 45 ( 2020-04-27 ) diff --git a/elements/pfe-card/README.md b/elements/pfe-card/README.md index 8bf9b697c2..6a570f772d 100644 --- a/elements/pfe-card/README.md +++ b/elements/pfe-card/README.md @@ -54,6 +54,7 @@ There are several attributes available for customizing the visual treatment of t - `pfe-img-src`: Optional background image applied to the entire card container. Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default. - `pfe-size`: Optionally adjusts the padding on the container. Accepts: `small`. - `pfe-overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`. +- `pfe-border`: Optionally apply a border color and weight to the entire card container. The default color and weight is `#d2d2d2` and `1px`, respectively. ## Variables There are several powerful variables available to hook into and override default styles. diff --git a/elements/pfe-card/demo/index.html b/elements/pfe-card/demo/index.html index a920c99151..353ca96932 100644 --- a/elements/pfe-card/demo/index.html +++ b/elements/pfe-card/demo/index.html @@ -87,9 +87,9 @@

<pfe-card>

- +

Lightest card

-

This is the lightest pfe-card and a link.

+

This is the lightest pfe-card and a link with pfe-border.

Try diff --git a/elements/pfe-card/src/pfe-card.scss b/elements/pfe-card/src/pfe-card.scss index 41c623bc2f..48367a72de 100644 --- a/elements/pfe-card/src/pfe-card.scss +++ b/elements/pfe-card/src/pfe-card.scss @@ -18,7 +18,7 @@ $variables: ( BorderRadius: pfe-var(surface--border-radius), //-- Border variable encompasses width, style, and color - Border: #{pfe-local(BorderWeight, 0)} #{pfe-local(BorderStyle, solid)} #{pfe-local(BorderColor, transparent)}, + Border: #{pfe-local(BorderWidth, 0)} #{pfe-local(BorderStyle, solid)} #{pfe-local(BorderColor, #{pfe-color(surface--border)})}, //-- Color properties BackgroundColor: pfe-color(surface--base), @@ -98,6 +98,10 @@ $variables: ( --pfe-card--PaddingLeft: #{pfe-var(container-spacer)}; } +:host([pfe-border]:not([pfe-border="false"])) { + --pfe-card--BorderWidth: #{map-get($pfe-vars, surface--border-width)}; +} + // Targets the wrappers in the shadow DOM .pfe-card { &__header, diff --git a/elements/pfe-card/test/pfe-card_test.html b/elements/pfe-card/test/pfe-card_test.html index f58dd74136..42dec0b300 100644 --- a/elements/pfe-card/test/pfe-card_test.html +++ b/elements/pfe-card/test/pfe-card_test.html @@ -204,6 +204,17 @@

Card 4

test("it should have reduced padding when pfe-size is small", () => { card[0].setAttribute("pfe-size", "small"); assert.equal(getComputedStyle(card[0], null)["padding"], "16px"); + card[0].removeAttribute("pfe-size"); + }); + + test("it should have a standard border when pfe-border is set", done => { + card[0].setAttribute("pfe-border", ""); + + flush(() => { + assert.deepEqual(getColor(card[0], "border-left-color"), hexToRgb("#d2d2d2")); + assert.equal(getComputedStyle(card[0], null)["border-left-width"], "1px"); + done(); + }); }); // Iterate over the slots object to test expected results