From 8c7a785bd1b0c17e700ead17d5c5042e2f046ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Fri, 5 May 2023 13:02:36 +0200 Subject: [PATCH] Feat(web-twig): Add `isAutoResizing` prop to TextArea #DS-320 --- .../Resources/components/TextArea/README.md | 24 +++++++++++++++++++ .../components/TextArea/TextArea.stories.twig | 3 +++ .../TextArea/stories/TextAreaAutoResize.twig | 5 ++++ .../components/TextFieldBase/README.md | 1 + .../TextFieldBase/TextFieldBase.twig | 6 +++-- 5 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md index ac3efaffd0..e5de393009 100644 --- a/packages/web-twig/src/Resources/components/TextArea/README.md +++ b/packages/web-twig/src/Resources/components/TextArea/README.md @@ -46,6 +46,7 @@ Without lexer: | Prop name | Type | Default | Required | Description | | ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | — | yes | TextArea and label identification | +| `isAutoResizing` | `bool` | `false` | no | If true, TextArea adjusts its height as user types, see [plugin info](#javascript-plugin-for-auto-resizing) | | `isDisabled` | `bool` | `false` | no | If true, TextArea is disabled | | `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent | | `isLabelHidden` | `bool` | `false` | no | If true, label is hidden | @@ -65,7 +66,30 @@ further extend component's descriptiveness and accessibility. Also, UNSAFE styli see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. These attributes will be passed to the topmost HTML element of the component. +## JavaScript Plugin for Auto-Resizing + +To enable auto-resizing of the textarea, first, you need to provide Spirit JavaScript, +which will handle the functionality: + +```html + +``` + +Please consult the [main README][web-readme] for how to include JavaScript +plugins. + +Then you need to add attribute `isAutoResizing` to the component. + +```twig + +``` + [textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea +[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation [deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig index dd97eef557..a3309b662f 100644 --- a/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig +++ b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig @@ -25,6 +25,9 @@ {# TextArea Helper Text #} {% include '@components/TextArea/stories/TextAreaHelperText.twig' %} + {# TextArea Auto Resize #} + {% include '@components/TextArea/stories/TextAreaAutoResize.twig' %} + {# TextArea V1 Feature - new disabled state #} {% include '@components/TextArea/stories/TextAreaV1DisabledFeature.twig' %} diff --git a/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig b/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig new file mode 100644 index 0000000000..20cc93bbe4 --- /dev/null +++ b/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaAutoResize.twig @@ -0,0 +1,5 @@ + diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md index f638554bed..a821ff5448 100644 --- a/packages/web-twig/src/Resources/components/TextFieldBase/README.md +++ b/packages/web-twig/src/Resources/components/TextFieldBase/README.md @@ -65,6 +65,7 @@ Without lexer: | `helperText` | `string` | `null` | no | Custom helper text | | `UNSAFE_helperText` | `string` | `null` | no | Unescaped custom helper text | | `id` | `string` | — | yes | Input and label identification | +| `isAutoResizing` | `bool` | `false` | no | If true, TextArea adjusts its height as user types | | `isDisabled` | `bool` | `false` | no | If true, input is disabled | | `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent | | `isLabelHidden` | `bool` | `false` | no | If true, label is hidden | diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig index 77861edbb8..0da00c8e35 100644 --- a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig +++ b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig @@ -19,6 +19,7 @@ {%- set _value = props.value | default(null) -%} {# Extended API for TextArea #} +{%- set _isAutoResizing = props.isAutoResizing | default(false) | boolprop -%} {%- set _rows = props.rows | default(null) -%} {# Extended API for TextField #} @@ -43,6 +44,7 @@ {%- set _helperTextClassName = _rootClassName ~ '__helperText' -%} {# Attributes #} +{%- set _dataToggleAttr = _isAutoResizing and _isMultiline ? 'data-toggle=autoResize' : null -%} {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%} {%- set _placeholderAttr = _placeholder ? 'placeholder=' ~ _placeholder : null -%} {%- set _requiredAttr = _isRequired ? 'required' : null -%} @@ -58,7 +60,7 @@ {%- set _styleProps = useStyleProps(props) -%} {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%} {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%} -{%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%} +{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop != 'id' and (_isAutoResizing and prop != 'data-toggle')) -%} {%- set _allowedAttributes = [ 'autocomplete' ] -%} {# Deprecations #} @@ -69,7 +71,7 @@ {% deprecated _rootClassName ~ ': `message` prop without `validationState` prop will be unsupported in the next version. Use `helperText` instead.' %} {% endif %} -
+