fix(wizard): allow long page titles to wrap in stepnav (#1211)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [x] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

Longer page titles in the wizard do not wrap, resulting in some text
being hidden. Longer text strings are necessary for
internationalization, as relative short titles in english can become
much longer in other languages.

Issue Number: CDE-1648, CDE-1645

## What is the new behavior?

Longer page titles will wrap when listed in the step nav. 

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/wizard/wizard-long-titles.stories.ts

@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { ClrWizard, ClrWizardModule, commonStringsDefault } from '@clr/angular';
+import { action } from '@storybook/addon-actions';
+import { Parameters } from '@storybook/addons';
+import { Story } from '@storybook/angular';
+
+import { setupStorybook } from '../../helpers/setup-storybook.helpers';
+
+const defaultStory: Story = args => ({
+  template: `
+    <clr-wizard
+      [clrWizardOpen]="clrWizardOpen"
+      [clrWizardClosable]="clrWizardClosable"
+      [clrWizardDisableStepnav]="clrWizardDisableStepnav"
+      [clrWizardPreventNavigation]="clrWizardPreventNavigation"
+      [clrWizardForceForwardNavigation]="clrWizardForceForwardNavigation"
+      [clrWizardPreventDefaultNext]="clrWizardPreventDefaultNext"
+      [clrWizardPreventDefaultCancel]="clrWizardPreventDefaultCancel"
+      [clrWizardPreventModalAnimation]="clrWizardPreventModalAnimation"
+      [clrWizardSize]="clrWizardSize"
+      [clrWizardStepnavAriaLabel]="clrWizardStepnavAriaLabel"
+      (clrWizardOpenChange)="clrWizardOpenChange($event)"
+      (clrWizardCurrentPageChanged)="clrWizardCurrentPageChanged($event)"
+      (clrWizardOnNext)="clrWizardOnNext($event)"
+      (clrWizardOnPrevious)="clrWizardOnPrevious($event)"
+      (clrWizardOnCancel)="clrWizardOnCancel($event)"
+      (clrWizardOnFinish)="clrWizardOnFinish($event)"
+      (clrWizardOnReset)="clrWizardOnReset($event)"
+    >
+      <clr-wizard-title [clrHeadingLevel]="clrHeadingLevel">Wizard</clr-wizard-title>
+
+      <clr-wizard-button type="cancel">Cancel</clr-wizard-button>
+      <clr-wizard-button type="previous">Previous</clr-wizard-button>
+      <clr-wizard-button type="next">Next</clr-wizard-button>
+      <clr-wizard-button type="finish">Finish</clr-wizard-button>
+
+      <clr-wizard-page *ngFor="let _ of createArray(pageCount); let i = index">
+        <ng-template clrPageTitle>{{ useLongPageTitles ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' : '' }} Page {{ i + 1 }}</ng-template>
+        <p>Content for page {{ i + 1 }}.</p>
+      </clr-wizard-page>
+    </clr-wizard>
+  `,
+  props: { ...args },
+});
+
+const defaultParameters: Parameters = {
+  title: 'Wizard/Wizard Long Titles',
+  component: ClrWizard,
+  argTypes: {
+    // inputs
+    clrHeadingLevel: { defaultValue: 1, control: { type: 'number', min: 1, max: 6 } },
+    clrWizardOpen: { defaultValue: true }, // the default value is really false, but that doesn't really work for the story
+    clrWizardClosable: { defaultValue: true },
+    clrWizardDisableStepnav: { defaultValue: false },
+    clrWizardPreventNavigation: { defaultValue: false },
+    clrWizardForceForwardNavigation: { defaultValue: false },
+    clrWizardPreventDefaultNext: { defaultValue: false },
+    clrWizardPreventDefaultCancel: { defaultValue: false },
+    clrWizardPreventModalAnimation: { defaultValue: false },
+    clrWizardStepnavAriaLabel: { defaultValue: commonStringsDefault.wizardStepnavAriaLabel },
+    clrWizardSize: { defaultValue: 'xl', control: { type: 'inline-radio', options: ['sm', 'md', 'lg', 'xl'] } },
+    // outputs
+    clrWizardOpenChange: { control: { disable: true } },
+    clrWizardCurrentPageChanged: { control: { disable: true } },
+    clrWizardOnNext: { control: { disable: true } },
+    clrWizardOnPrevious: { control: { disable: true } },
+    clrWizardOnCancel: { control: { disable: true } },
+    clrWizardOnFinish: { control: { disable: true } },
+    clrWizardOnReset: { control: { disable: true } },
+    // methods
+    cancel: { control: { disable: true } },
+    checkAndCancel: { control: { disable: true } },
+    close: { control: { disable: true } },
+    finish: { control: { disable: true } },
+    forceFinish: { control: { disable: true } },
+    forceNext: { control: { disable: true } },
+    goTo: { control: { disable: true } },
+    modalCancel: { control: { disable: true }, table: { disable: true } },
+    next: { control: { disable: true } },
+    open: { control: { disable: true } },
+    previous: { control: { disable: true } },
+    reset: { control: { disable: true } },
+    toggle: { control: { disable: true } },
+    // story helpers
+    createArray: { control: { disable: true }, table: { disable: true } },
+    pageCount: { control: { type: 'number', min: 1, max: 100 } },
+  },
+  args: {
+    // outputs
+    clrWizardOpenChange: action('clrWizardOpenChange'),
+    clrWizardCurrentPageChanged: action('clrWizardCurrentPageChanged'),
+    clrWizardOnNext: action('clrWizardOnNext'),
+    clrWizardOnPrevious: action('clrWizardOnPrevious'),
+    clrWizardOnCancel: action('clrWizardOnCancel'),
+    clrWizardOnFinish: action('clrWizardOnFinish'),
+    clrWizardOnReset: action('clrWizardOnFinish'),
+    // story helpers
+    createArray: n => new Array(n),
+    pageCount: 4,
+    useLongPageTitles: true,
+  },
+};
+
+const variants: Parameters[] = [];
+
+setupStorybook(ClrWizardModule, defaultStory, defaultParameters, variants);

.storybook/stories/wizard/wizard.stories.ts

@@ -40,7 +40,7 @@ const defaultStory: Story = args => ({
       <clr-wizard-button type="finish">Finish</clr-wizard-button>
 
       <clr-wizard-page *ngFor="let _ of createArray(pageCount); let i = index">
-        <ng-template clrPageTitle>Page {{ i + 1 }}</ng-template>
+        <ng-template clrPageTitle>{{ useLongPageTitles ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' : '' }} Page {{ i + 1 }}</ng-template>
         <p>Content for page {{ i + 1 }}.</p>
       </clr-wizard-page>
     </clr-wizard>
@@ -102,6 +102,7 @@ const defaultParameters: Parameters = {
     // story helpers
     createArray: n => new Array(n),
     pageCount: 4,
+    useLongPageTitles: false,
   },
 };
 

projects/angular/src/wizard/_wizard.clarity.scss

@@ -384,6 +384,11 @@
         }
       }
 
+      .clr-wizard-stepnav-link-title {
+        word-break: break-word;
+        white-space: normal;
+      }
+
       &.complete {
         @include mixins.css-var(
           border-color,
@@ -439,6 +444,9 @@
       text-align: left;
       text-transform: none;
       margin: 0;
+      height: auto;
+      min-height: variables.$clr_baselineRem_1_5;
+      max-width: inherit;
 
       .clr-wizard-stepnav-link-suffix {
         display: flex;

projects/ui/src/shim.cds-core.scss

@@ -1607,7 +1607,7 @@ $metropolis-font-family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, san
   --clr-wizard-stepnav-link-line-height: #{baselinePx(20)};
   --clr-wizard-stepnav-item-padding: #{tokens.$cds-global-space-4} 0 #{tokens.$cds-global-space-4} #{tokens.$cds-global-space-3};
   --clr-wizard-stepnav-padding: 0 0 var(--clr-wizard-main-padding) var(--clr-wizard-main-padding);
-  --clr-wizard-stepnav-link-padding: #{tokens.$cds-global-space-5};
+  --clr-wizard-stepnav-link-padding: calc(#{tokens.$cds-global-space-5} - #{tokens.$cds-global-space-1});
   --clr-wizard-stepnav-link-suffix-padding: 0 #{tokens.$cds-global-space-5} 0 0;
   --clr-wizard-stepnav-link-error-icon-color: #{tokens.$cds-alias-status-danger};
   --clr-wizard-stepnav-item-error-border-color: transparent;