Skip to content

Commit

Permalink
release of v10.21 (#3310)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker authored Feb 21, 2024
2 parents 5650fd5 + 632574b commit fb64317
Show file tree
Hide file tree
Showing 445 changed files with 8,113 additions and 2,423 deletions.
10 changes: 9 additions & 1 deletion ...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,18 @@ For more information on how to replace these, check out [these docs](/uilib/layo
- Find `for_id` and replace with `forId`.
- Find `sr_only` and replace with `srOnly`.

## Definition lists

- Find `direction` in `<Dl>` and replace with `layout`.

## Removal of passing down props to BreadcrumbItem's span

We don't think this has been used for anything other than passing down `data-testid`'s for testing. We believe the potential side effects of passing down props to this span is greater than the advantages it gives for those who want to test this span using data-testid as their way of selecting the span.
We recommend to [use other methods](/uilib/usage/best-practices/for-testing/) to select and test the inner parts of Eufemia components. You could use e.g. `screen.queryByRole`, `screen.queryByRole` or `document.querySelector`.
For more context, take a look in this [PR](https://github.com/dnbexperience/eufemia/pull/2798).

_June, 1. 2023_
## Moved InputPassword to Field.Password

The `InputPassword` component has been moved to `Field.Password`, and is now a part of Eufemia Forms. Change your import statement from `import InputPassword from '@dnb/eufemia/components/input/InputPassword'` to `import { Field } from '@dnb/eufemia/extensions/forms'`.

_February, 6. 2024_
1 change: 1 addition & 0 deletions ...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {
| `disable_autofocus` | _(optional)_ once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. |
| `correct_invalid_date` | _(optional)_ corrects the input date value to be the same as either `min_date` or `max_date`, when the user types in a date that is either before or after one of these. Defaults to `false`. |
| `globalStatus` | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). |
| `tooltip` | _(optional)_ Provide a short Tooltip content that shows up on the picker button. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| `size` | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
Expand Down
11 changes: 5 additions & 6 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 @@ -40,14 +40,13 @@ export function CountCharactersInteractive() {
{() => {
const text = 'Count me!'
const variant: TextCounterProps['variant'] = 'down'
const initialData = {
max: 10,
variant,
text,
}

const Counter = () => {
const { data } = Form.useData('text-counter', initialData)
const { data } = Form.useData('text-counter', {
max: 10,
variant,
text,
})
return (
<Flex.Stack divider="line">
<Flex.Vertical spacing="x-small">
Expand Down
10 changes: 10 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/info-card/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@ export const InfoCardCentered = () => (
</ComponentBox>
)

export const InfoCardWithoutDropShadow = () => (
<ComponentBox>
<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
dropShadow={false}
/>
</ComponentBox>
)

export const InfoCardCustomImage = () => (
<ComponentBox data-visual-test="info-card-custom-image">
<InfoCard
Expand Down
5 changes: 5 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/info-card/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
InfoCardCentered,
InfoCardCustomImage,
InfoCardCustomImageCentered,
InfoCardWithoutDropShadow,
} from 'Docs/uilib/components/info-card/Examples'

## Demos
Expand Down Expand Up @@ -45,6 +46,10 @@ Each button can be used independently.

<InfoCardCentered />

### InfoCard without drop shadow

<InfoCardWithoutDropShadow />

### InfoCard custom image

<InfoCardCustomImage />
Expand Down
1 change: 1 addition & 0 deletions ...ges/dnb-design-system-portal/src/docs/uilib/components/info-card/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ showTabs: true
| `text` | _(required)_ The content of the InfoCard can be a string or a react element. |
| `title` | _(optional)_ The card title is of type `string`. |
| `centered` | _(optional)_ Centers the content. Defaults to `false`. |
| `dropShadow` | _(optional)_ Sets the drop shadow of the info card. Defaults to `true`. |
| `className` | _(optional)_ Custom className for the component root. |
| `icon` | _(optional)_ Custom icon. Defaults to the `lightbulb` icon. |
| `imgProps` | _(optional)_ [Image properties](/uilib/elements/image) applied to the `img` element if the component is used to display an image. |
Expand Down
20 changes: 4 additions & 16 deletions .../dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,12 @@
showTabs: true
---

import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { inputMaskedProperties } from '@dnb/eufemia/src/components/input-masked/InputMaskedDocs'

## Properties

| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as_number` | _(optional)_ Set to `true` to automatically set a number mask based on the given or inherited locale. |
| `as_percent` | _(optional)_ Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale. |
| `as_currency` | _(optional)_ Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale. |
| `mask_options` | _(optional)_ Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `currency_mask`. All options are listed below. |
| `number_mask` | _(optional)_ Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. |
| `currency_mask` | _(optional)_ Set to `true` or set the _valuta_ (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`. |
| `number_format` | _(optional)_ Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`. |
| `locale` | _(optional)_ Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the [Eufemia Provider](/uilib/usage/customisation/provider) if not given. Defaults to `nb-NO`. |
| `mask` | _(optional)_ A mask can be defined both as a [RegExp style of characters](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme) or a callback function. Example below. |
| `show_mask` | _(optional)_ Show mask when input is empty and has no focus. Defaults to `false`. |
| `show_guide` | _(optional)_ When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`. |
| `placeholder_char` | _(optional)_ The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space. |
| `keep_char_positions` | _(optional)_ When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`. |
| [Input](/uilib/components/input/properties) | _(optional)_ all `Input` properties are supported. |
<PropertiesTable props={inputMaskedProperties} />

## Number mask properties

Expand Down
Loading

0 comments on commit fb64317

Please sign in to comment.