feat(accordion-group): add the shape property and styles for the ionic theme (#29971)

- Adds support for the `shape` property in accordion group.
- Adds styles for the `"soft"`, `"round"` and `"rectangular"` shapes in the `ionic` theme
- Defaults the shape to `"round"` for the ionic theme
- Adds an e2e test for `shape` with screenshots of all shapes
- Renames the `accordion.e2e.ts` files in other tests to `accordion-group.e2e.ts` which also renames the screenshot folder

Author: brandyscarney

core/api.txt

@@ -18,6 +18,7 @@ ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion-group,prop,multiple,boolean | undefined,undefined,false,false
 ion-accordion-group,prop,readonly,boolean,false,false,false
+ion-accordion-group,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-accordion-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion-group,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-accordion-group,event,ionChange,AccordionGroupChangeEventDetail<any>,true

core/src/components.d.ts

@@ -136,6 +136,10 @@ export namespace Components {
           * This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
          */
         "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
+        /**
+          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5392,6 +5396,10 @@ declare namespace LocalJSX {
           * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
          */
         "readonly"?: boolean;
+        /**
+          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -12,9 +12,20 @@
 
 // Inset Accordion Group
 // --------------------------------------------------
-
 // Shape and padding only apply if the group is inset
+
 :host(.accordion-group-expand-inset) {
-  @include globals.border-radius(globals.$ion-border-radius-400);
   @include globals.padding(globals.$ion-space-100);
 }
+
+:host(.accordion-group-expand-inset.accordion-group-shape-round) {
+  @include globals.border-radius(globals.$ion-border-radius-400);
+}
+
+:host(.accordion-group-expand-inset.accordion-group-shape-soft) {
+  @include globals.border-radius(globals.$ion-border-radius-200);
+}
+
+:host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
+  @include globals.border-radius(globals.$ion-border-radius-0);
+}

core/src/components/accordion-group/accordion-group.tsx

@@ -60,6 +60,16 @@ export class AccordionGroup implements ComponentInterface {
    */
   @Prop() expand: 'compact' | 'inset' = 'compact';
 
+  /**
+   * Set to `"soft"` for an accordion group with slightly rounded corners,
+   * `"round"` for an accordion group with fully rounded corners, or
+   * `"rectangular"` for an accordion group without rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   * Only applies when `expand` is set to `"inset"`.
+   */
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
   /**
    * Emitted when the value property has changed as a result of a user action such as a click.
    *
@@ -278,9 +288,26 @@ export class AccordionGroup implements ComponentInterface {
     return Array.from(this.el.querySelectorAll(':scope > ion-accordion')) as HTMLIonAccordionElement[];
   }
 
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-11328): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
   render() {
     const { disabled, readonly, expand } = this;
     const theme = getIonTheme(this);
+    const shape = this.getShape();
 
     return (
       <Host
@@ -289,6 +316,7 @@ export class AccordionGroup implements ComponentInterface {
           'accordion-group-disabled': disabled,
           'accordion-group-readonly': readonly,
           [`accordion-group-expand-${expand}`]: true,
+          [`accordion-group-shape-${shape}`]: shape !== undefined,
         }}
         role="presentation"
       >