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;
  }