Skip to content

Commit

Permalink
feat: add innerTabindex prop to link and button (685) (#686)
Browse files Browse the repository at this point in the history
  • Loading branch information
Arturo Castillo Delgado authored Nov 9, 2021
1 parent 1ad00ca commit 15288ee
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 15 deletions.
9 changes: 9 additions & 0 deletions packages/components/src/components/button/button.e2e.ts
View file
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
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
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
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
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
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
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
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
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
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>

0 comments on commit 15288ee

Please sign in to comment.