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(Field.Number): add step control functionality #3140

Merged
merged 1 commit into from
Jan 5, 2024
Merged

feat(Field.Number): add step control functionality #3140

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
126 changes: 124 additions & 2 deletions .../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
import { Slider, Grid } from '@dnb/eufemia/src'
import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
import React from 'react'

export const Empty = () => {
return (
<ComponentBox>
<ComponentBox data-visual-test="number-input">
<Field.Number
onFocus={(value) => console.log('onFocus', value)}
onBlur={(value) => console.log('onBlur', value)}
Expand Down Expand Up @@ -104,7 +106,8 @@ export const HorizontalLayout = () => {

export const Widths = () => {
return (
<ComponentBox>
<ComponentBox hideCode>
<h4 className="dnb-lead">Without step controls</h4>
<Field.Number
label="Default width (property omitted)"
value={123}
Expand Down Expand Up @@ -134,6 +137,41 @@ export const Widths = () => {
width="stretch"
onChange={(value) => console.log('onChange', value)}
/>
<h4 className="dnb-lead">With step controls</h4>
<Field.Number
showStepControls
label="Default width (property omitted)"
value={123}
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
showStepControls
label="Small"
value={123}
width="small"
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
showStepControls
label="Medium"
value={123}
width="medium"
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
showStepControls
label="Large"
value={123}
width="large"
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
showStepControls
label="Stretch"
value={123}
width="stretch"
onChange={(value) => console.log('onChange', value)}
/>
</ComponentBox>
)
}
Expand Down Expand Up @@ -244,3 +282,87 @@ export const ValidateMaximumCustomError = () => {
</ComponentBox>
)
}

export const WithStepControls = () => (
<ComponentBox data-visual-test="number-input-step-controls">
<Field.Number
showStepControls
minimum={0}
maximum={100}
step={10}
value={50}
/>
</ComponentBox>
)

export const WithStepControlsError = () => (
<ComponentBox
scope={{ FormError }}
data-visual-test="number-input-step-controls-error"
>
<Field.Number
showStepControls
maximum={100}
value={150}
error={new FormError('You done messed up, A-a-ron!')}
/>
</ComponentBox>
)

export const WithStepControlsDisabled = () => (
<ComponentBox
scope={{ FormError }}
data-visual-test="number-input-step-controls-disabled"
>
<Field.Number showStepControls disabled />
</ComponentBox>
)

export const WithSlider = () => (
<ComponentBox hideCode>
{() => {
const Component = () => {
const [value, setValue] = React.useState(50000)
const settings = {
min: 0,
max: 100000,
step: 1000,
}
return (
<Grid.Container>
<Grid.Item
span={{
small: [1, 12],
medium: [1, 4],
large: [1, 3],
}}
>
<Field.Number
showStepControls
minimum={settings.min}
maximum={settings.max}
step={settings.step}
value={value}
onChange={(value) => setValue(value)}
width="stretch"
bottom="small"
/>
<Slider
min={settings.min}
max={settings.max}
step={settings.step}
value={value}
onChange={({ value }) =>
setValue(parseFloat(String(value)))
}
hideButtons
tooltip
/>
</Grid.Item>
</Grid.Container>
)
}
return <Component />
}}
</ComponentBox>
)
21 changes: 17 additions & 4 deletions ...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@ import * as Examples from './Examples'

<Examples.Alignment />

### With help

<Examples.WithHelp />

### Horizontal layout

<Examples.HorizontalLayout />
Expand All @@ -38,6 +34,18 @@ import * as Examples from './Examples'

<Examples.Widths />

### With help

<Examples.WithHelp />

### With step controls

<Examples.WithStepControls />

### With step controls in conjunction with Slider

<Examples.WithSlider />

### Disabled

<Examples.Disabled />
Expand Down Expand Up @@ -69,3 +77,8 @@ import * as Examples from './Examples'
### Percentage

<Examples.Percentage />

<VisibleWhenVisualTest>
<Examples.WithStepControlsError />
<Examples.WithStepControlsDisabled />
</VisibleWhenVisualTest>
41 changes: 22 additions & 19 deletions ...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,27 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.

### Component-specific props

| Property | Type | Description |
| --------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `thousandSeparator` | `string` | _(optional)_ Character to use for separating every three digits. |
| `decimalSymbol` | `string` | _(optional)_ What character to use for separating digits and decimals. Defaults to ','. |
| `decimals` | `number` | _(optional)_ Max number of decimals. Values with more decimals will be rounded. |
| `fixedDecimals` | `number` | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less. |
| `percent` | `boolean` | _(optional)_ Format a number as percentage. |
| `prefix` | `string` | _(optional)_ Text added before the value input. |
| `suffix` | `string` | _(optional)_ Text added after the value input. |
| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). |
| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). |
| `exclusiveMinimum` | `number` | _(optional)_ Validation for exclusive minimum number value (greater than). |
| `exclusiveMaximum` | `number` | _(optional)_ Validation for exclusive maximum number value (less than). |
| `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. |
| `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. |
| `align` | `string` | _(optional)_ Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
| Property | Type | Description |
| --------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `thousandSeparator` | `string` | _(optional)_ Character to use for separating every three digits. |
| `decimalSymbol` | `string` | _(optional)_ What character to use for separating digits and decimals. Defaults to ','. |
| `decimals` | `number` | _(optional)_ Max number of decimals. Values with more decimals will be rounded. |
| `fixedDecimals` | `number` | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less. |
| `percent` | `boolean` | _(optional)_ Format a number as percentage. |
| `prefix` | `string` | _(optional)_ Text added before the value input. |
| `suffix` | `string` | _(optional)_ Text added after the value input. |
| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). |
| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). |
| `exclusiveMinimum` | `number` | _(optional)_ Validation for exclusive minimum number value (greater than). |
| `exclusiveMaximum` | `number` | _(optional)_ Validation for exclusive maximum number value (less than). |
| `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. |
| `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. |
| `size` | `string` or `number` | _(optional)_ Size of the input field, see Input's properties for available options. Accepts, but will not forward `number` values as input's element attribute. |
| `align` | `string` | _(optional)_ Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents`. |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| `step` | `number` | _(optional)_ Determines step granularity when in/decreasing value input through step controls buttons or arrow keys. |
| `showStepControls` | `boolean` | _(optional)_ Show buttons that in/decreases value input by the step value. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |

<DataValueReadwriteProperties type="number" />
26 changes: 26 additions & 0 deletions ...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,7 @@ button .dnb-form-status__text {
--button-border-radius--small: calc(var(--button-height--small) / 2);
--button-border-radius--medium: calc(var(--button-height--medium) / 2);
--button-border-radius--large: calc(var(--button-height--large) / 2);
--button-border-radius--control-button: 0.25rem;
position: relative;
user-select: none;
/* stylelint-disable-next-line */
Expand Down Expand Up @@ -453,6 +454,12 @@ button .dnb-form-status__text {
.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
padding-right: 0.5rem;
}
.dnb-button--control-before.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--control-after.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--size-large {
width: var(--button-width--large);
border-radius: var(--button-border-radius--large);
Expand Down Expand Up @@ -507,6 +514,12 @@ button .dnb-form-status__text {
.dnb-button--stretch {
width: 100%;
}
.dnb-button--control-before {
border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.dnb-button--control-after {
border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.dnb-button--reset {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -1705,6 +1718,7 @@ button .dnb-form-status__text {
--button-border-radius--small: calc(var(--button-height--small) / 2);
--button-border-radius--medium: calc(var(--button-height--medium) / 2);
--button-border-radius--large: calc(var(--button-height--large) / 2);
--button-border-radius--control-button: 0.25rem;
position: relative;
user-select: none;
/* stylelint-disable-next-line */
Expand Down Expand Up @@ -1801,6 +1815,12 @@ button .dnb-form-status__text {
.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
padding-right: 0.5rem;
}
.dnb-button--control-before.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--control-after.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--size-large {
width: var(--button-width--large);
border-radius: var(--button-border-radius--large);
Expand Down Expand Up @@ -1855,6 +1875,12 @@ button .dnb-form-status__text {
.dnb-button--stretch {
width: 100%;
}
.dnb-button--control-before {
border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.dnb-button--control-after {
border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.dnb-button--reset {
margin: 0;
padding: 0;
Expand Down
13 changes: 13 additions & 0 deletions ...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,7 @@ button .dnb-form-status__text {
--button-border-radius--small: calc(var(--button-height--small) / 2);
--button-border-radius--medium: calc(var(--button-height--medium) / 2);
--button-border-radius--large: calc(var(--button-height--large) / 2);
--button-border-radius--control-button: 0.25rem;
position: relative;
user-select: none;
/* stylelint-disable-next-line */
Expand Down Expand Up @@ -446,6 +447,12 @@ button .dnb-form-status__text {
.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
padding-right: 0.5rem;
}
.dnb-button--control-before.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--control-after.dnb-button--size-medium {
line-height: var(--button-height);
}
.dnb-button--size-large {
width: var(--button-width--large);
border-radius: var(--button-border-radius--large);
Expand Down Expand Up @@ -500,6 +507,12 @@ button .dnb-form-status__text {
.dnb-button--stretch {
width: 100%;
}
.dnb-button--control-before {
border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
}
.dnb-button--control-after {
border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
}
.dnb-button--reset {
margin: 0;
padding: 0;
Expand Down
Loading
Loading