Added token for multiline line height in type ramp (#273)

Author: bheston

change/@adaptive-web-adaptive-ui-6e923336-80b2-4e6c-b796-5fd9a74a304b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added token for multiline line height in type ramp",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-explorer/src/app.ts

@@ -258,6 +258,9 @@ export class App extends FASTElement {
                         case "typeScaleLineHeightRatio":
                             typeRampScale.lineHeightRatio.setValueFor(app.canvas, source.typeScaleLineHeightRatio);
                             break;
+                        case "typeScaleLineHeightMultilineRatio":
+                            typeRampScale.lineHeightMultilineRatio.setValueFor(app.canvas, source.typeScaleLineHeightMultilineRatio);
+                            break;
                         case "typeScaleLineHeightSnap":
                             typeRampScale.lineHeightSnap.setValueFor(app.canvas, `${source.typeScaleLineHeightSnap}px`);
                             break;

packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts

@@ -133,6 +133,20 @@ export function controlPaneTemplate<T extends ControlPane>(): ElementViewTemplat
             />
         </div>
 
+        <div>
+            <label>Type scale line height ratio (multiline)</label>
+            <input
+                type="number"
+                min="1.0"
+                max="2.0"
+                step="0.01"
+                value=${(x) => x.state.typeScaleLineHeightMultilineRatio}
+                @input=${(x, c) =>
+                    x.state.typeScaleLineHeightMultilineRatio = parseFloat(c.eventTarget<HTMLInputElement>().value)
+                }
+            />
+        </div>
+
         <div>
             <label>Type scale line height snap (px)</label>
             <input

packages/adaptive-ui-explorer/src/state.ts

@@ -17,6 +17,7 @@ export interface State {
     typeScaleBaseSize: number;
     typeScaleMultiplier: number;
     typeScaleLineHeightRatio: number;
+    typeScaleLineHeightMultilineRatio: number;
     typeScaleLineHeightSnap: number;
     multiline: boolean;
 }
@@ -55,7 +56,10 @@ export class DefaultState implements State {
     public typeScaleMultiplier: number = 1.2;
 
     @observable
-    public typeScaleLineHeightRatio: number = 1.4;
+    public typeScaleLineHeightRatio: number = 1.3;
+
+    @observable
+    public typeScaleLineHeightMultilineRatio: number = 1.6;
 
     @observable
     public typeScaleLineHeightSnap: number = 2;

packages/adaptive-ui-explorer/src/typography/type-scale.ts

@@ -1,3 +1,3 @@
 import { TypeScaleTokenGroup } from "@adaptive-web/adaptive-ui";
 
-export const typeRampScale = new TypeScaleTokenGroup("typography.ramp.scale", "16px", 1.2, 1.4, "2px");
+export const typeRampScale = new TypeScaleTokenGroup("typography.ramp.scale", "16px", 1.2, 1.3, 1.6, "2px");

packages/adaptive-ui-explorer/src/typography/typography.styles.ts

@@ -43,43 +43,79 @@ export const typographyStyles = css`
         line-height: ${typeRampScale.minus2.lineHeight};
     }
 
+    .multiline p.minus2 {
+        line-height: ${typeRampScale.minus2.lineHeightMultiline};
+    }
+
     p.minus1 {
         font-size: ${typeRampScale.minus1.fontSize};
         line-height: ${typeRampScale.minus1.lineHeight};
     }
 
+    .multiline p.minus1 {
+        line-height: ${typeRampScale.minus1.lineHeightMultiline};
+    }
+
     p.base {
         font-size: ${typeRampScale.base.fontSize};
         line-height: ${typeRampScale.base.lineHeight};
     }
 
+    .multiline p.base {
+        line-height: ${typeRampScale.base.lineHeightMultiline};
+    }
+
     p.plus1 {
         font-size: ${typeRampScale.plus1.fontSize};
         line-height: ${typeRampScale.plus1.lineHeight};
     }
 
+    .multiline p.plus1 {
+        line-height: ${typeRampScale.plus1.lineHeightMultiline};
+    }
+
     p.plus2 {
         font-size: ${typeRampScale.plus2.fontSize};
         line-height: ${typeRampScale.plus2.lineHeight};
     }
 
+    .multiline p.plus2 {
+        line-height: ${typeRampScale.plus2.lineHeightMultiline};
+    }
+
     p.plus3 {
         font-size: ${typeRampScale.plus3.fontSize};
         line-height: ${typeRampScale.plus3.lineHeight};
     }
 
+    .multiline p.plus3 {
+        line-height: ${typeRampScale.plus3.lineHeightMultiline};
+    }
+
     p.plus4 {
         font-size: ${typeRampScale.plus4.fontSize};
         line-height: ${typeRampScale.plus4.lineHeight};
     }
 
+    .multiline p.plus4 {
+        line-height: ${typeRampScale.plus4.lineHeightMultiline};
+    }
+
     p.plus5 {
         font-size: ${typeRampScale.plus5.fontSize};
         line-height: ${typeRampScale.plus5.lineHeight};
     }
 
+    .multiline p.plus5 {
+        line-height: ${typeRampScale.plus5.lineHeightMultiline};
+    }
+
     p.plus6 {
         font-size: ${typeRampScale.plus6.fontSize};
         line-height: ${typeRampScale.plus6.lineHeight};
     }
+
+    .multiline p.plus6 {
+        line-height: ${typeRampScale.plus6.lineHeightMultiline};
+    }
 `;

packages/adaptive-ui-explorer/src/typography/typography.template.ts

@@ -6,7 +6,7 @@ const multiLineText = html<Typography>`Lorem ipsum dolor sit amet, consectetur a
 
 export function typographyTemplate<T extends Typography>(): ElementViewTemplate<T> {
     return html<T>`
-        <div class="content">
+        <div class="content${x => x.state.multiline ? ' multiline' : ''}">
             <p class="minus2">
                 <span class="values">Minus 2 (font-size: ${x => x.minus2.fontSize}, line-height: ${x => x.minus2.lineHeight})</span>
                 <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>

packages/adaptive-ui-explorer/src/typography/typography.ts

@@ -1,5 +1,4 @@
-import { customElement, FASTElement, observable } from "@microsoft/fast-element";
-import { DesignToken, DesignTokenChangeRecord } from "@microsoft/fast-foundation";
+import { customElement, FASTElement, observable, Observable } from "@microsoft/fast-element";
 import { State } from "../state.js";
 import { typographyStyles as styles } from "./typography.styles.js";
 import { typographyTemplate as template } from "./typography.template.js";
@@ -57,6 +56,16 @@ export class Typography extends FASTElement {
 
         // Subscribe to token changes
         this.subscribeToTokenChanges();
+
+        // Subscribe to state.multiline changes
+        Observable.getNotifier(this.state).subscribe(this, "multiline");
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        
+        // Unsubscribe from state changes
+        Observable.getNotifier(this.state).unsubscribe(this, "multiline");
     }
 
     private subscribeToTokenChanges(): void {
@@ -70,15 +79,18 @@ export class Typography extends FASTElement {
         positions.forEach(position => {
             position.fontSize.subscribe(this);
             position.lineHeight.subscribe(this);
+            position.lineHeightMultiline.subscribe(this);
         });
 
         // Also subscribe to multiplier and ratio changes
         typeRampScale.multiplier.subscribe(this);
         typeRampScale.lineHeightRatio.subscribe(this);
+        typeRampScale.lineHeightMultilineRatio.subscribe(this);
         typeRampScale.lineHeightSnap.subscribe(this);
     }
 
-    handleChange(token: DesignToken<any>, record: DesignTokenChangeRecord<any>): void {
+    handleChange(source: any, propertyName?: any): void {
+        // Handle both DesignToken changes and Observable property changes
         if (!this.updateScheduled) {
             this.updateScheduled = true;
             requestAnimationFrame(() => {

packages/adaptive-ui/docs/api-report.md

@@ -867,15 +867,23 @@ export interface TypedDesignToken<T> extends DesignTokenMetadata {
 
 // @public
 export class TypeRampPosition {
-    constructor(baseName: string, position: string, fontSize: DesignTokenValue<string>, lineHeight: DesignTokenValue<string>);
+    constructor(baseName: string, position: string, config: TypeRampPositionConfig);
     readonly fontSize: TypedCSSDesignToken<string>;
     readonly fontVariations: TypedCSSDesignToken<string>;
     readonly lineHeight: TypedCSSDesignToken<string>;
+    readonly lineHeightMultiline: TypedCSSDesignToken<string>;
+}
+
+// @public
+export interface TypeRampPositionConfig {
+    fontSize: DesignTokenValue<string>;
+    lineHeight: DesignTokenValue<string>;
+    lineHeightMultiline: DesignTokenValue<string>;
 }
 
 // @public
 export class TypeRampTokenGroup implements TokenGroup {
-    constructor(name: string, minus2FontSize: DesignTokenValue<string>, minus2LineHeight: DesignTokenValue<string>, minus1FontSize: DesignTokenValue<string>, minus1LineHeight: DesignTokenValue<string>, baseFontSize: DesignTokenValue<string>, baseLineHeight: DesignTokenValue<string>, plus1FontSize: DesignTokenValue<string>, plus1LineHeight: DesignTokenValue<string>, plus2FontSize: DesignTokenValue<string>, plus2LineHeight: DesignTokenValue<string>, plus3FontSize: DesignTokenValue<string>, plus3LineHeight: DesignTokenValue<string>, plus4FontSize: DesignTokenValue<string>, plus4LineHeight: DesignTokenValue<string>, plus5FontSize: DesignTokenValue<string>, plus5LineHeight: DesignTokenValue<string>, plus6FontSize: DesignTokenValue<string>, plus6LineHeight: DesignTokenValue<string>);
+    constructor(name: string, minus2: TypeRampPositionConfig, minus1: TypeRampPositionConfig, base: TypeRampPositionConfig, plus1: TypeRampPositionConfig, plus2: TypeRampPositionConfig, plus3: TypeRampPositionConfig, plus4: TypeRampPositionConfig, plus5: TypeRampPositionConfig, plus6: TypeRampPositionConfig);
     readonly base: TypeRampPosition;
     readonly minus1: TypeRampPosition;
     readonly minus2: TypeRampPosition;
@@ -891,7 +899,8 @@ export class TypeRampTokenGroup implements TokenGroup {
 
 // @public
 export class TypeScaleTokenGroup extends TypeRampTokenGroup {
-    constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightSnap?: string);
+    constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightMultilineRatio?: number, lineHeightSnap?: string);
+    readonly lineHeightMultilineRatio: TypedDesignToken<number>;
     readonly lineHeightRatio: TypedDesignToken<number>;
     readonly lineHeightSnap: TypedCSSDesignToken<string>;
     readonly multiplier: TypedDesignToken<number>;