feat(card)!: remove BaseCard (#2586)

* fix(card): moving styles and code from baseclass * chore: changset * feat(card): removing basecard class, styles * fix(card): remove unused basecard import * Update .changeset/sharp-spiders-float.md Co-authored-by: Benny Powers <[email protected]> * docs: make changeset major * fix(card): make slot controller private * feat(card): title slot, header actions --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]>
patternfly · Apr 11, 2024 · 71107fd · 71107fd
1 parent 25ff447
commit 71107fd
Show file tree

Hide file tree

Showing 12 changed files with 460 additions and 246 deletions.
diff --git a/.changeset/clever-yaks-thank.md b/.changeset/clever-yaks-thank.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": minor
+---
+`<pf-card>`: added `title` slot, for when the title is not inline with any slotted header actions
diff --git a/.changeset/sharp-spiders-float.md b/.changeset/sharp-spiders-float.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-card>`: Removes `BaseCard` base class. If your project extends `BaseCard`, we recommend extending `LitElement` instead and re-implementing card's properties. Alternately, extend from `PfCard`.
diff --git a/elements/pf-card/BaseCard.css b/elements/pf-card/BaseCard.css
diff --git a/elements/pf-card/BaseCard.ts b/elements/pf-card/BaseCard.ts
diff --git a/elements/pf-card/demo/header-images-and-actions.html b/elements/pf-card/demo/header-images-and-actions.html
@@ -0,0 +1,31 @@
+<pf-card>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xml:space="preserve"
+       slot="header"
+       fill="#030303"
+       width="300px"
+       viewBox="0 0 706.3 132.5">
+    <path d="M197.2 83.9V48.6h15.2c2.2 0 4.1.3 5.6 1s2.8 1.5 3.7 2.6c1 1.1 1.6 2.3 2.1 3.6.4 1.3.6 2.7.6 4 0 .9-.1 1.7-.3 2.6-.2.9-.5 1.7-.9 2.6-.4.8-.9 1.6-1.6 2.3-.6.7-1.4 1.4-2.3 1.9-.9.5-1.9 1-3.1 1.3a16 16 0 0 1-3.9.5H204v13h-6.8zm15.5-19.5c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1.1.4-.4.6-.9.8-1.5.2-.6.3-1.1.3-1.7 0-.5-.1-1-.2-1.6-.1-.5-.4-1-.7-1.5-.4-.5-.8-.8-1.4-1.1-.6-.3-1.4-.4-2.3-.4h-8.6v9.4h8.5zM271.6 83.9l-2.7-7.3h-13.6l-2.7 7.3h-7.3l13.5-35.4h6.7L279 83.9h-7.4zm-8.4-22.7c-.2-.4-.4-.9-.6-1.5-.2-.6-.4-1.1-.5-1.7-.1.5-.3 1.1-.5 1.7-.2.6-.4 1.1-.6 1.5l-3.5 9.2h9.2l-3.5-9.2zM317.3 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM370.2 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM408.5 83.9V48.6h24.1v6.5h-17.3v7.4h10.2V69h-10.2v8.5h18.4V84h-25.2zM462.4 83.9V48.6h16.4c2.2 0 4.1.3 5.6.9 1.5.6 2.7 1.4 3.6 2.5.9 1 1.6 2.2 2 3.5.4 1.3.6 2.7.6 4.2 0 1-.1 2-.4 3-.3 1-.7 2-1.3 2.9-.6.9-1.3 1.8-2.1 2.5-.9.7-1.8 1.3-3 1.7l6.9 14.1H483l-6.6-13.2h-7.1v13.2h-6.9zm16.5-19.6c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1 .4-.4.6-.9.8-1.5.2-.6.2-1.1.2-1.7 0-.6-.1-1.1-.2-1.7-.1-.6-.4-1-.7-1.5-.3-.4-.8-.8-1.4-1-.6-.3-1.4-.4-2.3-.4h-9.7v9.2h9.7zM541.9 83.9l-14-20.6c-.2-.3-.5-.8-.8-1.3-.3-.5-.5-1-.7-1.4.1.4.1.8.1 1.3V83.8h-6.8V48.6h6.4L539.8 69c.2.3.5.7.7 1.2.3.5.5 1 .7 1.4 0-.5-.1-1-.1-1.4V48.6h6.8V84h-6zM578.4 83.9V48.6h23.7v6.5h-16.9v7.4H596V69h-10.7v15h-6.9zM629.8 83.9V48.6h6.8v28.8h17.1V84h-23.9zM686.4 83.9V70.2l-13.1-21.6h7.7l8.7 14.5 8.7-14.5h7.7L693 70.2V84h-6.6z"/>
+    <path d="m49 103-21.2 4.9L0 68.4 70 0l70 68.4-27.8 39.4L91 103l-21 29.5L49 103zm21 25.7 18.6-26.2-7.2-1.7-11 16.2-11.9-16.2-7.2 1.7L70 128.7zm.4-15.6 9.2-13.5L70 6.7l-9.5 92.9 9.9 13.5zm-41.6-7.7 18.8-4.3-13.8-19.4 4.1-9.3L25.2 55 58 14.9 2.9 68.7l25.9 36.7zm82.4 0 16.3-23.1 9.6-13.6L82 14.9 114.9 55l-12.8 17.4 4.1 9.3L92.4 101l18.8 4.4zm-21.1-4.9 13.6-19.1-3-6.9-18 24.3 7.4 1.7zm-40.1 0 7.3-1.7-17.9-24.3-3 6.9L50 100.5zm31.9-4.3 17.6-24.1-26.6-60.5 9 84.6zm-23.8 0 9-84.6-26.6 60.5 17.6 24.1zM39 70 66.1 8.5 28 55.1 39 70zm62.1 0 11-15L74 8.5 101.1 70z"/>
+  </svg>
+  <pf-dropdown slot="header">
+    <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+    <pf-dropdown-menu slot="menu">
+      <pf-dropdown-item>Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Link</pf-dropdown-item>
+      <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+      <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+      <hr>
+      <pf-dropdown-item>Separated Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+    </pf-dropdown-menu>
+  </pf-dropdown>
+  <h2 slot="title">Title</h2>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
+</pf-card>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+</script>
diff --git a/elements/pf-card/demo/modifiers.html b/elements/pf-card/demo/modifiers.html
@@ -0,0 +1,107 @@
+<section>
+  <form id="card-settings">
+    <pf-switch id="flat" data-attribute="flat"></pf-switch>
+    <label for="flat">Flat</label>
+
+    <pf-switch id="rounded" data-attribute="rounded"></pf-switch>
+    <label for="rounded">Rounded</label>
+
+    <pf-switch id="plain" data-attribute="plain"></pf-switch>
+    <label for="plain">Plain</label>
+
+    <pf-switch id="full-height" data-attribute="full-height"></pf-switch>
+    <label for="full-height">Full Height</label>
+
+    <pf-switch id="size-compact" data-attribute="size" data-value="compact"></pf-switch>
+    <label for="size-compact">Compact</label>
+
+    <pf-switch id="size-large" data-attribute="size" data-value="large"></pf-switch>
+    <label for="size-large">Large</label>
+  </form>
+
+  <div id="card-container">
+    <pf-card>
+      <h2 slot="header">Lightest card</h2>
+      <p>This is the lightest pf-card and <a href="#">a link</a>, and <a href=".">a visited link</a> with <code>border</code>.</p>
+      <pf-button slot="footer">Try</pf-button>
+      <pf-button slot="footer">Buy</pf-button>
+    </pf-card>
+  </div>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-switch/pf-switch.js';
+
+  const form = document.getElementById('card-settings');
+  const card = document.querySelector('pf-card');
+
+  form.addEventListener('change', async function(event) {
+    await Promise.all(Array.from(document.querySelectorAll('pf-switch'), x => x.updateComplete));
+    const { checked } = event.target;
+    const { attribute, value } = event.target.dataset;
+    switch (attribute) {
+      case 'flat':
+      case 'rounded':
+      case 'plain':
+      case 'full-height':
+        card.toggleAttribute(attribute, checked);
+        break;
+      case 'size':
+        if (checked) {
+          card.setAttribute('size', value);
+        } else if (!checked && form.querySelector('[data-attribute="size"][checked]')) {
+          card.setAttribute('size', form.querySelector('[data-attribute="size"][checked]').dataset.value);
+        } else if(!checked) {
+          card.removeAttribute('size');
+        }
+        break;
+    }
+  });
+
+</script>
+
+<style>
+  [data-demo="pf-card"] { display: contents; }
+
+  section {
+    padding: 2em;
+    background: #eeeeee;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: max-content 1fr;
+    height: 100%;
+    position: relative;
+    @media (min-width: 800px) {
+      grid-template-columns: 1fr 4fr;
+      grid-template-rows: 1fr;
+    }
+  }
+
+  form {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-auto-rows: max-content;
+    gap: 1em;
+  }
+
+  pf-card {
+    max-width: 50%;
+    margin: 0 auto;
+  }
+
+  #card-container {
+    padding: 2em;
+    /* resize: vertical; */
+    /* overflow: auto; */
+    /* min-height: 40vh; */
+    background: repeating-linear-gradient(
+      45deg,
+      #fff,
+      #fff 10px,
+      #eee 10px,
+      #eee 20px
+    );
+  }
+</style>
diff --git a/elements/pf-card/demo/pf-card.html b/elements/pf-card/demo/pf-card.html
@@ -1,18 +1,15 @@
 <pf-card>
-  <h2 slot="header">Lightest card</h2>
-  <p>This is the lightest pf-card and <a href="#">a link</a>, and <a href=".">a visited link</a> with <code>border</code>.</p>
-  <pf-button slot="footer">Try</pf-button>
-  <pf-button slot="footer">Buy</pf-button>
+  <h2 slot="header">Header</h2>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
 </pf-card>
 
 <script type="module">
   import '@patternfly/elements/pf-card/pf-card.js';
-  import '@patternfly/elements/pf-button/pf-button.js';
 </script>
 
 <style>
 pf-card {
   margin: 1em;
-  max-width: 50%;
 }
 </style>
diff --git a/elements/pf-card/demo/settings.html b/elements/pf-card/demo/settings.html
diff --git a/elements/pf-card/demo/title-inline-with-images-and-actions.html b/elements/pf-card/demo/title-inline-with-images-and-actions.html
@@ -0,0 +1,22 @@
+<pf-card>
+  <h2 slot="header">This is a really really really really really really really really really really long header </h2>
+  <pf-dropdown slot="header">
+    <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+    <pf-dropdown-menu slot="menu">
+      <pf-dropdown-item>Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Link</pf-dropdown-item>
+      <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+      <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+      <hr>
+      <pf-dropdown-item>Separated Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+    </pf-dropdown-menu>
+  </pf-dropdown>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
+</pf-card>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+</script>