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

fix(Button): support rel property #1990

Merged
merged 1 commit into from
Feb 22, 2023
Merged

fix(Button): support rel property #1990

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
3 changes: 2 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ 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`. |
| `target` | _(optional)_ When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. |
| `rel` | _(optional)_ When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`. |
| `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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
onKeyDown={[Function]}
onSubmit={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -747,6 +748,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
onKeyDown={[Function]}
onSubmit={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
7 changes: 6 additions & 1 deletion packages/dnb-eufemia/src/components/button/Button.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,15 @@ 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`.
* When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
*/
target?: string;

/**
* Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.
*/
rel?: 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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ Button.propTypes = {
class: PropTypes.string,
href: PropTypes.string,
target: PropTypes.string,
rel: PropTypes.string,
to: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
Expand Down Expand Up @@ -356,6 +357,7 @@ Button.defaultProps = {
icon_size: null,
href: null,
target: null,
rel: null,
to: null,
id: null,
class: null,
Expand Down
7 changes: 7 additions & 0 deletions packages/dnb-eufemia/src/components/button/__tests__/Button.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,13 @@ describe('Button component', () => {
expect(document.querySelector('svg')).toBeTruthy()
})

it('supports anchor rel property', () => {
render(
<Component {...props} href="https://url" icon={null} rel="me" />
)
expect(document.querySelector('a').getAttribute('rel')).toBe('me')
})

it('has a disabled attribute, once we set disabled to true', () => {
const { rerender } = render(<Component />)
expect(document.querySelector('button').hasAttribute('disabled')).toBe(
Expand Down
21 changes: 21 additions & 0 deletions packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
View file
Open in desktop
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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -66,6 +67,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -107,6 +109,7 @@ exports[`Button component have to match default button snapshot 1`] = `
}
}
on_click="on_click"
rel="rel"
size={null}
skeleton="skeleton"
status={null}
Expand All @@ -128,6 +131,7 @@ exports[`Button component have to match default button snapshot 1`] = `
disabled={false}
id="button"
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -153,6 +157,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -198,6 +203,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -240,6 +246,7 @@ exports[`Button component have to match default button snapshot 1`] = `
}
isIconOnly={false}
on_click="on_click"
rel="rel"
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -361,6 +368,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -406,6 +414,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -447,6 +456,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
on_click="on_click"
rel="rel"
size={null}
skeleton="skeleton"
status={null}
Expand All @@ -470,6 +480,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
id="button"
omitClass={true}
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -484,6 +495,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -526,6 +538,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
omitClass={true}
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -540,6 +553,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -581,6 +595,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
onClick={[Function]}
rel="rel"
skeleton={null}
target="target"
title="This is a button title"
Expand All @@ -596,6 +611,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -637,6 +653,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
onClick={[Function]}
rel="rel"
skeleton={null}
target="target"
title="This is a button title"
Expand All @@ -647,6 +664,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
disabled={false}
href="https://url"
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -672,6 +690,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -717,6 +736,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"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -759,6 +779,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
isIconOnly={false}
on_click="on_click"
rel="rel"
size={null}
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions ...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1509,6 +1509,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onClick={[Function]}
onFocus={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status="error"
Expand Down Expand Up @@ -1597,6 +1598,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onClick={[Function]}
onFocus={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status="error"
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
inner_ref={null}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -335,6 +336,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
isIconOnly={true}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -1158,6 +1160,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="default"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1200,6 +1203,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="default"
skeleton={false}
status={null}
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
inner_ref={null}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -333,6 +334,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
isIconOnly={true}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -1172,6 +1174,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="default"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1214,6 +1217,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="default"
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -622,6 +623,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions .../dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -926,6 +927,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
4 changes: 4 additions & 0 deletions ...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1009,6 +1009,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="medium"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1052,6 +1053,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="medium"
skeleton={false}
status={null}
Expand Down Expand Up @@ -1364,6 +1366,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="medium"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1407,6 +1410,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="medium"
skeleton={false}
status={null}
Expand Down
Loading