Skip to content

Commit

Permalink
chore(TextCounter): add icon, color and custom message when length ha…
Browse files Browse the repository at this point in the history 
…s exceeded (#3261)

https://github.com/dnbexperience/eufemia/assets/1501870/a96d89bb-f5c0-468d-9431-283e3331ba60
  • Loading branch information
@tujoworker
tujoworker authored Jan 22, 2024
1 parent ca4315f commit eb149d2
Show file tree
Hide file tree
Showing 31 changed files with 273 additions and 137 deletions.
27 changes: 18 additions & 9 deletions ...es/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,28 @@ export function CountCharactersUp() {
)
}

export function CountCharactersExceeded() {
return (
<ComponentBox data-visual-test="text-counter-exceeded">
<TextCounter text="test" max={2} />
</ComponentBox>
)
}

export function CountCharactersInteractive() {
return (
<ComponentBox>
{() => {
const text = 'Count me!'
const variant: TextCounterProps['variant'] = 'down'
const initialData = {
max: 10,
variant,
text,
}

const Counter = () => {
const { data } = Form.useData('text-counter-up', initialData)
const { data } = Form.useData('text-counter', initialData)
return (
<Flex.Stack divider="line">
<Flex.Vertical spacing="x-small">
Expand Down Expand Up @@ -59,15 +75,8 @@ export function CountCharactersInteractive() {
)
}

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

return (
<Form.Handler id="text-counter-up">
<Form.Handler id="text-counter">
<Counter />
</Form.Handler>
)
Expand Down
8 changes: 6 additions & 2 deletions ...design-system-portal/src/docs/uilib/components/fragments/text-counter/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import * as Examples from './Examples'

## Demos

### Interactive

<Examples.CountCharactersInteractive />

### Count characters downwards

<Examples.CountCharactersDown />
Expand All @@ -14,6 +18,6 @@ import * as Examples from './Examples'

<Examples.CountCharactersUp />

### Interactive
### Show message as exceeded

<Examples.CountCharactersInteractive />
<Examples.CountCharactersExceeded />
1 change: 0 additions & 1 deletion ...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,4 @@ showTabs: true
| `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: 2 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/textarea/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ import {

### Character counter

Internally, the [TextCounter](uilib/components/fragments/text-counter/) fragment is used to display the character counter.

<TextareaCharacterCounter />

### With FormStatus failure message
Expand Down
2 changes: 1 addition & 1 deletion ...ages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx
View file
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 a number to define the displayed max length. You can also use an object defining the [TextCounter](/uilib/fragments/TextCounter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons. |
| `characterCounter` | _(optional)_ use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons. |
| `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
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` or `string` | _(optional)_ For `multiline`, use a number to define the displayed max length. You can also use an object defining the [TextCounter](/uilib/fragments/TextCounter/) `variant` or properties. |
| `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 `content`. |
| [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)_ For `multiline`, use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. |
| `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 `content`. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |

## Properties

Expand Down
5 changes: 3 additions & 2 deletions packages/dnb-eufemia/src/components/aria-live/AriaLive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React from 'react'
import { AriaLiveAllProps } from './types'
import useAriaLive from './useAriaLive'

export default function AriaLive(props: AriaLiveAllProps) {
export default function AriaLive({ element, ...props }: AriaLiveAllProps) {
const ariaAttributes = useAriaLive(props)
const Element = element || 'section'

return <section {...ariaAttributes} />
return <Element {...ariaAttributes} />
}

AriaLive._supportsSpacingProps = 'children'
18 changes: 18 additions & 0 deletions packages/dnb-eufemia/src/components/aria-live/__tests__/AriaLive.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,24 @@ describe('AriaLive', () => {
expect(element).toHaveAttribute('data-test', 'test-data')
})

it('should reset (remove) given message after a while', async () => {
render(
<AriaLive>
<p>Announcement</p>
</AriaLive>
)

const element = document.querySelector('.dnb-aria-live')

await waitFor(() => {
expect(element).toHaveTextContent('Announcement')
})

await waitFor(() => {
expect(element).toHaveTextContent('')
})
})

it('should have dnb-sr-only class', () => {
render(
<AriaLive>
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/aria-live/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export type AriaLiveProps = {
element?: React.ElementType

/**
* The variant of the announcement. Can be 'text' or 'content'.
*/
Expand Down
Loading

0 comments on commit eb149d2

Please sign in to comment.