Merge pull request #387 from funidata/DS-318

[BodyText]: Rename 'size' Input to 'variant', remove 'color' Input
funidata · Jun 21, 2024 · da3b32f · da3b32f
2 parents 0cad8aa + 67606fb
commit da3b32f
Show file tree

Hide file tree

Showing 73 changed files with 96 additions and 113 deletions.
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert/alert.component.html
@@ -9,8 +9,7 @@
     "
     [classList]="'fudis-alert__text'"
     [align]="'center'"
-    [size]="'lg-regular'"
-    [color]="variant !== 'warning' ? 'white' : 'default'"
+    [variant]="'lg-regular'"
   >
     {{ message }}
     <fudis-link

diff --git a/...ts/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.stories.ts b/...ts/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.stories.ts
@@ -114,7 +114,7 @@ const Template: StoryFn<ErrorMessageComponent> = (args: ErrorMessageComponent) =
   template: html`
     <fudis-body-text
       class="grid-refresh-text"
-      [size]="'sm-regular'"
+      [variant]="'sm-regular'"
       style="width: 12rem;
   margin-bottom: 2rem;"
     >

diff --git a/...dis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.html b/...dis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.html
@@ -6,7 +6,7 @@
           <fudis-icon class="fudis-error-summary__icon" [icon]="'alert'"></fudis-icon>
           <div class="fudis-error-summary__errors">
             <ng-container *ngIf="helpText">
-              <fudis-body-text fudisSpacing [size]="'md-regular'" [marginTop]="'xs'">
+              <fudis-body-text fudisSpacing [variant]="'md-regular'" [marginTop]="'xs'">
                 <span class="fudis-visually-hidden">{{ _attentionText | async }}:&nbsp;</span
                 >{{ helpText }}</fudis-body-text
               >

diff --git a/...gx-fudis/src/lib/components/form/select/common/select-dropdown/select-dropdown-theme.scss b/...gx-fudis/src/lib/components/form/select/common/select-dropdown/select-dropdown-theme.scss
@@ -3,6 +3,8 @@
 .fudis-select-dropdown {
   &__help-text {
     &.fudis-body-text-host {
+      /** No need for margin bottom because both Body Text help text elements are not visible simultaneously **/
+      margin-bottom: spacing.$spacing-none;
       padding: spacing.$spacing-xs;
     }
 

diff --git a/...udis/src/lib/components/form/select/common/select-dropdown/select-dropdown.component.html b/...udis/src/lib/components/form/select/common/select-dropdown/select-dropdown.component.html
@@ -16,7 +16,7 @@
       *ngIf="autocompleteHelpText !== false"
       [class.fudis-select-dropdown__help-text--hidden]="!results"
       class="fudis-select-dropdown__help-text fudis-select-dropdown__help-text__first"
-      [size]="'md-light'"
+      [variant]="'md-light'"
       ><ng-container *ngIf="autocompleteHelpText">{{ autocompleteHelpText }}</ng-container
       ><ng-container *ngIf="!autocompleteHelpText"
         >{{ _translationShowing | async }} {{ results }}
@@ -26,7 +26,7 @@
     <fudis-body-text
       class="fudis-select-dropdown__help-text fudis-select-dropdown__help-text__last"
       [class.fudis-select-dropdown__help-text--hidden]="results"
-      [size]="'md-light'"
+      [variant]="'md-light'"
       >{{ _translationNoResultsFound | async }}</fudis-body-text
     >
     <span

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/select-showcase.stories.ts
@@ -225,7 +225,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
           <fudis-grid-item [columns]="'stretch'">
             <fudis-heading [level]="3" [variant]="'md'">Current control value</fudis-heading>
             <ng-container *ngIf="!control.value">
-              <fudis-body-text [size]="'lg-regular'"
+              <fudis-body-text [variant]="'lg-regular'"
                 >Control value: null.</fudis-body-text
               ></ng-container
             >
@@ -465,7 +465,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
           <fudis-grid-item [columns]="'stretch'">
             <fudis-heading [level]="3" [variant]="'md'">Current control value</fudis-heading>
             <ng-container *ngIf="!control.value">
-              <fudis-body-text [size]="'lg-regular'"
+              <fudis-body-text [variant]="'lg-regular'"
                 >Control value: null.</fudis-body-text
               ></ng-container
             >

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.stories.ts
@@ -93,8 +93,10 @@ export const AlignSelfX: StoryFn<GridItemComponent> = (args: GridItemComponent)
       class="storybook__item-highlight"
       [alignSelfX]="{sm: 'start', md: 'end', lg: 'center'}"
     >
-      <fudis-body-text>Responsive alignSelfX =</fudis-body-text>
-      <fudis-body-text>"{{responsiveAlignSelfX}}"</fudis-body-text>
+      <fudis-body-text
+        >Responsive alignSelfX = <br />
+        "{{responsiveAlignSelfX}}"</fudis-body-text
+      >
     </fudis-grid-item>
   </fudis-grid>`,
 });

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.stories.ts
@@ -29,7 +29,7 @@ import { FudisGridAlign, FudisGridProperties } from '../../../types/grid';
           fudisGridItem
           [columns]="'stretch'"
           [alignSelfX]="'center'"
-          [size]="'lg-regular'"
+          [variant]="'lg-regular'"
           >Current Grid Service values: <code>{{ _currentServiceConfigs }}</code>
         </fudis-body-text>
       </fudis-grid>
@@ -158,7 +158,10 @@ const columnsToString = (columns: string | number | object): string => {
 
 const ExampleTemplate: StoryFn<GridComponent> = (args: GridComponent) => ({
   props: { ...args, transformedColumns: columnsToString(args.columns) },
-  template: html`<fudis-body-text style="margin: 1rem 0;" [size]="'lg-regular'" [align]="'center'"
+  template: html`<fudis-body-text
+      style="margin: 1rem 0;"
+      [variant]="'lg-regular'"
+      [align]="'center'"
       >Current value of <code>columns</code> is:
       <code>{{transformedColumns}}</code></fudis-body-text
     >
@@ -174,9 +177,10 @@ const ExampleTemplate: StoryFn<GridComponent> = (args: GridComponent) => ({
       [columnGap]="columnGap"
       [rowGap]="rowGap"
     >
-      <fudis-body-text class="storybook__item"
-        >Grid child element which has more content than most of the child elements</fudis-body-text
-      >
+      <div class="storybook__item">
+        <fudis-body-text>First Grid child's first Body Text inside it</fudis-body-text>
+        <fudis-body-text>First Grid child's second Body Text inside it</fudis-body-text>
+      </div>
       <fudis-body-text class="storybook__item">Grid child element</fudis-body-text>
       <fudis-body-text class="storybook__item">Grid child element</fudis-body-text>
       <fudis-body-text class="storybook__item"

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-docs.mdx
@@ -29,7 +29,7 @@ Notifications and buttons are added through `fudisNotifications` and `fudisActio
   <fudis-button [label]="'Some action'"></fudis-button>
 </ng-template>
 <ng-template fudisNotifications [type]="'section'">
-  <fudis-body-text [size]="'lg-regular'">This is notification</fudis-body-text>
+  <fudis-body-text [variant]="'lg-regular'">This is notification</fudis-body-text>
 </ng-template>`}
 />
 

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text-theme.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text-theme.scss
@@ -0,0 +1,31 @@
+@use "../../../foundations/spacing/tokens.scss" as spacing;
+
+fudis-body-text {
+  /**
+ * Add spacing between multiple following Body Text elements.
+ * Body Text does not have bottom margin if it does not have other Body Text element underneath.
+ */
+  &:has(+ fudis-body-text) {
+    margin-bottom: spacing.$spacing-xs;
+  }
+
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & fudis-link {
+    display: inline-block;
+  }
+
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  &.fudis-body-text-host {
+    display: block;
+  }
+}
+
+/**
+* Remove spacing between multiple following Body Text elements directly under Grid element.
+* Grid already defines a gap between its children elements.
+*/
+.fudis-grid {
+  > fudis-body-text:has(+ fudis-body-text) {
+    margin-bottom: spacing.$spacing-none;
+  }
+}
diff --git a/...fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html b/...fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.html
@@ -1,7 +1,3 @@
-<p
-  [id]="_id"
-  class="fudis-body-text fudis-body-text__{{ color }} fudis-body-text__{{
-    size
-  }} fudis-body-text__{{ align }}"
+<p [id]="_id" class="fudis-body-text fudis-body-text__{{ variant }} fudis-body-text__{{ align }}"
   ><ng-content
 /></p>
diff --git a/...fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.scss b/...fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.scss
@@ -2,20 +2,9 @@
 @use "../../../foundations/colors/mixins.scss" as colorMixins;
 @use "../../../foundations/utilities/mixins.scss" as utilities;
 
-.fudis-body-text-host {
-  display: block;
-}
-
 .fudis-body-text {
   @include utilities.box-reset;
-
-  &__default {
-    @include colorMixins.text-color("gray-dark");
-  }
-
-  &__white {
-    @include colorMixins.text-color("white");
-  }
+  @include colorMixins.text-color("gray-dark");
 
   &__sm-regular {
     @include typography.body-text-sm-regular;
@@ -48,9 +37,4 @@
   &__center {
     text-align: center;
   }
-
-  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
-  & fudis-link {
-    display: inline-block;
-  }
 }
diff --git a/...is/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts b/...is/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.spec.ts
@@ -26,60 +26,39 @@ describe('BodyTextComponent', () => {
 
   //TODO: Write test for host class
   describe('CSS classes', () => {
-    it('should change CSS classes according to the given body-text size', () => {
-      fudisBodyTextArray.forEach((size) => {
-        component.size = size;
+    it('should change CSS classes according to the given body-text variant', () => {
+      fudisBodyTextArray.forEach((variant) => {
+        component.variant = variant;
         fixture.detectChanges();
 
         const element = getElement(fixture, '.fudis-body-text');
 
         expect(sortClasses(element.className)).toEqual(
-          sortClasses(
-            `fudis-body-text fudis-body-text__default fudis-body-text__left fudis-body-text__${size}`,
-          ),
+          sortClasses(`fudis-body-text fudis-body-text__left fudis-body-text__${variant}`),
         );
       });
     });
 
-    // TODO: Refactor to use helper function to test color input
-    it('should change CSS classes according to given body-text color', () => {
-      const element = getElement(fixture, '.fudis-body-text');
-      component.color = 'white';
-      fixture.detectChanges();
-
-      expect(sortClasses(element.className)).toEqual(
-        sortClasses(
-          'fudis-body-text fudis-body-text__white fudis-body-text__left fudis-body-text__md-regular',
-        ),
-      );
-    });
-
     // TODO: Refactor to use helper function to test align input
     it('should change CSS classes according to given body-text align', () => {
       const element = getElement(fixture, '.fudis-body-text');
 
       expect(sortClasses(element.className)).toEqual(
-        sortClasses(
-          'fudis-body-text fudis-body-text__default fudis-body-text__left fudis-body-text__md-regular',
-        ),
+        sortClasses('fudis-body-text fudis-body-text__left fudis-body-text__md-regular'),
       );
 
       component.align = 'center';
       fixture.detectChanges();
 
       expect(sortClasses(element.className)).toEqual(
-        sortClasses(
-          'fudis-body-text fudis-body-text__default fudis-body-text__center fudis-body-text__md-regular',
-        ),
+        sortClasses('fudis-body-text fudis-body-text__center fudis-body-text__md-regular'),
       );
 
       component.align = 'right';
       fixture.detectChanges();
 
       expect(sortClasses(element.className)).toEqual(
-        sortClasses(
-          'fudis-body-text fudis-body-text__default fudis-body-text__right fudis-body-text__md-regular',
-        ),
+        sortClasses('fudis-body-text fudis-body-text__right fudis-body-text__md-regular'),
       );
     });
   });

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
@@ -2,7 +2,6 @@ import {
   Component,
   Input,
   HostBinding,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
   Optional,
   Host,
@@ -15,7 +14,6 @@ import { FudisIdService } from '../../../services/id/id.service';
   selector: 'fudis-body-text',
   templateUrl: './body-text.component.html',
   styleUrls: ['./body-text.component.scss'],
-  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BodyTextComponent {
@@ -26,7 +24,7 @@ export class BodyTextComponent {
     this._id = _idService.getNewId('body-text');
 
     if (_parentDialog) {
-      this.size = 'md-light';
+      this.variant = 'md-light';
     }
   }
 
@@ -36,14 +34,9 @@ export class BodyTextComponent {
   @HostBinding('class') private _classes = 'fudis-body-text-host';
 
   /**
-   * Font size for the paragraph
+   * Variant for the paragraph
    */
-  @Input() size: FudisBodyText = 'md-regular';
-
-  /**
-   * Option to change text color if background is not compatible with default dark text
-   */
-  @Input() color: 'default' | 'white' = 'default';
+  @Input() variant: FudisBodyText = 'md-regular';
 
   /**
    * Text alignment