fix(): fixes #787 add visualLevel for bal-list-item-title

baloise · Nov 17, 2022 · f157772 · f157772
1 parent d1dfae1
commit f157772
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -1272,6 +1272,10 @@ export namespace Components {
           * Heading level with value 'h4' on default
          */
         "level": Props.BalHeadingLevel;
+        /**
+          * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
+         */
+        "visualLevel"?: Props.BalHeadingLevel;
     }
     interface BalLogo {
         /**
@@ -4884,6 +4888,10 @@ declare namespace LocalJSX {
           * Heading level with value 'h4' on default
          */
         "level"?: Props.BalHeadingLevel;
+        /**
+          * Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
+         */
+        "visualLevel"?: Props.BalHeadingLevel;
     }
     interface BalLogo {
         /**

diff --git a/packages/components/src/components/bal-list/bal-list-item-title/bal-list-item-title.tsx b/packages/components/src/components/bal-list/bal-list-item-title/bal-list-item-title.tsx
@@ -12,10 +12,17 @@ export class ListItemTitle {
    */
   @Prop() level: Props.BalHeadingLevel = 'h5'
 
+  /**
+   * Make the visual style mimic a specific heading level.
+   * This option allows you to make e.g. h1 visually look like h3,
+   * but still keep it h1 in the markup.
+   */
+  @Prop() visualLevel?: Props.BalHeadingLevel
+
   render() {
     return (
       <Host class="bal-list__item__title">
-        <bal-heading level={this.level} space="none">
+        <bal-heading level={this.level} visualLevel={this.visualLevel} space="none">
           <slot></slot>
         </bal-heading>
       </Host>