rename line to lie-height

dnbexperience · Nov 21, 2024 · ddfd55c · ddfd55c
1 parent d44cd5a
commit ddfd55c
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 56 deletions.
diff --git a/...-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/...-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
@@ -64,7 +64,7 @@ The default font family for all web applications is `Roboto`, however for headli
 ### Maison Neue
 
 <TypographyBox>
-  <p className="dnb-p dnb-t__size--large dnb-t__line--large dnb-t__family--heading">
+  <p className="dnb-p dnb-t__size--large dnb-t__line-height--large dnb-t__family--heading">
     This is a paragraph using the headline font Maison Neue
   </p>
 </TypographyBox>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx
@@ -60,13 +60,15 @@ export function ParagraphFamilyModifiers() {
 export function ParagraphLineHeightModifiers() {
   return (
     <ComponentBox hideCode data-visual-test="paragraph-modifiers-line">
-      <P line="x-small">x-small line-height paragraph</P>
-      <P line="small">small line-height paragraph</P>
-      <P line="medium">medium line-height paragraph</P>
-      <P line="basis">basis line-height paragraph (same as default)</P>
-      <P line="large">large line-height paragraph</P>
-      <P line="x-large">x-large line-height paragraph</P>
-      <P line="xx-large">xx-large line-height paragraph</P>
+      <P lineHeight="x-small">x-small line-height paragraph</P>
+      <P lineHeight="small">small line-height paragraph</P>
+      <P lineHeight="medium">medium line-height paragraph</P>
+      <P lineHeight="basis">
+        basis line-height paragraph (same as default)
+      </P>
+      <P lineHeight="large">large line-height paragraph</P>
+      <P lineHeight="x-large">x-large line-height paragraph</P>
+      <P lineHeight="xx-large">xx-large line-height paragraph</P>
     </ComponentBox>
   )
 }

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx
@@ -37,13 +37,13 @@ For details on sizes and weights, see the [Font weights](uilib/typography/font-w
 ### Line heights
 
 ```
-  .dnb-t__line--xx-large
-  .dnb-t__line--x-large
-  .dnb-t__line--large
-  .dnb-t__line--basis
-  .dnb-t__line--medium
-  .dnb-t__line--small
-  .dnb-t__line--x-small
+  .dnb-t__line-height--xx-large
+  .dnb-t__line-height--x-large
+  .dnb-t__line-height--large
+  .dnb-t__line-height--basis
+  .dnb-t__line-height--medium
+  .dnb-t__line-height--small
+  .dnb-t__line-height--x-small
 ```
 
 ### Text alignment

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx
@@ -14,16 +14,16 @@ For details about what values Typographic elements do use, have a look at the [F
 
 ## Default `line-height` **rem** table
 
-| Pixel                                   | Type       | Rem                                          | CSS variable / property  | CSS Classname            | Info                             |
-| --------------------------------------- | ---------- | -------------------------------------------- | ------------------------ | ------------------------ | -------------------------------- |
-| {GetPropAsPx('--line-height-x-small')}  | `x-small`  | **{GetPropValue('--line-height-x-small')}**  | `--line-height-x-small`  | `.dnb-t__line--x-small`  |                                  |
-| {GetPropAsPx('--line-height-small')}    | `small`    | **{GetPropValue('--line-height-small')}**    | `--line-height-small`    | `.dnb-t__line--small`    |                                  |
-| {GetPropAsPx('--line-height-basis')}    | `basis`    | **{GetPropValue('--line-height-basis')}**    | `--line-height-basis`    | `.dnb-t__line--basis`    |                                  |
-| {GetPropAsPx('--line-height-lead')}     | `lead`     | **{GetPropValue('--line-height-lead')}**     | `--line-height-lead`     | `.dnb-t__line--lead`     | Unique line-height for `<Lead>`. |
-| {GetPropAsPx('--line-height-medium')}   | `medium`   | **{GetPropValue('--line-height-medium')}**   | `--line-height-medium`   | `.dnb-t__line--medium`   |                                  |
-| {GetPropAsPx('--line-height-large')}    | `large`    | **{GetPropValue('--line-height-large')}**    | `--line-height-large`    | `.dnb-t__line--large`    |                                  |
-| {GetPropAsPx('--line-height-x-large')}  | `x-large`  | **{GetPropValue('--line-height-x-large')}**  | `--line-height-x-large`  | `.dnb-t__line--x-large`  |                                  |
-| {GetPropAsPx('--line-height-xx-large')} | `xx-large` | **{GetPropValue('--line-height-xx-large')}** | `--line-height-xx-large` | `.dnb-t__line--xx-large` | Same as `x-large`                |
+| Pixel                                   | Type       | Rem                                          | CSS variable / property  | CSS Classname                   | Info                             |
+| --------------------------------------- | ---------- | -------------------------------------------- | ------------------------ | ------------------------------- | -------------------------------- |
+| {GetPropAsPx('--line-height-x-small')}  | `x-small`  | **{GetPropValue('--line-height-x-small')}**  | `--line-height-x-small`  | `.dnb-t__line-height--x-small`  |                                  |
+| {GetPropAsPx('--line-height-small')}    | `small`    | **{GetPropValue('--line-height-small')}**    | `--line-height-small`    | `.dnb-t__line-height--small`    |                                  |
+| {GetPropAsPx('--line-height-basis')}    | `basis`    | **{GetPropValue('--line-height-basis')}**    | `--line-height-basis`    | `.dnb-t__line-height--basis`    |                                  |
+| {GetPropAsPx('--line-height-lead')}     | `lead`     | **{GetPropValue('--line-height-lead')}**     | `--line-height-lead`     | `.dnb-t__line-height--lead`     | Unique line-height for `<Lead>`. |
+| {GetPropAsPx('--line-height-medium')}   | `medium`   | **{GetPropValue('--line-height-medium')}**   | `--line-height-medium`   | `.dnb-t__line-height--medium`   |                                  |
+| {GetPropAsPx('--line-height-large')}    | `large`    | **{GetPropValue('--line-height-large')}**    | `--line-height-large`    | `.dnb-t__line-height--large`    |                                  |
+| {GetPropAsPx('--line-height-x-large')}  | `x-large`  | **{GetPropValue('--line-height-x-large')}**  | `--line-height-x-large`  | `.dnb-t__line-height--x-large`  |                                  |
+| {GetPropAsPx('--line-height-xx-large')} | `xx-large` | **{GetPropValue('--line-height-xx-large')}** | `--line-height-xx-large` | `.dnb-t__line-height--xx-large` | Same as `x-large`                |
 
 ### Code Editor Extensions
 

diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx b/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
@@ -14,25 +14,25 @@ describe('Span element', () => {
     const element = document.querySelector('.dnb-t__size--large')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t__line--large',
+      'dnb-t__line-height--large',
       'dnb-t__size--large',
       'dnb-span',
     ])
   })
   it('sets only line-height when size is not defined', () => {
-    render(<Span line="large" />)
-    const element = document.querySelector('.dnb-t__line--large')
+    render(<Span lineHeight="large" />)
+    const element = document.querySelector('.dnb-t__line-height--large')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t__line--large',
+      'dnb-t__line-height--large',
       'dnb-span',
     ])
   })
   it('has correct style when several modifiers are defined', () => {
     render(
       <Span
         size="small"
-        line="xx-large"
+        lineHeight="xx-large"
         align="center"
         family="monospace"
         weight="medium"
@@ -42,7 +42,7 @@ describe('Span element', () => {
     const element = document.querySelector('.dnb-t__size--small')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t__line--xx-large',
+      'dnb-t__line-height--xx-large',
       'dnb-t__size--small',
       'dnb-t__align--center',
       'dnb-t__family--monospace',

diff --git a/packages/dnb-eufemia/src/elements/typography/Typography.tsx b/packages/dnb-eufemia/src/elements/typography/Typography.tsx
@@ -39,7 +39,7 @@ export type TypographyProps<
     /**
      * Sets the line height, will use same value as `size` if not set.
      */
-    line?: TypographySize
+    lineHeight?: TypographySize
     /**
      * Sets the text alignment
      */
@@ -70,7 +70,7 @@ const Typography = ({
   element = 'p',
   className,
   size,
-  line,
+  lineHeight,
   align,
   family,
   weight,
@@ -90,7 +90,7 @@ const Typography = ({
         weight && `dnb-t__weight--${weight}`,
         decoration && `dnb-t__decoration--${decoration}`,
         slant && `dnb-t__slant--${slant}`,
-        (line || size) && `dnb-t__line--${line || size}`
+        (lineHeight || size) && `dnb-t__line-height--${lineHeight || size}`
       )}
     />
   )

diff --git a/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts b/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
@@ -7,7 +7,7 @@ export const TypographyProperties: PropertiesTableProps = {
     status: 'optional',
   },
   size: {
-    doc: 'Sets the font size, also sets the line-height if `line` prop is not set.',
+    doc: 'Sets the font size, also sets the line-height if `lineHeight` prop is not set.',
     type: [
       `'x-small'`,
       `'small'`,
@@ -19,7 +19,7 @@ export const TypographyProperties: PropertiesTableProps = {
     ],
     status: 'optional',
   },
-  line: {
+  lineHeight: {
     doc: 'Sets the line height, will use same value as `size` if not set.',
     type: [
       `'x-small'`,

diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
@@ -62,7 +62,7 @@ describe('P element', () => {
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-t__line--large',
+      'dnb-t__line-height--large',
       'dnb-t__size--large',
     ])
   })
@@ -81,7 +81,7 @@ describe('P element', () => {
     render(
       <P
         size="small"
-        line="xx-large"
+        lineHeight="xx-large"
         align="center"
         family="monospace"
         weight="medium"
@@ -92,7 +92,7 @@ describe('P element', () => {
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-t__line--xx-large',
+      'dnb-t__line-height--xx-large',
       'dnb-t__size--small',
       'dnb-t__align--center',
       'dnb-t__family--monospace',
@@ -123,7 +123,7 @@ describe('P element', () => {
 
       expect(Array.from(element.classList)).toEqual([
         'dnb-p',
-        'dnb-t__line--medium',
+        'dnb-t__line-height--medium',
         'dnb-t__size--medium',
         'dnb-t__weight--medium',
       ])
@@ -134,7 +134,7 @@ describe('P element', () => {
 
       expect(Array.from(element.classList)).toEqual([
         'dnb-p',
-        'dnb-t__line--small',
+        'dnb-t__line-height--small',
         'dnb-t__size--small',
         'dnb-t__weight--medium',
       ])
@@ -145,7 +145,7 @@ describe('P element', () => {
 
       expect(Array.from(element.classList)).toEqual([
         'dnb-p',
-        'dnb-t__line--x-small',
+        'dnb-t__line-height--x-small',
         'dnb-t__size--x-small',
         'dnb-t__weight--bold',
       ])

diff --git a/packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss b/packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss
@@ -28,25 +28,25 @@
   }
 
   // line height
-  &__line--xx-large {
+  &__line-height--xx-large {
     line-height: var(--line-height-xx-large);
   }
-  &__line--x-large {
+  &__line-height--x-large {
     line-height: var(--line-height-x-large);
   }
-  &__line--large {
+  &__line-height--large {
     line-height: var(--line-height-large);
   }
-  &__line--medium {
+  &__line-height--medium {
     line-height: var(--line-height-medium);
   }
-  &__line--basis {
+  &__line-height--basis {
     line-height: var(--line-height-basis);
   }
-  &__line--small {
+  &__line-height--small {
     line-height: var(--line-height-small);
   }
-  &__line--x-small {
+  &__line-height--x-small {
     line-height: var(--line-height-x-small);
   }
 

diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -866,25 +866,25 @@ sub {
 .dnb-t__size--x-small {
   font-size: var(--font-size-x-small);
 }
-.dnb-t__line--xx-large {
+.dnb-t__line-height--xx-large {
   line-height: var(--line-height-xx-large);
 }
-.dnb-t__line--x-large {
+.dnb-t__line-height--x-large {
   line-height: var(--line-height-x-large);
 }
-.dnb-t__line--large {
+.dnb-t__line-height--large {
   line-height: var(--line-height-large);
 }
-.dnb-t__line--medium {
+.dnb-t__line-height--medium {
   line-height: var(--line-height-medium);
 }
-.dnb-t__line--basis {
+.dnb-t__line-height--basis {
   line-height: var(--line-height-basis);
 }
-.dnb-t__line--small {
+.dnb-t__line-height--small {
   line-height: var(--line-height-small);
 }
-.dnb-t__line--x-small {
+.dnb-t__line-height--x-small {
   line-height: var(--line-height-x-small);
 }
 .dnb-t__weight--regular {