diff --git a/packages/ui-library/src/components/button-text/index.stories.ts b/packages/ui-library/src/components/button-text/index.stories.ts index edf220be8..1b6bcf602 100644 --- 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 index 57e114dbf..e928c654d 100644 --- 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} ${this.label} @@ -153,7 +153,7 @@ export class BlrButtonText extends LitElementCustom { }, { 'aria-hidden': true, - } + }, ) : nothing} `; diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts index cc3f7d60a..3c4978a64 100644 --- 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 index 0432cdee8..b39ec6458 100644 --- 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` - -`; +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} -
- ${BlrTextareaRenderFunction({ - ...params, - })} -
`; +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}
${BlrTextareaRenderFunction({ @@ -488,7 +479,6 @@ SizeVariant.story = { name: ' ' }; */ export const Resize = () => { return html` - ${sharedStyles}
@@ -555,7 +545,6 @@ Resize.argTypes = { */ export const Placeholder = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -596,7 +585,6 @@ Placeholder.story = { name: ' ' }; */ export const Disabled = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -627,7 +615,6 @@ Disabled.story = { */ export const Readonly = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -656,7 +643,6 @@ Readonly.argTypes = { */ export const Required = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -687,7 +673,6 @@ Required.story = { */ export const HasError = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -718,7 +703,6 @@ HasError.argTypes = { // States FormLabel export const FormLabel = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -757,7 +741,6 @@ FormLabel.story = { */ export const FormCaptionGroup = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -799,7 +782,6 @@ FormCaptionGroup.argTypes = { */ export const Counter = () => { return html` - ${sharedStyles}
${BlrTextareaRenderFunction({ @@ -818,9 +800,11 @@ export const Counter = () => {
`; }; + Counter.argTypes = { ...disabledArgTypes, }; + Counter.parameters = { backgrounds: { default: '', diff --git a/packages/ui-library/src/components/textarea/index.test.ts b/packages/ui-library/src/components/textarea/index.test.ts index 59d94048d..8b5202e91 100644 --- a/packages/ui-library/src/components/textarea/index.test.ts +++ b/packages/ui-library/src/components/textarea/index.test.ts @@ -33,6 +33,7 @@ const sampleParams: BlrTextareaType = { arialabel: 'TextArea', textAreaId: '#674', name: 'TextArea', + placeholder: 'Placeholder-text', }; describe('blr-textarea', () => { @@ -52,7 +53,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, placeholder: randomString, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -66,7 +67,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, placeholder: undefined, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -80,7 +81,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, maxLength: 5, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -94,7 +95,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, maxLength: undefined, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -108,7 +109,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, disabled: true, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -125,7 +126,7 @@ describe('blr-textarea', () => { hasHint: false, hasError: true, errorMessageIcon: undefined, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -139,7 +140,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, disabled: false, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -157,7 +158,7 @@ describe('blr-textarea', () => { hintMessageIcon: 'blrInfo', hasError: true, errorMessageIcon: 'blrErrorFilled', - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -178,7 +179,7 @@ describe('blr-textarea', () => { ...sampleParams, hasHint: true, hintMessageIcon: 'blrInfo', - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); @@ -269,7 +270,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, hasCounter: true, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); const hasCounter = textarea?.getAttribute('hasCounter'); @@ -283,7 +284,7 @@ describe('blr-textarea', () => { BlrTextareaRenderFunction({ ...sampleParams, hasCounter: false, - }) + }), ); const textarea = querySelectorDeep('textarea', element.getRootNode() as HTMLElement); const hasCounter = textarea?.getAttribute('hasCounter'); @@ -301,11 +302,11 @@ describe('blr-textarea', () => { errorMessage: '', hintMessage: '', hasCounter: true, - }) + }), ); const counterContainerWithoutError = querySelectorDeep( '.blr-textarea-info-container', - elementWithoutError.getRootNode() as HTMLElement + elementWithoutError.getRootNode() as HTMLElement, ); expect(counterContainerWithoutError?.classList.contains('error')).to.be.false; @@ -325,11 +326,11 @@ describe('blr-textarea', () => { errorMessage: '', hintMessage: '', hasCounter: true, - }) + }), ); const counterContainerWithError = querySelectorDeep( '.blr-textarea-info-container', - elementWithError.getRootNode() as HTMLElement + elementWithError.getRootNode() as HTMLElement, ); expect(counterContainerWithError?.classList.contains('error')).to.be.true; @@ -347,11 +348,11 @@ describe('blr-textarea', () => { hasError: true, hasHint: true, hasCounter: true, - }) + }), ); const counterContainerWithErrorAndHint = querySelectorDeep( '.blr-textarea-info-container', - elementWithErrorAndHint.getRootNode() as HTMLElement + elementWithErrorAndHint.getRootNode() as HTMLElement, ); expect(counterContainerWithErrorAndHint?.classList.contains('error')).to.be.true; diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 55dd9041c..3a3aeeb5a 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { query, state } from 'lit/decorators.js'; import { property } from '../../utils/lit/decorators.js'; import { staticStyles } from './index.css.js'; -import { CounterVariantType, FormSizesType, WarningLimits, ResizeType } from '../../globals/types.js'; +import { CounterVariantType, FormSizesType, WarningLimits, ResizeType, DisplayType } from '../../globals/types.js'; import { TAG_NAME } from './renderFunction.js'; import { SizelessIconType } from '@boiler/icons'; import { ThemeType } from '../../foundation/_tokens-generated/index.themes.js'; @@ -73,6 +73,7 @@ export class BlrTextarea extends LitElementCustom { @property({ type: Number }) accessor rows: number | undefined; @property({ type: Number }) accessor cols: number | undefined; @property() accessor name: string | undefined; + @property() accessor textAreaDisplay: DisplayType | undefined = 'block'; @property() accessor theme: ThemeType = 'Light'; @state() protected accessor count = 0; @@ -152,20 +153,23 @@ export class BlrTextarea extends LitElementCustom { }; protected render() { - if (this.sizeVariant) { + if (this.sizeVariant && this.textAreaDisplay) { const classes = classMap({ 'blr-textarea': true, - [this.theme]: this.theme, + [this.theme]: true, 'error': this.hasError || false, [this.sizeVariant]: this.sizeVariant, + [this.textAreaDisplay]: this.textAreaDisplay, }); const textareaClasses = classMap({ - [this.theme]: this.theme, - error: this.hasError || false, + 'textarea-input-control': true, + [this.theme]: true, + 'error': this.hasError || false, [this.resize]: this.resize, [this.sizeVariant]: this.sizeVariant, - disabled: this.disabled || false, + [this.textAreaDisplay]: this.textAreaDisplay, + 'disabled': this.disabled || false, }); const textareaInfoContainer = classMap({ @@ -215,19 +219,19 @@ export class BlrTextarea extends LitElementCustom { })}
` : nothing} +