Skip to content

Commit

Permalink
fix(Button): support target property (#1817)
Browse files Browse the repository at this point in the history 
* fix(Button): support target property

* Add target to the type definition file

Co-authored-by: Tobias Høegh <tobias@tujo.no>
  • Loading branch information
@langz @tujoworker @joakbjerk
2 people authored and joakbjerk committed Mar 27, 2023
1 parent 8e1de1b commit c2efa3e
Show file tree
Hide file tree
Showing 18 changed files with 113 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ showTabs: true
| `icon_size` | _(optional)_ define icon width and height. Defaults to 16px |
| `class` | _(optional)_ any extra modifying class. |
| `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
| `target` | _(optional)_ When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. |
| `to` | _(optional)_ use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. |
| `wrap` | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. |
| `stretch` | _(optional)_ set it to `true` in order to stretch the button to the available space. Defaults to false. |
Expand Down
2 changes: 2 additions & 0 deletions ...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -696,6 +696,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -753,6 +754,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down
5 changes: 5 additions & 0 deletions packages/dnb-eufemia/src/components/button/Button.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,11 @@ export type ButtonProps = {
*/
href?: string;

/**
* When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
*/
target?: string;

/**
* Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@ Button.propTypes = {
id: PropTypes.string,
class: PropTypes.string,
href: PropTypes.string,
target: PropTypes.string,
to: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
Expand Down Expand Up @@ -354,6 +355,7 @@ Button.defaultProps = {
icon_position: 'right',
icon_size: null,
href: null,
target: null,
to: null,
id: null,
class: null,
Expand Down
21 changes: 21 additions & 0 deletions packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -65,6 +66,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -112,6 +114,7 @@ exports[`Button component have to match default button snapshot 1`] = `
status_props={{}}
status_state="status_state"
stretch="stretch"
target="target"
text={null}
title="This is a button title"
to={null}
Expand All @@ -125,6 +128,7 @@ exports[`Button component have to match default button snapshot 1`] = `
disabled={false}
id="button"
onClick={[Function]}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -149,6 +153,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -193,6 +198,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -241,6 +247,7 @@ exports[`Button component have to match default button snapshot 1`] = `
status_props={{}}
status_state="status_state"
stretch="stretch"
target="target"
text={null}
title="This is a button title"
to={null}
Expand Down Expand Up @@ -354,6 +361,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -398,6 +406,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -445,6 +454,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
status_props={{}}
status_state="status_state"
stretch="stretch"
target="target"
text={null}
title="This is a button title"
to={null}
Expand All @@ -460,6 +470,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
id="button"
omitClass={true}
onClick={[Function]}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -473,6 +484,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -514,6 +526,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
omitClass={true}
onClick={[Function]}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -527,6 +540,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -568,6 +582,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
onClick={[Function]}
skeleton={null}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -581,6 +596,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -622,6 +638,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
onClick={[Function]}
skeleton={null}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -630,6 +647,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
disabled={false}
href="https://url"
onClick={[Function]}
target="target"
title="This is a button title"
type="type"
>
Expand All @@ -654,6 +672,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -698,6 +717,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
target="target"
title="This is a button title"
type="type"
>
Expand Down Expand Up @@ -746,6 +766,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
status_props={{}}
status_state="status_state"
stretch="stretch"
target="target"
text={null}
title="This is a button title"
to={null}
Expand Down
2 changes: 2 additions & 0 deletions ...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1516,6 +1516,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -1603,6 +1604,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -341,6 +342,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -1163,6 +1165,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title={null}
to={null}
Expand Down Expand Up @@ -1204,6 +1207,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title={null}
to={null}
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -339,6 +340,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -1177,6 +1179,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title={null}
to={null}
Expand Down Expand Up @@ -1218,6 +1221,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title={null}
to={null}
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -628,6 +629,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down
2 changes: 2 additions & 0 deletions .../dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -735,6 +735,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="back"
title={null}
to={null}
Expand Down Expand Up @@ -932,6 +933,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="back"
title={null}
to={null}
Expand Down
4 changes: 4 additions & 0 deletions ...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="close_text"
title="close_text"
to={null}
Expand Down Expand Up @@ -1058,6 +1059,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="close_text"
title="close_text"
to={null}
Expand Down Expand Up @@ -1369,6 +1371,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title="Lukk"
to={null}
Expand Down Expand Up @@ -1411,6 +1414,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text="Lukk"
title="Lukk"
to={null}
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -412,6 +413,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/InputPassword.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ exports[`InputPassword component have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down Expand Up @@ -342,6 +343,7 @@ exports[`InputPassword component have to match snapshot 1`] = `
status_props={null}
status_state="error"
stretch={null}
target={null}
text={null}
title={null}
to={null}
Expand Down
Loading

0 comments on commit c2efa3e

Please sign in to comment.