Merge pull request porsche-design-system#2911 from porsche-design-sys…

…tem/issue/2871

Issue/2871 hide border of Accordion if used as single item#2871

packages/components-js/src/pages/accordion.html

@@ -1,25 +1,25 @@
-<div class="playground light" title="should render accordion">
+<div class="playground light" title="should render single accordion">
   <p-accordion heading="Heading"></p-accordion>
 </div>
 
-<div class="playground light" title="should render accordion with slotted heading">
+<div class="playground light" title="should render single accordion with slotted heading">
   <p-accordion>
     <span slot="heading">Slotted heading</span>
   </p-accordion>
 </div>
 
-<div class="playground light" title="should render accordion size medium">
+<div class="playground light" title="should render single accordion size medium">
   <p-accordion heading="Heading (size=medium)" size="medium"></p-accordion>
 </div>
 
-<div class="playground light" title="should render accordion with breakpoint customizable size">
+<div class="playground light" title="should render single accordion with breakpoint customizable size">
   <p-accordion
     heading="Heading (size=responsive)"
     size="{ base: 'small', xs: 'medium', s: 'small', m: 'medium', l: 'small', xl: 'medium' }"
   ></p-accordion>
 </div>
 
-<div class="playground light" title="should render accordion with long heading that breaks to second line">
+<div class="playground light" title="should render single accordion with long heading that breaks to second line">
   <p-accordion style="max-width: 400px">
     <span slot="heading">Multiline heading, some extra long heading that should break to the second line</span>
   </p-accordion>
@@ -80,7 +80,7 @@
   ></p-accordion>
 </div>
 
-<div class="playground light" title="should render accordion with slotted and deeply nested anchor">
+<div class="playground light" title="should render single accordion with slotted and deeply nested anchor">
   <p-accordion heading="Heading" open="true">
     <span>
       Some slotted and deeply nested <a href="#">anchor</a>, <b>bold</b>, <strong>strong</strong>,
@@ -89,14 +89,14 @@
   </p-accordion>
 </div>
 
-<div class="playground light" title="should show correct alignment of accordion icon and link-pure icon">
+<div class="playground light" title="should show correct alignment of single accordion icon and link-pure icon">
   <p-link-pure stretch="true" align-label="left" href="https://www.porsche.com">Some label</p-link-pure>
   <p-accordion heading="Heading"></p-accordion>
 </div>
 
 <div
   class="playground light"
-  title="should render accordion in open state with overlapping content"
+  title="should render multiple accordions in open state with overlapping content"
   style="padding-bottom: 200px"
 >
   <p-accordion heading="Heading" open="true">

packages/components-react/projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap

@@ -2020,6 +2020,9 @@ exports[`should render dsr component for PAccordion 1`] = `
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;

packages/components/CHANGELOG.md

@@ -17,7 +17,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Added
 
 - Prop `submit-button` to show/hide a submit button for `Text Field Wrapper` `type="search"` if wrapped inside a form
-  [#2908](https://github.com/porsche-design-system/porsche-design-system/pull/2908)
+  ([#2908](https://github.com/porsche-design-system/porsche-design-system/pull/2908))
+
+#### Changed
+
+- Hide `border-bottom` of `Accordion` if used as single item
+  ([#2911](https://github.com/porsche-design-system/porsche-design-system/pull/2911))
 
 ### [3.9.0] - 2023-11-24
 

packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap

@@ -9,6 +9,9 @@ exports[`getComponentCss() should return correct css for size: "medium", compact
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -103,6 +106,9 @@ exports[`getComponentCss() should return correct css for size: "medium", compact
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -197,6 +203,9 @@ exports[`getComponentCss() should return correct css for size: "medium", compact
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -290,6 +299,9 @@ exports[`getComponentCss() should return correct css for size: "medium", compact
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -383,6 +395,9 @@ exports[`getComponentCss() should return correct css for size: "medium", compact
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -478,6 +493,9 @@ exports[`getComponentCss() should return correct css for size: "small", compact:
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -572,6 +590,9 @@ exports[`getComponentCss() should return correct css for size: "small", compact:
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -667,6 +688,9 @@ exports[`getComponentCss() should return correct css for size: "small", compact:
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -761,6 +785,9 @@ exports[`getComponentCss() should return correct css for size: "small", compact:
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -854,6 +881,9 @@ exports[`getComponentCss() should return correct css for size: "small", compact:
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;
@@ -949,6 +979,9 @@ exports[`getComponentCss() should return correct css for size: {"base":"small","
 :host([hidden]) {
   display: none !important;
 }
+:host(:only-of-type) {
+  border-bottom: 0 !important;
+}
 button {
   display: flex;
   position: relative;

packages/components/src/components/accordion/accordion-styles.ts

@@ -50,6 +50,7 @@ export const getComponentCss = (
         }),
         ...colorSchemeStyles,
         ...hostHiddenStyles,
+        '&(:only-of-type)': { borderBottom: 0 },
       }),
       button: {
         display: 'flex',

packages/components/src/components/carousel/carousel.tsx

@@ -276,7 +276,7 @@ export class Carousel {
                 theme={this.theme}
                 icon="arrow-last"
                 class="btn skip-link"
-                alignLabel="left"
+                alignLabel="start"
                 hideLabel={true}
                 aria-describedby={this.heading ? 'heading' : null}
               >