fix(accordion,stepper): adjust panel title width to align panel descr…

…iptions (#1524)

CDE-2220

.storybook/stories/accordion/accordion.stories.ts

@@ -33,6 +33,8 @@ export default {
     panelCount: 4,
     title: 'Title',
     content: 'Hello World!',
+    showDescriptions: false,
+    alignmentTest: false,
   },
 };
 
@@ -42,7 +44,10 @@ const template = `
       *ngFor="let _ of createArray(panelCount); let i = index"
       [clrAccordionPanelOpen]="!!openIndices[i]"
     >
-      <clr-accordion-title>{{ title }} {{ i + 1 }}</clr-accordion-title>
+      <clr-accordion-title>
+        {{ title }} {{ i + 1 }} {{ alignmentTest && i === 2 ? '(alignment test)' : '' }}
+      </clr-accordion-title>
+      <clr-accordion-description *ngIf="showDescriptions">Panel {{ i + 1 }} description.</clr-accordion-description>
       <clr-accordion-content>{{ content }} {{ i + 1 }}</clr-accordion-content>
     </clr-accordion-panel>
   </clr-accordion>
@@ -71,3 +76,18 @@ export const MultiplePanelsOpened: StoryObj = {
     openIndices: [true, true, false, false],
   },
 };
+
+export const WithPanelDescriptions: StoryObj = {
+  render: AccordionTemplate,
+  args: {
+    showDescriptions: true,
+  },
+};
+
+export const AlignmentTest: StoryObj = {
+  render: AccordionTemplate,
+  args: {
+    showDescriptions: true,
+    alignmentTest: true,
+  },
+};

.storybook/stories/stepper/stepper.stories.ts

@@ -37,14 +37,15 @@ export default {
     stepCount: 3,
     form: formMappingKey,
     ngSubmit: action('ngSubmit'),
+    alignmentTest: false,
   },
 };
 
 const StepperTemplate: StoryFn = args => ({
   template: `
     <form clrStepper [clrInitialStep]="clrInitialStep" [formGroup]="form" (ngSubmit)="ngSubmit()">
       <clr-stepper-panel *ngFor="let _ of createArray(stepCount); let i = index" formGroupName="step{{ i + 1 }}">
-        <clr-step-title>Step {{ i + 1 }}</clr-step-title>
+        <clr-step-title>Step {{ i + 1 }} {{ alignmentTest && i === 2 ? '(alignment test)' : '' }}</clr-step-title>
         <clr-step-description>Step {{ i + 1 }} description.</clr-step-description>
         <clr-step-content *clrIfExpanded>
           <clr-input-container>
@@ -80,3 +81,10 @@ function getForm() {
 export const Stepper: StoryObj = {
   render: StepperTemplate,
 };
+
+export const StepperAlignmentTest: StoryObj = {
+  render: StepperTemplate,
+  args: {
+    alignmentTest: true,
+  },
+};

projects/angular/src/accordion/_accordion.clarity.scss

@@ -115,6 +115,7 @@
     .clr-accordion-title {
       min-width: accordion-variables.$clr-accordion-step-title-min-width;
       max-width: mixins.baselinePx(264);
+      width: 100%;
       @media (min-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
         margin-left: tokens.$cds-global-space-7;
       }