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: add innerTabindex prop to link and button #686

Merged
merged 1 commit into from
Nov 9, 2021
Merged

feat: add innerTabindex prop to link and button #686

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
9 changes: 9 additions & 0 deletions packages/components/src/components/button/button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,13 @@ describe('scale-button', () => {
const element = await page.find('scale-button');
expect(element).toHaveClass('hydrated');
});

it('should set tabindex on its inner element', async () => {
const page = await newE2EPage();
await page.setContent(
'<scale-button inner-tabindex="5">Click me!</scale-button>'
);
const element = await page.find('scale-button >>> button');
expect(element.getAttribute('tabindex')).toBe('5');
});
});
6 changes: 5 additions & 1 deletion packages/components/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,10 @@ export class Button {
@Prop() target?: string = '_self';
/** (optional) Injected CSS styles */
@Prop() styles?: string;
/** (optional) name of a file to be downloaded */
/** (optional) Name of a file to be downloaded */
@Prop() download?: string;
/** (optional) Set `tabindex` in the inner button or link element */
@Prop() innerTabindex?: number;

private focusableElement: HTMLElement;

Expand Down Expand Up @@ -137,6 +139,7 @@ export class Button {
target={this.target}
rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
part={basePart}
tabIndex={this.innerTabindex}
>
<slot />
</a>
Expand All @@ -148,6 +151,7 @@ export class Button {
disabled={this.disabled}
type={this.type}
part={basePart}
tabIndex={this.innerTabindex}
>
<slot />
</button>
Expand Down
25 changes: 13 additions & 12 deletions packages/components/src/components/button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,19 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | -------------------------------------------------------------- | --------------------------------- | ----------- |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `download` | `download` | (optional) name of a file to be downloaded | `string` | `undefined` |
| `href` | `href` | (optional) When present, an <a> tag will be used | `string` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Set to `true` when the button contains only an icon | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `size` | `size` | (optional) The size of the button | `"large" \| "small"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `target` | `target` | (optional) The target attribute for the <a> tag | `string` | `'_self'` |
| `type` | `type` | (optional) Button type | `"button" \| "reset" \| "submit"` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `string` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | -------------------------------------------------------------- | --------------------------------- | ----------- |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `download` | `download` | (optional) Name of a file to be downloaded | `string` | `undefined` |
| `href` | `href` | (optional) When present, an <a> tag will be used | `string` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Set to `true` when the button contains only an icon | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` |
| `size` | `size` | (optional) The size of the button | `"large" \| "small"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `target` | `target` | (optional) The target attribute for the <a> tag | `string` | `'_self'` |
| `type` | `type` | (optional) Button type | `"button" \| "reset" \| "submit"` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `string` | `'primary'` |


## Methods
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/components/link/link.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,13 @@ describe('scale-link', () => {
const element = await page.find('scale-link');
expect(element).toHaveClass('hydrated');
});

it('should set tabindex on its inner element', async () => {
const page = await newE2EPage();
await page.setContent(
'<scale-link inner-tabindex="5">default</scale-link>'
);
const element = await page.find('scale-link >>> a');
expect(element.getAttribute('tabindex')).toBe('5');
});
});
4 changes: 3 additions & 1 deletion packages/components/src/components/link/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export class Link {
@Prop() target?: '_self' | '_blank' | '_parent' | '_top';
/** (optional) */
@Prop() type?: string;
/** (optional) Set `tabindex` in the inner button or link element */
@Prop() innerTabindex?: number;
/** (optional) Injected CSS styles */
@Prop() styles?: string;

Expand All @@ -62,7 +64,7 @@ export class Link {
getAnchorProps() {
const props = {
href: this.href || null,
tabIndex: this.disabled ? -1 : null,
tabIndex: this.disabled ? -1 : this.innerTabindex,
'aria-disabled': this.disabled ? 'true' : false,
download: this.download || null,
hreflang: this.hreflang || null,
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/link/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
| `href` | `href` | (optional) Link href | `string` | `undefined` |
| `hreflang` | `hreflang` | (optional) | `string` | `undefined` |
| `iconPosition` | `icon-position` | (optional) Chnage icon/content slot order | `"after" \| "before"` | `'after'` |
| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` |
| `omitUnderline` | `omit-underline` | (optional) Remove the initial line from the text (can also be achieved via `--line-thickness-initial: 0`) Remove the line for every state with `--line-thickness: 0` | `boolean` | `false` |
| `ping` | `ping` | (optional) | `string` | `undefined` |
| `referrerpolicy` | `referrerpolicy` | (optional) | `"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"` | `undefined` |
Expand Down
1 change: 1 addition & 0 deletions packages/storybook-vue/stories/3_components/button/Button.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const Template = (args, { argTypes }) => ({
:variant="variant"
:icon-position="icon === 'after' ? 'after' : 'before'"
:icon-only="iconOnly"
:inner-tabindex="innerTabindex"
:styles="styles"
@click="action('clicked')"
>
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook-vue/stories/3_components/button/ScaleButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
:type="type"
:variant="variant"
:icon-only="iconOnly"
:inner-tabindex="innerTabindex"
:styles="styles"
@click="handler"
>
Expand All @@ -30,6 +31,7 @@ export default {
variant: String,
size: String,
iconOnly: Boolean,
innerTabindex: Number,
styles: String,
},
methods: {
Expand Down
3 changes: 2 additions & 1 deletion packages/storybook-vue/stories/3_components/link/Link.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const Template = (args, { argTypes }) => ({
...ScaleLink.props,
},
template: `
<scale-link
<scale-link
:href="href"
:disabled="disabled"
:styles="styles"
Expand All @@ -68,6 +68,7 @@ export const Template = (args, { argTypes }) => ({
:rel="rel"
:target="target"
:type="type"
:inner-tabindex="innerTabindex"
>
{{ label }}
<template v-slot:icon v-if="withIcon">
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook-vue/stories/3_components/link/ScaleLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
:rel="rel"
:target="target"
:type="type"
:inner-tabindex="innerTabindex"
>
<slot></slot>
<slot name="icon"></slot>
Expand All @@ -37,6 +38,7 @@ export default {
rel: { type: String, default: null },
target: { type: String, default: null },
type: { type: String, default: null },
innerTabindex: Number,
},
};
</script>