Skip to content

Commit

Permalink
dont forget managing anchor disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdholt
chrisdholt committed Mar 31, 2023
1 parent 2640d25 commit e425bb8
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 26 deletions.
55 changes: 30 additions & 25 deletions packages/web-components/src/anchor/anchor.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type AnchorStoryMeta = Meta<AnchorStoryArgs>;

const storyTemplate = html<AnchorStoryArgs>`
<fluent-anchor
href="${x => x.href}"
appearance="${x => x.appearance}"
shape="${x => x.shape}"
size="${x => x.size}"
Expand All @@ -26,6 +27,7 @@ export default {
title: 'Components/Button/Anchor',
args: {
content: 'Anchor',
href: '#',
disabled: false,
disabledFocusable: false,
},
Expand Down Expand Up @@ -70,6 +72,9 @@ export default {
},
},
},
href: {
control: 'text',
},
content: {
control: 'Anchor text',
},
Expand All @@ -79,22 +84,22 @@ export default {
export const Anchor = renderComponent(storyTemplate).bind({});

export const Appearance = renderComponent(html<AnchorStoryArgs>`
<fluent-anchor>Default</fluent-anchor>
<fluent-anchor appearance="primary">Primary</fluent-anchor>
<fluent-anchor appearance="outline">Outline</fluent-anchor>
<fluent-anchor appearance="subtle">Subtle</fluent-anchor>
<fluent-anchor appearance="transparent">Transparent</fluent-anchor>
<fluent-anchor href="#">Default</fluent-anchor>
<fluent-anchor href="#" appearance="primary">Primary</fluent-anchor>
<fluent-anchor href="#" appearance="outline">Outline</fluent-anchor>
<fluent-anchor href="#" appearance="subtle">Subtle</fluent-anchor>
<fluent-anchor href="#" appearance="transparent">Transparent</fluent-anchor>
`);

export const Shape = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor shape="rounded">Rounded</fluent-anchor>
<fluent-anchor shape="circular">Circular</fluent-anchor>
<fluent-anchor shape="square">Square</fluent-anchor>
<fluent-anchor href="#" shape="rounded">Rounded</fluent-anchor>
<fluent-anchor href="#" shape="circular">Circular</fluent-anchor>
<fluent-anchor href="#" shape="square">Square</fluent-anchor>
`);

export const Size = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor size="small">Small</fluent-anchor>
<fluent-anchor size="small" icon
<fluent-anchor href="#" size="small">Small</fluent-anchor>
<fluent-anchor href="#" size="small" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -110,7 +115,7 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
></path></svg
>Small with calendar icon</fluent-anchor
>
<fluent-anchor size="small" icon-only aria-label="Small icon only button"
<fluent-anchor href="#" size="small" icon-only aria-label="Small icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -124,8 +129,8 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
fill="currentColor"
></path></svg
></fluent-anchor>
<fluent-anchor size="medium">Medium</fluent-anchor>
<fluent-anchor size="medium" icon
<fluent-anchor href="#" size="medium">Medium</fluent-anchor>
<fluent-anchor href="#" size="medium" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -141,7 +146,7 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
></path></svg
>Medium with calendar icon</fluent-anchor
>
<fluent-anchor size="medium" icon-only aria-label="Medium icon only button"
<fluent-anchor href="#" size="medium" icon-only aria-label="Medium icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -155,8 +160,8 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
fill="currentColor"
></path></svg
></fluent-anchor>
<fluent-anchor size="large">Large</fluent-anchor>
<fluent-anchor size="large" icon
<fluent-anchor href="#" size="large">Large</fluent-anchor>
<fluent-anchor href="#" size="large" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -172,7 +177,7 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
></path></svg
>Large with calendar icon</fluent-anchor
>
<fluent-anchor size="large" icon-only aria-label="Large icon only button"
<fluent-anchor href="#" size="large" icon-only aria-label="Large icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -189,12 +194,12 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
`);

export const Disabled = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor>Enabled state</fluent-anchor>
<fluent-anchor disabled>Disabled state</fluent-anchor>
<fluent-anchor disabled-focusable>Disabled focusable state</fluent-anchor>
<fluent-anchor appearance="primary">Enabled state</fluent-anchor>
<fluent-anchor appearance="primary" disabled>Disabled state</fluent-anchor>
<fluent-anchor appearance="primary" disabled-focusable>Disabled focusable state</fluent-anchor>
<fluent-anchor href="#">Enabled state</fluent-anchor>
<fluent-anchor href="#" disabled>Disabled state</fluent-anchor>
<fluent-anchor href="#" disabled-focusable>Disabled focusable state</fluent-anchor>
<fluent-anchor href="#" appearance="primary">Enabled state</fluent-anchor>
<fluent-anchor href="#" appearance="primary" disabled>Disabled state</fluent-anchor>
<fluent-anchor href="#" appearance="primary" disabled-focusable>Disabled focusable state</fluent-anchor>
`);

export const WithLongText = renderComponent(html<ButtonStoryArgs>`
Expand All @@ -203,6 +208,6 @@ export const WithLongText = renderComponent(html<ButtonStoryArgs>`
width: 280px;
}
</style>
<fluent-anchor>Short text</fluent-anchor>
<fluent-anchor class="max-width">Long text wraps after it hits the max width of the component</fluent-anchor>
<fluent-anchor href="#">Short text</fluent-anchor>
<fluent-anchor href="#" class="max-width">Long text wraps after it hits the max width of the component</fluent-anchor>
`);
21 changes: 20 additions & 1 deletion packages/web-components/src/anchor/anchor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,25 @@ export class Anchor extends FASTAnchor {
@attr({ attribute: 'icon-only', mode: 'boolean' })
public iconOnly: boolean = false;

/**
* The anchor is disabled
*
* @public
* @remarks
* HTML Attribute: disabled-focusable
*/
@attr({ mode: 'boolean' })
public disabled?: boolean = false;
protected disabledChanged(prev: boolean, next: boolean): void {
if (this.disabled) {
((this as unknown) as HTMLElement).setAttribute('aria-disabled', 'true');
((this as unknown) as HTMLElement).setAttribute('tabindex', '-1');
} else {
((this as unknown) as HTMLElement).removeAttribute('aria-disabled');
((this as unknown) as HTMLElement).removeAttribute('tabindex');
}
}

/**
* The anchor is disabled but focusable
*
Expand All @@ -72,7 +91,7 @@ export class Anchor extends FASTAnchor {
* Prevents disabledFocusable click events
*/
private handleDisabledFocusableClick = (e: MouseEvent): void => {
if (e && this.disabledFocusable) {
if ((e && this.disabled) || this.disabledFocusable) {
e.stopImmediatePropagation();
return;
}
Expand Down

0 comments on commit e425bb8

Please sign in to comment.