Skip to content

Commit

Permalink
feat(button): inner aria-label prop (#1376)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvinLaubenstein
marvinLaubenstein authored Feb 7, 2023
1 parent 19848fa commit f936f81
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 21 deletions.
4 changes: 4 additions & 0 deletions packages/components/src/components/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ export class Button {
@Prop() download?: string;
/** (optional) Set `tabindex` in the inner button or link element */
@Prop() innerTabindex?: number;
/** (optional) Button aria-label */
@Prop() innerAriaLabel?: string;

private focusableElement: HTMLElement;
private fallbackSubmitInputElement: HTMLInputElement;
Expand Down Expand Up @@ -207,6 +209,7 @@ export class Button {
rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
part={basePart}
tabIndex={this.innerTabindex}
aria-label={this.innerAriaLabel}
>
<slot />
</a>
Expand All @@ -221,6 +224,7 @@ export class Button {
tabIndex={this.innerTabindex}
name={this.name}
value={this.value}
aria-label={this.innerAriaLabel}
>
<slot />
</button>
Expand Down
31 changes: 16 additions & 15 deletions packages/components/src/components/button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,22 @@

## 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'` |
| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` |
| `name` | `name` | (optional) The name of the button, submitted as a pair with the button's `value` as part of the form data | `string` | `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` |
| `value` | `value` | (optional) Defines the value associated with the button's `name` | `string` | `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'` |
| `innerAriaLabel` | `inner-aria-label` | (optional) Button aria-label | `string` | `undefined` |
| `innerTabindex` | `inner-tabindex` | (optional) Set `tabindex` in the inner button or link element | `number` | `undefined` |
| `name` | `name` | (optional) The name of the button, submitted as a pair with the button's `value` as part of the form data | `string` | `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` |
| `value` | `value` | (optional) Defines the value associated with the button's `name` | `string` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `string` | `'primary'` |


## Methods
Expand Down
16 changes: 12 additions & 4 deletions packages/storybook-vue/stories/components/button/Button.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ import ScaleButton from './ScaleButton.vue';
download: {
control: { type: 'text' },
},
innerAriaLabel: {
control: { type: 'text' },
},
}}
/>

Expand All @@ -41,7 +44,11 @@ export const Template = (args, { argTypes }) => ({
...ScaleButton.props,
},
template: `
<div style="${args.variant === 'secondary-white'? 'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);' : ''}">
<div style="${
args.variant === 'secondary-white'
? 'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);'
: ''
}">
<scale-button
:disabled="disabled"
:size="size"
Expand Down Expand Up @@ -110,8 +117,9 @@ export const Template = (args, { argTypes }) => ({
--min-height: var(--telekom-spacing-unit-x11);
--min-width: var(--telekom-spacing-unit-x11);
--radius: var(--telekom-radius-standard);
--transition: all var(--telekom-motion-duration-transition)
var(--telekom-motion-easing-standard);
--transition: all var(--telekom-motion-duration-transition) var(
--telekom-motion-easing-standard
);
--color-focus: var(--telekom-color-functional-focus);
--font-weight: var(--telekom-typography-font-weight-bold);
--font-size: var(--telekom-typography-font-size-body);
Expand Down Expand Up @@ -206,7 +214,7 @@ For Shadow Parts, please inspect the element's #shadow.
variant: 'secondary-white',
}}
>
{Template.bind({})}
{Template.bind({})}
</Story>
</Canvas>

Expand Down
6 changes: 4 additions & 2 deletions packages/storybook-vue/stories/components/button/ScaleButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
:variant="variant"
:icon-only="iconOnly"
:inner-tabindex="innerTabindex"
:inner-aria-label="innerAriaLabel"
:styles="styles"
@click="handler"
>
Expand All @@ -19,9 +20,9 @@
</template>

<script>
import { action } from "@storybook/addon-actions";
import { action } from '@storybook/addon-actions';
const handler = action("click");
const handler = action('click');
export default {
props: {
Expand All @@ -36,6 +37,7 @@ export default {
size: String,
iconOnly: Boolean,
innerTabindex: Number,
innerAriaLabel: String,
styles: String,
},
methods: {
Expand Down

0 comments on commit f936f81

Please sign in to comment.