refactor(accordion): inherit border radius instead

Author: brandyscarney

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -19,13 +19,19 @@
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-round) {
+  --border-radius: #{globals.$ion-border-radius-400};
+
   @include globals.border-radius(globals.$ion-border-radius-400);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-soft) {
+  --border-radius: #{globals.$ion-border-radius-200};
+
   @include globals.border-radius(globals.$ion-border-radius-200);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
+  --border-radius: #{globals.$ion-border-radius-0};
+
   @include globals.border-radius(globals.$ion-border-radius-0);
 }

core/src/components/accordion/accordion.ionic.scss

@@ -42,7 +42,7 @@
 // The border is removed from the item in the header because
 // we are adding a border to the ::after element of the accordion.
 ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: inherit;
   --color: #{globals.$ion-primitives-neutral-1200};
   --border-width: 0;
   --inner-border-width: 0;
@@ -55,19 +55,6 @@
   @include globals.typography(globals.$ion-heading-h6-medium);
 }
 
-// Shape only applies when inside an inset accordion group
-:host(.in-accordion-group-expand-inset.in-accordion-group-shape-round) ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-400};
-}
-
-:host(.in-accordion-group-expand-inset.in-accordion-group-shape-soft) ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-200};
-}
-
-:host(.in-accordion-group-expand-inset.in-accordion-group-shape-rectangular) ::slotted(ion-item[slot="header"]) {
-  --border-radius: #{globals.$ion-border-radius-0};
-}
-
 // Accordion Content
 // --------------------------------------------------
 

core/src/components/accordion/accordion.tsx

@@ -444,9 +444,6 @@ export class Accordion implements ComponentInterface {
           'accordion-animated': this.shouldAnimate(),
 
           'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
-          'in-accordion-group-shape-round': hostContext('.accordion-group-shape-round', this.el),
-          'in-accordion-group-shape-soft': hostContext('.accordion-group-shape-soft', this.el),
-          'in-accordion-group-shape-rectangular': hostContext('.accordion-group-shape-rectangular', this.el),
         }}
       >
         <div