fix(storybook): add functionality (#1147)

* fix(storybook): add functionality * fix(storybook): textarea size limitations * fix(storybook): add row describtion * fix(storybook): review changes --------- Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
deven-org · Aug 26, 2024 · d94e1a6 · d94e1a6
1 parent a20c43c
commit d94e1a6
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 98 deletions.
diff --git a/packages/ui-library/src/components/button-text/index.stories.ts b/packages/ui-library/src/components/button-text/index.stories.ts
@@ -5,7 +5,7 @@ import { BlrButtonTextRenderFunction } from './renderFunction.js';
 import { PureIconKeys } from '@boiler/icons';
 import '../../index.js';
 import { Themes } from '../../foundation/_tokens-generated/index.themes.js';
-import { ActionVariants, ActionSizes, ButtonDisplayOptions, IconPositionVariant } from '../../globals/constants.js';
+import { ActionVariants, ActionSizes, DisplayOptions, IconPositionVariant } from '../../globals/constants.js';
 // this loads the all components instances and registers their html tags
 
 // Shared Style inside the Stories
@@ -66,7 +66,7 @@ export default {
     },
     buttonDisplay: {
       description: 'Choose if button should fill its parent container or hug its content.',
-      options: ButtonDisplayOptions,
+      options: DisplayOptions,
       control: { type: 'radio' },
       table: {
         category: 'Appearance',

diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
@@ -10,9 +10,9 @@ import {
   IconPositionVariant,
   ActionVariantType,
   ActionSizesType,
-  ButtonDisplayType,
   FormSizesType,
   SizesType,
+  DisplayType,
 } from '../../globals/types.js';
 import { calculateIconName } from '../../utils/calculate-icon-name.js';
 import { determineLoaderVariant } from '../../utils/determine-loader-variant.js';
@@ -52,7 +52,7 @@ export class BlrButtonText extends LitElementCustom {
   @property() accessor buttonTextId: string | undefined;
   @property() accessor variant: ActionVariantType = 'primary';
   @property() accessor sizeVariant: ActionSizesType | undefined = 'md';
-  @property() accessor buttonDisplay: ButtonDisplayType | undefined = 'inline-block';
+  @property() accessor buttonDisplay: DisplayType | undefined = 'inline-block';
 
   @property() accessor theme: ThemeType = 'Light';
 
@@ -139,7 +139,7 @@ export class BlrButtonText extends LitElementCustom {
               },
               {
                 'aria-hidden': true,
-              }
+              },
             )
           : nothing}
         <span class="label">${this.label} </span>
@@ -153,7 +153,7 @@ export class BlrButtonText extends LitElementCustom {
               },
               {
                 'aria-hidden': true,
-              }
+              },
             )
           : nothing}
       </div>`;

diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
@@ -1,9 +1,9 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator, ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
 
 export const staticStyles = css`
   :host {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     max-width: 100%;
   }
@@ -13,7 +13,15 @@ export const staticStyles = css`
   }
 
   .blr-textarea {
-    max-width: fit-content;
+    max-width: 100%;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  .inline-block {
+    width: min-content;
   }
 
   .blr-textarea-info-container {
@@ -39,16 +47,26 @@ export const staticStyles = css`
 
   .textarea-input-control {
     display: block;
-  }
-
-  .textarea-input-control {
-    resize: none;
-    display: block;
-    max-width: 100%;
-    word-break: break-all;
     width: 100%;
-    all: initial;
     box-sizing: border-box;
+    max-width: 100%;
+    word-break: break-all;
+
+    &.both {
+      resize: both;
+    }
+
+    &.vertical {
+      resize: vertical;
+    }
+
+    &.horizontal {
+      resize: horizontal;
+    }
+
+    &.none {
+      resize: none;
+    }
 
     &:active {
       border-color: transparent;
@@ -72,30 +90,38 @@ export const staticStyles = css`
         border-color: transparent;
       }
     }
+  }
 
-    &.both {
-      resize: both;
-    }
+  .textarea-input-control.inline-block {
+    width: auto;
+  }
 
-    &.vertical {
-      resize: vertical;
-    }
+  ${ComponentThemeIterator((theme, sem, css) => {
+    const { InputField } = sem.TextArea;
 
-    &.horizontal {
-      resize: horizontal;
-    }
+    return css`
+      .textarea-input-control.${theme} {
+        &.sm {
+          min-height: ${InputField.MinHeight.SM};
+        }
 
-    &.none {
-      resize: none;
-    }
-  }
+        &.md {
+          min-height: ${InputField.MinHeight.MD};
+        }
+
+        &.lg {
+          min-height: ${InputField.MinHeight.LG};
+        }
+      }
+    `;
+  })}
 
   ${SemanticThemeIterator((theme, sem, css) => {
     const { labelslot, captionslot, inputfield } = sem.forms;
 
     return css`
       .blr-textarea.${theme} {
-        max-width: fit-content;
+        max-width: 100%;
 
         &.sm {
           & > .label-wrapper {

diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -7,25 +7,14 @@ import { PureIconKeys } from '@boiler/icons';
 // this loads the all components instances and registers their html tags
 import '../../index.js';
 import { Themes } from '../../foundation/_tokens-generated/index.themes.js';
-import { FormSizes, Resizes } from '../../globals/constants.js';
-
-// Shared Style inside the Stories
-const sharedStyles = html`
-  <style>
-    .stories-textarea {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-      gap: 1rem;
-    }
-  </style>
-`;
+import { DisplayOptions, FormSizes, Resizes } from '../../globals/constants.js';
 
 // Default parameters for Textarea component
 const defaultParams: BlrTextareaType = {
   theme: 'Light',
   sizeVariant: 'md',
   resize: 'both',
+  textAreaDisplay: 'block',
   cols: 40,
   rows: 4,
   placeholder: 'Placeholder-text',
@@ -85,6 +74,7 @@ export default {
       options: FormSizes,
       control: { type: 'number' },
       name: 'cols',
+      if: { arg: 'textAreaDisplay', neq: 'block' },
       description: 'Enter amount of columns the component should hold.',
       defaultValue: '20',
       table: {
@@ -95,12 +85,20 @@ export default {
       options: FormSizes,
       control: { type: 'number' },
       name: 'rows',
-      description: 'Enter amount of rows the component should have.',
+      description: 'Enter amount of rows the component should have. The row height has a defined minimum limit.',
       defaultValue: '5',
       table: {
         category: 'Appearance',
       },
     },
+    textAreaDisplay: {
+      description: 'Choose if textarea should fill its parent container.',
+      options: DisplayOptions,
+      control: { type: 'radio' },
+      table: {
+        category: 'Appearance',
+      },
+    },
 
     //Content/ Settings
     placeholder: {
@@ -377,13 +375,7 @@ Text Area allows users to input and edit multiline text. Unlike a simple Input F
 };
 
 //Main Component for Textarea
-export const TextArea = (params: BlrTextareaType) =>
-  html`${sharedStyles}
-    <div class="wrapper">
-      ${BlrTextareaRenderFunction({
-        ...params,
-      })}
-    </div> `;
+export const TextArea = (params: BlrTextareaType) => html`${BlrTextareaRenderFunction({ ...params })}`;
 TextArea.args = defaultParams;
 
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
@@ -443,7 +435,6 @@ const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);
  */
 export const SizeVariant = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -488,7 +479,6 @@ SizeVariant.story = { name: ' ' };
  */
 export const Resize = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         <div>
@@ -555,7 +545,6 @@ Resize.argTypes = {
  */
 export const Placeholder = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -596,7 +585,6 @@ Placeholder.story = { name: ' ' };
  */
 export const Disabled = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -627,7 +615,6 @@ Disabled.story = {
  */
 export const Readonly = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -656,7 +643,6 @@ Readonly.argTypes = {
  */
 export const Required = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -687,7 +673,6 @@ Required.story = {
  */
 export const HasError = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -718,7 +703,6 @@ HasError.argTypes = {
 // States FormLabel
 export const FormLabel = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -757,7 +741,6 @@ FormLabel.story = {
  */
 export const FormCaptionGroup = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -799,7 +782,6 @@ FormCaptionGroup.argTypes = {
  */
 export const Counter = () => {
   return html`
-    ${sharedStyles}
     <div class="wrapper">
       <div class="stories-textarea">
         ${BlrTextareaRenderFunction({
@@ -818,9 +800,11 @@ export const Counter = () => {
     </div>
   `;
 };
+
 Counter.argTypes = {
   ...disabledArgTypes,
 };
+
 Counter.parameters = {
   backgrounds: {
     default: '',