Enable seamless panels to inherit any parent's colours (#2501)

* Change seamless panels * Improve look of seamless panels * Add tests * Update userguide example --------- Co-authored-by: Chan Yu Cheng <[email protected]> Co-authored-by: Hannah <[email protected]>
MarkBind · Apr 19, 2024 · 8063cdb · 8063cdb
1 parent fc776ba
commit 8063cdb
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 9 deletions.
diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md
@@ -104,6 +104,14 @@ plain text ...
 </variable>
 </include>
 
+<box background-color="#C51E3A" color="white">
+
+  :bulb: Seamless panels inherit the background colour and text colour of any parents!
+  <br/>
+  <panel type="seamless" header="This is an example seamless panel">
+    This is its content.
+  </panel>
+</box>
 
 **Show/Hide buttons using `no-switch`, `no-close`, or `no-minimized-switch`.**
 

diff --git a/packages/vue-components/src/__tests__/Panels.spec.js b/packages/vue-components/src/__tests__/Panels.spec.js
@@ -1,6 +1,17 @@
 import { mount } from '@vue/test-utils';
 import NestedPanel from '../panels/NestedPanel.vue';
 
+const DEFAULT_STUBS = { 'nested-panel': NestedPanel };
+
+const BOX_CONTAINER = `
+  <div style="color:white;">
+    <nested-panel type="seamless">
+      <template #header>Test Header</template>
+      <p>Test Content</p>
+    </nested-panel>
+  </div>
+`;
+
 describe('NestedPanels', () => {
   test('should show header when collapsed with expandHeaderless as false', async () => {
     const wrapper = mount(NestedPanel, {
@@ -72,4 +83,37 @@ describe('NestedPanels', () => {
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  test('renders a seamless panel with a transparent background', async () => {
+    const wrapper = mount(NestedPanel, {
+      propsData: {
+        type: 'seamless',
+      },
+      slots: {
+        header: 'test header',
+      },
+    });
+
+    expect(wrapper.find('.card').classes()).toContain('card-seamless');
+    expect(wrapper.find('.card-header').classes()).toContain('bg-transparent');
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('seamless panel should inherit parent background color', () => {
+    const ParentComponent = {
+      template: BOX_CONTAINER,
+    };
+
+    const wrapper = mount(ParentComponent, {
+      stubs: DEFAULT_STUBS,
+    });
+
+    const parentElement = wrapper.find('div');
+    const seamlessPanel = wrapper.findComponent(NestedPanel);
+
+    expect(seamlessPanel.props('type')).toBe('seamless');
+    expect(window.getComputedStyle(seamlessPanel.element).backgroundColor).toBe(
+      window.getComputedStyle(parentElement.element).backgroundColor,
+    );
+  });
 });
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Panels.spec.js.snap
@@ -1,5 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`NestedPanels renders a seamless panel with a transparent background 1`] = `
+<div
+  class="card-container"
+>
+  <div
+    class="card expandable-card card-seamless border-0"
+  >
+    <div
+      class="card-header header-toggle bg-transparent border-0"
+    >
+      <div
+        class="caret-wrapper"
+      >
+        <span
+          class="glyphicon glyphicon-chevron-right"
+        />
+      </div>
+       
+      <div
+        class="header-wrapper-seamless header-wrapper card-title bg-transparent"
+      >
+        test header
+      </div>
+       
+      <div
+        class="button-wrapper"
+      >
+        <button
+          class="collapse-button btn btn-outline-light"
+          style="display: none;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="collapse-icon glyphicon glyphicon-menu-down"
+          />
+        </button>
+         
+        <button
+          class="close-button btn btn-outline-light seamless-button"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="glyphicon glyphicon-remove"
+          />
+        </button>
+         
+        <button
+          class="popup-button btn btn-outline-light seamless-button"
+          style="display: none;"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="glyphicon glyphicon-new-window"
+          />
+        </button>
+      </div>
+    </div>
+     
+    <div
+      class="card-collapse"
+      style="max-height: 0px;"
+    >
+      <!---->
+       
+      <hr />
+    </div>
+     
+    <transition-stub
+      name="peek-read-more-fade"
+    >
+      <!---->
+    </transition-stub>
+  </div>
+</div>
+`;
+
 exports[`NestedPanels should have span.anchor when id is present 1`] = `
 <div
   class="card-container"

diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue
@@ -5,7 +5,13 @@
     :class="['card-container', addClass]"
   >
     <span class="morph">
-      <button :class="['morph-display-wrapper', 'btn', btnType]" @click="open()">
+      <button
+        :class="['morph-display-wrapper',
+                 {'morph-display-wrapper-seamless': isSeamless},
+                 'btn',
+                 btnType]"
+        @click="open()"
+      >
         <div
           v-if="!noMinimizedSwitch"
           class="minimal-caret-wrapper"
@@ -27,7 +33,7 @@
     ref="cardContainer"
     :class="['card-container', addClass]"
   >
-    <div :class="['card', { 'expandable-card': isExpandableCard }, borderType]">
+    <div :class="['card', { 'expandable-card': isExpandableCard, 'card-seamless': isSeamless }, borderType]">
       <div
         :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
         @click.prevent.stop="isExpandableCard && toggle()"
@@ -40,8 +46,8 @@
         </div>
         <div
           ref="headerWrapper"
-          :class="['header-wrapper card-title', cardType,
-                   {'text-white':!isLightBg, 'header-transparent':!shouldShowHeader}]"
+          :class="[{'header-wrapper-seamless': isSeamless}, 'header-wrapper card-title', cardType,
+                   {'text-white':!isLightBg && !isSeamless, 'header-transparent':!shouldShowHeader}]"
         >
           <slot name="header"></slot>
         </div>
@@ -96,6 +102,7 @@
             <panel-switch
               v-show="isExpandableCard && bottomSwitchBool"
               :is-open="localExpanded"
+              :is-seamless="isSeamless"
               @click.native.stop.prevent="toggle(true)"
             />
           </div>
@@ -133,8 +140,10 @@ export default {
       return this.type === 'seamless';
     },
     btnType() {
-      if (this.isSeamless || this.type === 'light') {
+      if (this.type === 'light') {
         return 'btn-outline-secondary';
+      } else if (this.isSeamless) {
+        return '';
       }
       return `btn-outline-${this.type || 'secondary'}`;
     },
@@ -151,12 +160,12 @@ export default {
     },
     cardType() {
       if (this.isSeamless) {
-        return 'bg-white';
+        return 'bg-transparent';
       }
       return `bg-${this.type || 'light'}`;
     },
     isLightBg() {
-      return this.cardType === 'bg-light' || this.cardType === 'bg-white' || this.cardType === 'bg-warning';
+      return this.cardType === 'bg-light' || this.cardType === 'bg-warning';
     },
   },
 };
@@ -175,6 +184,13 @@ export default {
     .seamless-button {
         opacity: 0;
         transition: 0.3s opacity;
+        color: inherit;
+        border-color: inherit;
+    }
+
+    .seamless-button:hover {
+        border-color: transparent;
+        background-color: color-mix(in srgb, currentcolor 25%, transparent);
     }
 
     .card-header:hover .seamless-button {
@@ -229,6 +245,10 @@ export default {
         width: 100%;
     }
 
+    .card-seamless {
+        background-color: inherit;
+    }
+
     .card-title {
         display: inline-block;
         font-size: 1em;
@@ -279,6 +299,8 @@ export default {
 
     .card-collapse > hr {
         margin-top: 0;
+        background-color: currentcolor;
+        opacity: 0.5;
     }
 
     .card-group > .card-container > .expandable-card {
@@ -292,7 +314,7 @@ export default {
 
     .bottom-button-wrapper > .collapse-button {
         margin-top: 5px;
-        opacity: 0.2;
+        opacity: 0.5;
     }
 
     .bottom-button-wrapper > .collapse-button:hover {
@@ -324,6 +346,14 @@ export default {
         align-items: center;
     }
 
+    .morph-display-wrapper-seamless {
+        color: inherit;
+    }
+
+    .morph-display-wrapper-seamless:hover {
+        color: inherit;
+    }
+
     /* Bootstrap extra small(xs) responsive breakpoint */
     @media (width <= 575.98px) {
         .header-wrapper {

diff --git a/packages/vue-components/src/panels/PanelSwitch.vue b/packages/vue-components/src/panels/PanelSwitch.vue
@@ -1,7 +1,9 @@
 <template>
   <button
     type="button"
-    :class="['collapse-button', 'btn', isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
+    :class="['collapse-button',
+             'btn',
+             isSeamless ? 'btn-seamless' : isLightBg ? 'btn-outline-secondary' : 'btn-outline-light']"
   >
     <span
       :class="['collapse-icon', 'glyphicon', 'glyphicon-menu-down', {'opened': isOpenBool}]"
@@ -23,6 +25,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    isSeamless: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     isOpenBool() {
@@ -33,6 +39,16 @@ export default {
 </script>
 
 <style>
+    .btn-seamless {
+        color: inherit;
+        border-color: inherit;
+    }
+
+    .btn-seamless:hover {
+        color: inherit;
+        background-color: inherit;
+    }
+
     .collapse-button {
         font-size: 10px !important;
         float: right;