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

docs: fix outdated boolean usage #2013

Merged
merged 3 commits into from
Feb 27, 2023
Merged

docs: fix outdated boolean usage #2013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
320e57c
Update snapshots
tujoworker Feb 23, 2023
5fd98ba
docs: fix usage of outdated boolean usage
tujoworker Feb 27, 2023
60f80e0
chore: make Slider visual test more reliable
tujoworker Feb 27, 2023
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
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/contribute/style-guides/naming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ HTML attributes uses `kebab-case`, so we needed something between.
The aspect to distinguish between case styles will also make code easier to read and support future code changes and refactoring.

```jsx
<Component aria-hidden="true" myReactProp={...} on_click={...} />
<Component aria-hidden={true} myReactProp={...} on_click={...} />
```

_Update:_ Eufemia does not need to support **Web Components** anymore. That makes it possible to use **camel case** for React Component Properties.
6 changes: 3 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const AutocompleteDynamicallyUpdatedData = () => (
<Autocomplete
mode="async"
on_type={onTypeHandler}
no_scroll_animation="true"
no_scroll_animation={true}
placeholder="Search ..."
/>
)
Expand Down Expand Up @@ -152,8 +152,8 @@ export const AutocompleteFirstFocusUpdate = () => (
return (
<Autocomplete
mode="async"
no_scroll_animation="true"
prevent_selection="true"
no_scroll_animation={true}
prevent_selection={true}
on_type={({ value /* updateData, ... */ }) => {
console.log('on_type', value)
}}
Expand Down
8 changes: 4 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,10 +213,10 @@ export const DatePickerCalendar = () => (
<Wrapper>
<ComponentBox data-visual-test="date-picker-calendar">
<DatePicker
opened="true"
prevent_close="true"
disable_autofocus="true"
range="true"
opened={true}
prevent_close={true}
disable_autofocus={true}
range={true}
start_date="2019-05-05"
end_date="2019-06-05"
/>
Expand Down
8 changes: 4 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@ export const DropdownMoreMenu = () => {
data-visual-test="dropdown-more_menu"
>
<Dropdown
more_menu="true"
more_menu={true}
size="small"
title="Choose an item"
data={() => [
Expand All @@ -354,7 +354,7 @@ export const DropdownMoreMenu = () => {
)}
/>
<Dropdown
prevent_selection="true"
prevent_selection={true}
align_dropdown="right"
size="small"
title={null}
Expand All @@ -373,7 +373,7 @@ export const DropdownMoreMenu = () => {
)}
/>
<Dropdown
more_menu="true"
more_menu={true}
title="Choose an item"
data={[
<Link href="/" key="item-1">
Expand All @@ -385,7 +385,7 @@ export const DropdownMoreMenu = () => {
right="small"
/>
<Dropdown
prevent_selection="true"
prevent_selection={true}
align_dropdown="right"
title={null}
aria-label="Choose an item"
Expand Down
6 changes: 3 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ When you need to provide a considerable amount of options to the user and do not

## Action Menu

The Dropdown component can easily be used as a so-called **action button** by setting the prop `action_menu="true"`. In mobile view, the title/text will be hidden, only showing the icon and the DrawerList will open from the browser bottom.
The Dropdown component can easily be used as a so-called **action button** by setting the prop `action_menu={true}`. In mobile view, the title/text will be hidden, only showing the icon and the DrawerList will open from the browser bottom.

## Menu Button

The Dropdown component can easily be used as a so called **menu button** by setting the prop `more_menu="true"` which shows then the [more](/icons/primary#icon-more) icon, appears as dots. You also could use `prevent_selection="true"` together with an empty title `title=""` and `aria-label="Choose an item"`.
The Dropdown component can easily be used as a so called **menu button** by setting the prop `more_menu={true}` which shows then the [more](/icons/primary#icon-more) icon, appears as dots. You also could use `prevent_selection={true}` together with an empty title `title=""` and `aria-label="Choose an item"`.

## Accessibility

Expand Down Expand Up @@ -55,7 +55,7 @@ You can also set the width directly, but then it has to be defined like so (incl
width: 10rem;
}

/** If more_menu="true" is used */
/** If more_menu={true} is used */
.dnb-dropdown--is-popup .dnb-drawer-list__root {
width: 10rem;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ const VisualTestVerticalEverything = () => (
data-visual-test="form-row-all-vertical-everything"
>
<WidthLimit>
<FormRow label="Vertical everything:" vertical="true">
<FormRow label="Vertical everything:" vertical={true}>
<AllComponents />
</FormRow>
</WidthLimit>
Expand Down Expand Up @@ -641,7 +641,7 @@ export function FormRowSpacingInfo() {
export function FormRowResponsiveInfo() {
return (
<ComponentBox>
<FormRow responsive="true">
<FormRow responsive={true}>
<Input label="Input label">Value</Input>
</FormRow>
</ComponentBox>
Expand Down
12 changes: 6 additions & 6 deletions packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ export const GlobalStatusError = () => (
status_anchor_label: 'eksempel',
},
]}
show="true"
show={true}
autoscroll="false"
no_animation="true"
omit_set_focus="true"
no_animation={true}
omit_set_focus={true}
id="demo-1"
/>
</ComponentBox>
Expand All @@ -41,10 +41,10 @@ export const GlobalStatusInfo = () => (
title="Custom info title ..."
text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
items={['Status text 1', 'Status text 2']}
show="true"
show={true}
autoscroll="false"
no_animation="true"
omit_set_focus="true"
no_animation={true}
omit_set_focus={true}
id="demo-4"
/>
</ComponentBox>
Expand Down
12 changes: 6 additions & 6 deletions .../dnb-design-system-portal/src/docs/uilib/components/global-status/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@ showTabs: true
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | _(optional)_ the main ID. Defaults to the prop |
| `title` | _(optional)_ the title appears as a part of the status content. Use `false` to hide / remove the title and icon. Defaults to `En feil har skjedd`. |
| `text` or `children` | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. |
| `items` | _(optional)_ the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se **Item Object** example below. |
| `icon` | _(optional)_ the icon shown before the status title. Defaults to `exclamation`. |
| `text` or `children` | _(optional)_ the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. |
| `items` | _(optional)_ the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se **Item Object** example below. |
| `icon` | _(optional)_ the icon shown before the status title. Defaults to `exclamation`. |
| `state` | _(optional)_ defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. |
| `icon_size` | _(optional)_ the icon size of the title icon shows. Defaults to `medium`. |
| `show` | _(optional)_ set to `true` or `false` to manually make the global status visible. Defaults to `true`. |
| `autoclose` | _(optional)_ set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`. |
| `autoscroll` | _(optional)_ set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`. |
| `no_animation` | _(optional)_ set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`. |
| `delay` | _(optional)_ defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`. |
| `delay` | _(optional)_ defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`. |
| `hide_close_button` | _(optional)_ set to `true` if the close button should be hidden for the user. Defaults to `false`. |
| `close_text` | _(optional)_ text of the close button. Defaults to `Lukk`. |
| `status_anchor_text` | _(optional)_ defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition. |
Expand All @@ -41,7 +41,7 @@ const items = [
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `text` | _(required)_ the text appears as the status content. Beside plain text, you can send in a React component as well. |
| `status_id` | _(required)_ defines an unique ID so the message can be either updated or removed individual. |
| `status_anchor_url` | _(optional)_ Use `status_anchor_url="true"` to enable the go-to link, defined as a url hash using the `status_id`. Or provide it with an actual url: `status_anchor_url="https://"`. |
| `status_anchor_url` | _(optional)_ Use `status_anchor_url={true}` to enable the go-to link, defined as a url hash using the `status_id`. Or provide it with an actual url: `status_anchor_url="https://"`. |
| `status_anchor_text` | _(optional)_ defines the anchor text showing up after every item. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition. |
| `status_anchor_label` | _(optional)_ adds an additional text to the anchor (replaces `%s`), showing up after every item. Is used by default by other form components, if they have an `label`. |

Expand Down Expand Up @@ -70,4 +70,4 @@ The goal is to update the content (properties/events) of the target GlobalStatus
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | _(optional)_ the main ID. Defaults to the prop `main`. |
| `status_id` | _(optional)_ define a new stack ID so you can remove it with the same ID later on. Defaults to `null`. |
| `remove_on_unmount` | _(optional)_ set to `true` if you want that the component `<GlobalStatus.Add remove_on_unmount="true" ... />` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`. |
| `remove_on_unmount` | _(optional)_ set to `true` if you want that the component `<GlobalStatus.Add remove_on_unmount={true} ... />` should automatically remove the stacked status from the target **GlobalStatus** on component unmount. Defaults to `false`. |
8 changes: 4 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ export const IconBorder = () => (
scope={{ Bell, BellMedium }}
>
<P>
<Icon border="true" icon={Bell} right />
<Icon border="true" icon={BellMedium} size="medium" right />
<IconPrimary border="true" icon={'information'} right />
<Icon border={true} icon={Bell} right />
<Icon border={true} icon={BellMedium} size="medium" right />
<IconPrimary border={true} icon={'information'} right />
<IconPrimary
border="true"
border={true}
icon={'information'}
size="medium"
right
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const InputMaskedExamplePrefix = () => (
number_mask={{
prefix: 'NOK ',
}}
stretch="true"
stretch={true}
placeholder="Enter a number"
on_change={({ numberValue }) => {
console.log(numberValue)
Expand Down
2 changes: 1 addition & 1 deletion ...s/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ render(
label="Email:"
mask={emailMask}
placeholder="@."
keep_placeholder="true"
keep_placeholder={true}
/>
)
```
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export const InputExampleSubmit = () => (
type="search"
label="Label:"
value="Input ..."
selectall="true"
selectall={true}
on_submit={(event) => {
console.log('Input.on_submit', event)
}}
Expand Down
8 changes: 4 additions & 4 deletions packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const ProgressIndicatorCircularLabelHorizontalExample = () => (
<ProgressIndicator
// label="Custom label ..."
type="circular"
show_label="true"
show_label={true}
label_direction="horizontal"
/>
</ComponentBox>
Expand All @@ -40,7 +40,7 @@ export const ProgressIndicatorCircularLabelVerticalExample = () => (
<ProgressIndicator
// label="Custom label ..."
type="circular"
show_label="true"
show_label={true}
label_direction="vertical"
/>
</ComponentBox>
Expand Down Expand Up @@ -186,7 +186,7 @@ export const ProgressIndicatorLinearLabelHorizontalExample = () => (
<ProgressIndicator
type="linear"
// label="Custom label ..."
show_label="true"
show_label={true}
label_direction="horizontal"
/>
</ComponentBox>
Expand All @@ -197,7 +197,7 @@ export const ProgressIndicatorLinearLabelVerticalExample = () => (
<ProgressIndicator
type="linear"
// label="Custom label ..."
show_label="true"
show_label={true}
label_direction="vertical"
/>
</ComponentBox>
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export const SkeletonVisualTests = () => {
data-visual-test="skeleton-all-vertical"
scope={{ AllComponents }}
>
<FormRow vertical="true">
<FormRow vertical={true}>
<Skeleton show no_animation>
<AllComponents />
</Skeleton>
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/space/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ These properties are available in many other components and elements.
| `element` | _(optional)_ defines the HTML element used. Defaults to `div`. |
| `stretch` | _(optional)_ if set to `true`, then the space element will be 100% in `width`. |
| `inline` | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`. |
| `no_collapse` | _(optional)_ if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline="true"` in combination. |
| `no_collapse` | _(optional)_ if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination. |

## Zero

Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const TextareaExampleStretched = () => (
<ComponentBox data-visual-test="textarea-stretch">
<Textarea
label="Horizontal:"
stretch="true"
stretch={true}
rows="3"
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const ToggleButtonMultiselect = () => (
<ComponentBox data-visual-test="toggle-button-group-multiselect">
<ToggleButton.Group
label="Multi-select:"
multiselect="true"
multiselect={true}
values={['first', 'third']}
on_change={({ values }) => {
console.log('on_change', values)
Expand Down Expand Up @@ -89,7 +89,7 @@ export const ToggleButtonStatus = () => (
>
<ToggleButton text="First" value="first" />
<ToggleButton text="Second" value="second" checked />
<ToggleButton text="Third" value="third" checked="true" />
<ToggleButton text="Third" value="third" checked={true} />
</ToggleButton.Group>
</ComponentBox>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ By using inline SVG, we have the possibility to make graphical assets both **res

## Decorative Icons

If your icons are purely **decorative**, you’ll need to manually add an **aria-hidden** (results in `aria-hidden="true"`) attribute to each of your icons so your app is "accessible".
If your icons are purely **decorative**, you’ll need to manually add an **aria-hidden** (results in `aria-hidden={true}`) attribute to each of your icons so your app is "accessible".

<IconsDecorativeExample />

Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/icons/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Beach from 'dnb-design-system-portal/src/docs/uilib/usage/accessibility/a

export const IconsDecorativeExample = () => (
<ComponentBox scope={{ Beach }}>
<Icon icon={Beach} size="64" title="Beach" aria-hidden="true" />
<Icon icon={Beach} size="64" title="Beach" aria-hidden={true} />
</ComponentBox>
)

Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function StickyMenuBar({
id="toggle-sidebar-menu"
size="default"
icon_size="default"
aria-haspopup="true"
aria-haspopup={true}
aria-controls="portal-sidebar-menu"
aria-expanded={isOpen}
aria-label="Section Content Menu"
Expand Down
Loading