Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(TextCounter): add new fragment used in Textarea #3250

Merged
merged 1 commit into from
Jan 22, 2024
Merged

feat(TextCounter): add new fragment used in Textarea #3250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions ...s/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: 'TextCounter'
description: 'The TextCounter is a component designed to provide real-time character count feedback in text input fields.'
showTabs: true
theme: 'sbanken'
status: null
hideTabs:
- title: Events
---

import Info from './text-counter/info'
import Demos from './text-counter/demos'

<Info />
<Demos />
77 changes: 77 additions & 0 deletions ...es/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/**
* UI lib Component Example
*
*/

import React from 'react'
import ComponentBox from '../../../../../shared/tags/ComponentBox'
import { TextCounter } from '@dnb/eufemia/src/fragments'
import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
import { Flex } from '@dnb/eufemia/src'
import type { TextCounterProps } from '@dnb/eufemia/src/fragments/text-counter/TextCounter'

export function CountCharactersDown() {
return (
<ComponentBox data-visual-test="text-counter-down">
<TextCounter variant="down" text="test" max={10} />
</ComponentBox>
)
}

export function CountCharactersUp() {
return (
<ComponentBox data-visual-test="text-counter-up">
<TextCounter variant="up" text="test" max={10} />
</ComponentBox>
)
}

export function CountCharactersInteractive() {
return (
<ComponentBox>
{() => {
const Counter = () => {
const { data } = Form.useData('text-counter-up', initialData)
return (
<Flex.Stack divider="line">
<Flex.Vertical spacing="x-small">
<Field.String
label="Text"
path="/text"
maxLength={data.max}
/>
<TextCounter
variant={data.variant}
text={data.text}
max={data.max}
/>
</Flex.Vertical>
<Field.Toggle
valueOn="down"
valueOff="up"
textOn="Down"
textOff="Up"
variant="buttons"
label="Variant"
path="/variant"
/>
</Flex.Stack>
)
}

const variant: TextCounterProps['variant'] = 'down'
const initialData = {
max: 10,
variant,
text: 'Count me!',
}

return (
<Form.Handler id="text-counter-up">
<Counter />
</Form.Handler>
)
}}
</ComponentBox>
)
}
19 changes: 19 additions & 0 deletions ...design-system-portal/src/docs/uilib/components/fragments/text-counter/demos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
showTabs: true
---

import * as Examples from './Examples'

## Demos

### Count characters downwards

<Examples.CountCharactersDown />

### Count characters upwards

<Examples.CountCharactersUp />

### Interactive

<Examples.CountCharactersInteractive />
11 changes: 11 additions & 0 deletions ...-design-system-portal/src/docs/uilib/components/fragments/text-counter/info.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
showTabs: true
---

## Description

The `TextCounter` is a component designed to provide real-time character count feedback in text input fields.

It provides the correct text translations and color and a visual indicator of the remaining characters.

It is used in the [Textarea](/uilib/components/textarea/) component.
13 changes: 13 additions & 0 deletions ...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
showTabs: true
---

## Properties

| Properties | Description |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `text` | _(required)_ The text to count characters from. |
| `max` | _(required)_ The maximum number of characters allowed. |
| `variant` | _(optional)_ The counting variant. Can be either `up` (counts up from zero) or `down` (counts down from max). Default is `down`. |
| `bypassAriaLive` | _(optional)_ If true, AriaLive is bypassed. This is useful to signal that a given input field value should not be read out. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
2 changes: 1 addition & 1 deletion ...ages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ showTabs: true
| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. |
| `autoresize` | _(optional)_ use `true` to make the Textarea grow and shrink depending on how many lines the user has filled. |
| `autoresize_max_rows` | _(optional)_ set a number to define how many rows the Textarea can auto grow. |
| `characterCounter` | _(optional)_ use `true` to show a character counter. You need to set a `maxLength={number}` in order to show the counter. |
| `characterCounter` | _(optional)_ use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` in order to show the counter. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. |
| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. |
| `status_props` | _(optional)_ use an object to define additional FormStatus properties. |
Expand Down
44 changes: 22 additions & 22 deletions ...system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.

### Component-specific props

| Property | Type | Description |
| --------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | `string` | _(optional)_ Input DOM element type. |
| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element). |
| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input. |
| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input. |
| `inputClassName` | `string` | _(optional)_ Class name set on the &lt;input&gt; DOM element. |
| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. |
| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value. |
| `autoresize` | `boolean` | _(optional)_ For `multiline`, set `true` to expand when writing longer texts. |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| `capitalize` | `boolean` | _(optional)_ When set to `true`, it will capitalize the first letter of every word, transforming the rest to lowercase. |
| `trim` | `boolean` | _(optional)_ When `true`, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes. |
| `inputMode` | `string` | _(optional)_ Define a [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). |
| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. |
| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. You need to set a `maxLength={number}` as well as have `multiline` enabled in order to show the counter. |
| `minLength` | `number` | _(optional)_ Validation for minimum length of the text (number of characters). |
| `maxLength` | `number` | _(optional)_ Validation for maximum length of the text (number of characters). |
| `pattern` | `string` | _(optional)_ Validation based on regex pattern. |
| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
| Property | Type | Description |
| --------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | `string` | _(optional)_ Input DOM element type. |
| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element). |
| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input. |
| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input. |
| `inputClassName` | `string` | _(optional)_ Class name set on the &lt;input&gt; DOM element. |
| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. |
| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value. |
| `autoresize` | `boolean` | _(optional)_ For `multiline`, set `true` to expand when writing longer texts. |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| `capitalize` | `boolean` | _(optional)_ When set to `true`, it will capitalize the first letter of every word, transforming the rest to lowercase. |
| `trim` | `boolean` | _(optional)_ When `true`, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes. |
| `inputMode` | `string` | _(optional)_ Define a [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). |
| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. |
| `characterCounter` | `boolean` or `string` | _(optional)_ Use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` as well as have `multiline` enabled in order to show the counter. |
| `minLength` | `number` | _(optional)_ Validation for minimum length of the text (number of characters). |
| `maxLength` | `number` | _(optional)_ Validation for maximum length of the text (number of characters). |
| `pattern` | `string` | _(optional)_ Validation based on regex pattern. |
| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |

## Properties

Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/textarea/Textarea.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export interface TextareaProps
*/
autoresize?: boolean;
/**
* use `true` to show a character counter.
* Use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` in order to show the counter.
*/
characterCounter?: boolean;
/**
Expand Down
Loading
Loading