From 567aed2c028fe08aef110c1bd422d6f51c23a9ba Mon Sep 17 00:00:00 2001 From: Molly Kreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 2 Feb 2022 13:16:25 -0600 Subject: [PATCH 01/22] first pass --- .../nimble-components/src/button/styles.ts | 10 +-- .../src/toggle-button/index.ts | 89 ++++++++++++++++++ .../src/toggle-button/styles.ts | 33 +++++++ .../tests/toggle-button-matrix.stories.ts | 76 ++++++++++++++++ .../tests/toggle-button.stories.ts | 90 +++++++++++++++++++ 5 files changed, 293 insertions(+), 5 deletions(-) create mode 100644 packages/nimble-components/src/toggle-button/index.ts create mode 100644 packages/nimble-components/src/toggle-button/styles.ts create mode 100644 packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts create mode 100644 packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts diff --git a/packages/nimble-components/src/button/styles.ts b/packages/nimble-components/src/button/styles.ts index 9308c921d8..75f1d3cc58 100644 --- a/packages/nimble-components/src/button/styles.ts +++ b/packages/nimble-components/src/button/styles.ts @@ -132,7 +132,7 @@ export const styles = css` css` .control { background-color: transparent; - border-color: rgba(${actionColorRgbPartial}, 0.5); + border-color: rgba(${actionColorRgbPartial}, 0.3); } .control:hover { @@ -147,7 +147,7 @@ export const styles = css` .control:active { background-color: ${fillColorSelected}; - border-color: transparent; + border-color: ${fillColorSelected}; } .control[disabled] { @@ -176,7 +176,7 @@ export const styles = css` .control:active { background-color: ${fillColorSelected}; - border-color: transparent; + border-color: ${fillColorSelected}; } .control[disabled] { @@ -205,12 +205,12 @@ export const styles = css` .control:active { background-color: ${fillColorSelected}; - border-color: transparent; + border-color: ${fillColorSelected}; } .control[disabled] { background-color: rgba(${borderColorRgbPartial}, 0.1); - border-color: rgba(${borderColorRgbPartial}, 0.1); + border-color: transparent; } ` ) diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts new file mode 100644 index 0000000000..7b8f6462a1 --- /dev/null +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -0,0 +1,89 @@ +import { attr, html, ref } from '@microsoft/fast-element'; +import { + DesignSystem, + Switch as FoundationSwitch, + SwitchOptions +} from '@microsoft/fast-foundation'; +import { styles } from './styles'; +import { styles as baseButtonStyles } from '../button/styles'; +import { ButtonAppearance } from '../button/types'; + +export type { ToggleButton }; + +declare global { + interface HTMLElementTagNameMap { + 'nimble-toggle-button': ToggleButton; + } +} + +/** + * A nimble-styled toggle button control. + */ +class ToggleButton extends FoundationSwitch { + /** + * The appearance the button should have. + * + * @public + * @remarks + * HTML Attribute: appearance + */ + @attr + public appearance!: ButtonAppearance; + + /** + * Specify as 'true' to hide the text content of the button. The button will + * become square, and the text content will be used as the label of the button + * for accessibility purposes. + * + * @public + * @remarks + * HTML Attribute: content-hidden + */ + @attr({ attribute: 'content-hidden', mode: 'boolean' }) + public contentHidden = false; + + public readonly control!: HTMLElement; + private readonly contentId = 'nimble-toggle-button-content'; + + public connectedCallback(): void { + super.connectedCallback(); + if (!this.appearance) { + this.appearance = ButtonAppearance.Outline; + } + + const content = this.control.querySelector('.content')!; + content.id = this.contentId; + this.control.setAttribute('aria-labelledby', this.contentId); + } + + // TODO: add Enter key handler to toggle button +} + +const nimbleToggleButton = ToggleButton.compose({ + baseName: 'toggle-button', + baseClass: FoundationSwitch, + template: html` +
+ + + + + + +
`, + styles: [baseButtonStyles, styles] +}); + +DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton()); \ No newline at end of file diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts new file mode 100644 index 0000000000..db5b27cb04 --- /dev/null +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -0,0 +1,33 @@ +import { css } from '@microsoft/fast-element'; +import { focusVisible } from '../utilities/style/focus'; + +import { + borderColorHover, + fillColorSelected +} from '../theme-provider/design-tokens'; + +export const styles = css` + :host { + user-select: none; + } + + .control[aria-pressed='true'], .control[disabled][aria-pressed='true'] { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } + + .control[aria-pressed='true']:hover:not([disabled]) { + background-color: ${fillColorSelected}; + border-color: ${borderColorHover}; + } + + .control${focusVisible}[aria-pressed='true'] { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } + + .control:active[aria-pressed='true'] { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } +`; \ No newline at end of file diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts new file mode 100644 index 0000000000..9b6983112a --- /dev/null +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -0,0 +1,76 @@ +import type { Meta, Story } from '@storybook/html'; +import { withXD } from 'storybook-addon-xd-designs'; +import { html, ViewTemplate, when } from '@microsoft/fast-element'; +import { ButtonAppearance } from '../../button/types'; +import { + disabledStates, + DisabledState, + createMatrix, + themeWrapper +} from '../../utilities/tests/matrix'; +import { createRenderer } from '../../utilities/tests/storybook'; +import '..'; +import '../../icons/access-control'; +import { hiddenWrapper } from '../../utilities/tests/hidden'; + +const metadata: Meta = { + title: 'Tests/Toggle Button', + decorators: [withXD], + parameters: { + design: { + artboardUrl: + 'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece/specs' + }, + controls: { hideNoControlsWarning: true } + } +}; + +export default metadata; + +export const defaultToggleButton: Story = createRenderer( + html`Default Toggle Button` +); + +type PartVisibilityState = [boolean, boolean]; +const partVisibilityStates: PartVisibilityState[] = [ + [true, true], + [true, false], + [false, true] +]; + +const appearanceStates = Object.entries(ButtonAppearance); +type AppearanceState = typeof appearanceStates[number]; + +type CheckedState = [string, boolean]; +const checkedStates: CheckedState[] = [ + ['Checked', true], + ['Unchecked', false] +]; + +// prettier-ignore +const component = ( + [disabledName, disabled]: DisabledState, + [appearanceName, appearance]: AppearanceState, + [labelVisible, iconVisible]: PartVisibilityState, + [checkedName, checked]: CheckedState +): ViewTemplate => html` + disabled} ?content-hidden=${() => !labelVisible} ?checked=${() => checked}> + ${when(() => iconVisible, html``)} + ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`} + +`; + +export const toggleButtonThemeMatrix: Story = createRenderer( + themeWrapper( + createMatrix(component, [ + disabledStates, + appearanceStates, + partVisibilityStates, + checkedStates + ]) + ) +); + +export const hiddenButton: Story = createRenderer( + hiddenWrapper(html``) +); diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts new file mode 100644 index 0000000000..8a5ed3665c --- /dev/null +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -0,0 +1,90 @@ +import { html, when } from '@microsoft/fast-element'; +import type { Meta, StoryObj } from '@storybook/html'; +import { withXD } from 'storybook-addon-xd-designs'; +import { createRenderer } from '../../utilities/tests/storybook'; +import '..'; +import { ButtonAppearance } from '../../button/types'; + +interface ToggleButtonArgs { + label: string; + appearance: string; + checked: boolean; + disabled: boolean; + icon: boolean; + contentHidden: boolean; +} + +const overviewText = `Per [W3C](https://w3c.github.io/aria-practices/#button) - A toggle button is a two-state button +that can be either off (not pressed) or on (pressed). For example, a button labeled mute in an audio player could +indicate that sound is muted by setting the pressed state true. Important: it is critical the label on a toggle does +not change when its state changes. In this example, when the pressed state is true, the label remains "Mute" so a +screen reader would say something like "Mute toggle button pressed".`; + +const metadata: Meta = { + title: 'Toggle Button', + decorators: [withXD], + parameters: { + docs: { + description: { + component: overviewText + } + }, + design: { + artboardUrl: + 'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece/specs' + }, + actions: { + handles: ['change'] + } + }, + argTypes: { + appearance: { + options: Object.values(ButtonAppearance), + control: { type: 'radio' } + }, + icon: { + description: + 'When including an icon, set `slot="start"` on the icon to ensure proper styling.' + } + }, + render: createRenderer(html` + + ${when(x => x.icon, html``)} + ${x => x.label} + + `), + args: { + label: 'Ghost Toggle Button', + appearance: 'ghost', + checked: true, + icon: false, + contentHidden: false, + disabled: false + } +}; + +export default metadata; + +export const outlineButton: StoryObj = { + args: { label: 'Outline Toggle Button', appearance: ButtonAppearance.Outline } +}; + +export const ghostButton: StoryObj = { + args: { label: 'Ghost Toggle Button', appearance: ButtonAppearance.Ghost } +}; +export const blockButton: StoryObj = { + args: { label: 'Block Toggle Button', appearance: ButtonAppearance.Block } +}; +export const iconButton: StoryObj = { + args: { + label: 'Icon Toggle Button', + icon: true, + contentHidden: true, + appearance: ButtonAppearance.Outline + } +}; From 82462962d764c187298027eca796bc51b8df64d5 Mon Sep 17 00:00:00 2001 From: Molly Kreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 2 Feb 2022 16:31:32 -0600 Subject: [PATCH 02/22] remove base class --- packages/nimble-components/src/toggle-button/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index 7b8f6462a1..c56076ba58 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -61,7 +61,6 @@ class ToggleButton extends FoundationSwitch { const nimbleToggleButton = ToggleButton.compose({ baseName: 'toggle-button', - baseClass: FoundationSwitch, template: html`
Date: Wed, 2 Feb 2022 22:07:04 -0600 Subject: [PATCH 03/22] tests --- .../toggle-button/tests/toggle-button.spec.ts | 190 ++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts new file mode 100644 index 0000000000..8c9319503e --- /dev/null +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts @@ -0,0 +1,190 @@ +import { DOM, html } from '@microsoft/fast-element'; +import { keyEnter, keySpace } from '@microsoft/fast-web-utilities'; +import { fixture, Fixture } from '../../utilities/tests/fixture'; +import '..'; +import type { ToggleButton } from '..'; + +async function setup(): Promise> { + return fixture(html` `); +} + +describe('ToggleButton', () => { + it('should set a role of `button` on the internal control', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.control.getAttribute('role')).toBe('button'); + + await disconnect(); + }); + + it('should set the `aria-pressed` attribute on the internal control equal to the `checked` value', async () => { + const { element, connect, disconnect } = await setup(); + + element.checked = true; + + await connect(); + + expect(element.control.getAttribute('aria-pressed')).toBe('true'); + + element.checked = false; + + await DOM.nextUpdate(); + + expect(element.control.getAttribute('aria-pressed')).toBe('false'); + + await disconnect(); + }); + + it('should add a class of `checked` on the internal control when checked is true', async () => { + const { element, connect, disconnect } = await setup(); + + element.checked = true; + + await connect(); + + expect(element.control.classList.contains('checked')).toBe(true); + + await disconnect(); + }); + + it('should set a default `aria-pressed` value on the internal control when `checked` is not defined', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.control.getAttribute('aria-pressed')).toBe('false'); + + await disconnect(); + }); + + it('should set the `aria-disabled` attribute on the internal control equal to the `disabled` value', async () => { + const { element, connect, disconnect } = await setup(); + + element.disabled = true; + + await connect(); + + expect(element.control.getAttribute('aria-disabled')).toBe('true'); + + element.disabled = false; + + await DOM.nextUpdate(); + + expect(element.control.getAttribute('aria-disabled')).toBe('false'); + + await disconnect(); + }); + + it('should set a default `aria-disabled` value on the internal control when `disabled` is not defined', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.control.getAttribute('aria-disabled')).toBe('false'); + + await disconnect(); + }); + + it('should set the `aria-readonly` attribute on the internal control equal to the `readonly` value', async () => { + const { element, connect, disconnect } = await setup(); + + element.readOnly = true; + + await connect(); + + expect(element.control.getAttribute('aria-readonly')).toBe('true'); + + element.readOnly = false; + + await DOM.nextUpdate(); + + expect(element.control.getAttribute('aria-readonly')).toBe('false'); + + await disconnect(); + }); + + it('should NOT set a default `aria-readonly` value on the internal control when `readonly` is not defined', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.getAttribute('aria-readonly')).toBe(null); + + await disconnect(); + }); + + it('should set a tabindex of 0 on the internal control', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.control.getAttribute('tabindex')).toBe('0'); + + await disconnect(); + }); + + it('should NOT set a tabindex on the internal control when disabled is `true`', async () => { + const { element, connect, disconnect } = await setup(); + + element.disabled = true; + + await connect(); + + expect(element.control.hasAttribute('tabindex')).toBe(false); + expect(element.control.getAttribute('tabindex')).toBe(null); + + await disconnect(); + }); + + describe('events', () => { + it('should fire an event on click', async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + expect(element.checked).toBe(false); + + element.control.click(); + + expect(element.checked).toBe(true); + + await disconnect(); + }); + + it('should fire an event when spacebar is invoked', async () => { + const { element, connect, disconnect } = await setup(); + const event = new KeyboardEvent('keypress', { + key: keySpace, + } as KeyboardEventInit); + + await connect(); + + expect(element.checked).toBe(false); + + element.control.dispatchEvent(event); + + expect(element.checked).toBe(true); + + await disconnect(); + }); + + xit('should fire an event when enter is invoked', async () => { + const { element, connect, disconnect } = await setup(); + const event = new KeyboardEvent('keypress', { + key: keyEnter, + } as KeyboardEventInit); + + await connect(); + + expect(element.checked).toBe(false); + + element.control.dispatchEvent(event); + + expect(element.checked).toBe(true); + + await disconnect(); + }); + }); +}); From 4f5cd88418831dffa11dfd2183f5af28c8b71c65 Mon Sep 17 00:00:00 2001 From: Molly Kreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 4 Feb 2022 09:40:01 -0600 Subject: [PATCH 04/22] move code around + fix focus style on checked toggle button --- .../nimble-components/src/button/index.ts | 2 +- .../nimble-components/src/button/styles.ts | 217 +----------------- .../src/button/tests/button-matrix.stories.ts | 2 +- .../src/button/tests/button.stories.ts | 2 +- .../nimble-components/src/button/types.ts | 9 +- .../src/styles/patterns/button.ts | 217 ++++++++++++++++++ .../src/toggle-button/index.ts | 5 +- .../src/toggle-button/styles.ts | 4 +- .../tests/toggle-button-matrix.stories.ts | 2 +- .../tests/toggle-button.stories.ts | 2 +- .../nimble-components/src/tree-item/styles.ts | 2 +- .../behavior/appearance.ts} | 3 +- .../{style => behavior}/direction.ts | 0 .../src/utilities/types/button-appearance.ts | 10 + 14 files changed, 243 insertions(+), 234 deletions(-) create mode 100644 packages/nimble-components/src/styles/patterns/button.ts rename packages/nimble-components/src/{button/behaviors.ts => utilities/behavior/appearance.ts} (87%) rename packages/nimble-components/src/utilities/{style => behavior}/direction.ts (100%) create mode 100644 packages/nimble-components/src/utilities/types/button-appearance.ts diff --git a/packages/nimble-components/src/button/index.ts b/packages/nimble-components/src/button/index.ts index 746a09585f..51402b772c 100644 --- a/packages/nimble-components/src/button/index.ts +++ b/packages/nimble-components/src/button/index.ts @@ -6,7 +6,7 @@ import { DesignSystem } from '@microsoft/fast-foundation'; import { styles } from './styles'; -import { ButtonAppearance } from './types'; +import { ButtonAppearance } from '../utilities/types/button-appearance'; export type { Button }; diff --git a/packages/nimble-components/src/button/styles.ts b/packages/nimble-components/src/button/styles.ts index 75f1d3cc58..18bb645858 100644 --- a/packages/nimble-components/src/button/styles.ts +++ b/packages/nimble-components/src/button/styles.ts @@ -1,217 +1,6 @@ import { css } from '@microsoft/fast-element'; -import { display } from '@microsoft/fast-foundation'; -import { focusVisible } from '../utilities/style/focus'; -import { - actionColorRgbPartial, - borderColorHover, - borderColorRgbPartial, - borderWidth, - buttonContentFontColor, - contentFontColorDisabled, - contentFontSize, - controlHeight, - fillColorSelected, - fontFamily, - iconColor, - smallDelay, - standardPadding -} from '../theme-provider/design-tokens'; -import { appearanceBehavior } from './behaviors'; -import { ButtonAppearance } from './types'; +import { buttonStyles } from '../styles/patterns/button'; export const styles = css` - ${display('inline-flex')} - - :host { - background-color: transparent; - height: ${controlHeight}; - color: ${buttonContentFontColor}; - font-family: ${fontFamily}; - font-size: ${contentFontSize}; - cursor: pointer; - outline: none; - border: none; - box-sizing: border-box; - ${ - /* - Not sure why but this is needed to get buttons with icons and buttons - without icons to align on the same line when the button is inline-flex - See: https://github.com/microsoft/fast/issues/5414 - */ '' - } - vertical-align: middle; - } - - :host([disabled]) { - color: ${contentFontColorDisabled}; - cursor: default; - } - - .control { - background-color: transparent; - height: inherit; - width: inherit; - border: ${borderWidth} solid transparent; - box-sizing: border-box; - color: inherit; - border-radius: inherit; - fill: inherit; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - cursor: inherit; - font-family: inherit; - font-size: inherit; - outline: none; - margin: 0; - padding: 0 ${standardPadding}; - transition: box-shadow ${smallDelay}; - } - - :host([content-hidden]) .control { - width: ${controlHeight}; - padding: 0px; - } - - @media (prefers-reduced-motion) { - .control { - transition-duration: 0s; - } - } - - .control:hover { - box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset; - outline: none; - } - - .control${focusVisible} { - box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset; - outline: ${borderWidth} solid ${borderColorHover}; - outline-offset: -4px; - } - - .control:active { - box-shadow: none; - outline: none; - } - - .control[disabled] { - box-shadow: none; - outline: none; - } - - .content { - display: contents; - } - - :host([content-hidden]) .content { - display: none; - } - - [part='start'] { - display: contents; - } - - slot[name='start']::slotted(*) { - ${iconColor.cssCustomProperty}: ${buttonContentFontColor}; - } - - :host([disabled]) slot[name='start']::slotted(*) { - opacity: 0.6; - } - - [part='end'] { - display: none; - } -` - // prettier-ignore - .withBehaviors( - appearanceBehavior( - ButtonAppearance.Outline, - css` - .control { - background-color: transparent; - border-color: rgba(${actionColorRgbPartial}, 0.3); - } - - .control:hover { - background-color: transparent; - border-color: ${borderColorHover}; - } - - .control${focusVisible} { - background-color: transparent; - border-color: ${borderColorHover}; - } - - .control:active { - background-color: ${fillColorSelected}; - border-color: ${fillColorSelected}; - } - - .control[disabled] { - background-color: transparent; - border-color: rgba(${borderColorRgbPartial}, 0.2); - } - ` - ), - appearanceBehavior( - ButtonAppearance.Ghost, - css` - .control { - background-color: transparent; - border-color: transparent; - } - - .control:hover { - background-color: transparent; - border-color: ${borderColorHover}; - } - - .control${focusVisible} { - background-color: transparent; - border-color: ${borderColorHover}; - } - - .control:active { - background-color: ${fillColorSelected}; - border-color: ${fillColorSelected}; - } - - .control[disabled] { - background-color: transparent; - border-color: transparent; - } - ` - ), - appearanceBehavior( - ButtonAppearance.Block, - css` - .control { - background-color: rgba(${borderColorRgbPartial}, 0.1); - border-color: transparent; - } - - .control:hover { - background-color: rgba(${borderColorRgbPartial}, 0.1); - border-color: ${borderColorHover}; - } - - .control${focusVisible} { - background-color: rgba(${borderColorRgbPartial}, 0.1); - border-color: ${borderColorHover}; - } - - .control:active { - background-color: ${fillColorSelected}; - border-color: ${fillColorSelected}; - } - - .control[disabled] { - background-color: rgba(${borderColorRgbPartial}, 0.1); - border-color: transparent; - } - ` - ) - ); + ${buttonStyles} +`; diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts index b9dc18a7df..a8b8dfc64b 100644 --- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts +++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../types'; +import { ButtonAppearance } from '../../utilities/types/button-appearance'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts index 51b92be1b7..8d3ab92c85 100644 --- a/packages/nimble-components/src/button/tests/button.stories.ts +++ b/packages/nimble-components/src/button/tests/button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../types'; +import { ButtonAppearance } from '../../utilities/types/button-appearance'; import '..'; import '../../icons/access-control'; import { createRenderer } from '../../utilities/tests/storybook'; diff --git a/packages/nimble-components/src/button/types.ts b/packages/nimble-components/src/button/types.ts index a218a7a1ca..6245d8f202 100644 --- a/packages/nimble-components/src/button/types.ts +++ b/packages/nimble-components/src/button/types.ts @@ -1,14 +1,7 @@ /** - * Types of button appearance. + * Types of button. * @public */ import type { Button } from '@microsoft/fast-foundation'; -export type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block'; -export enum ButtonAppearance { - Outline = 'outline', - Ghost = 'ghost', - Block = 'block' -} - export type ButtonType = Button['type']; diff --git a/packages/nimble-components/src/styles/patterns/button.ts b/packages/nimble-components/src/styles/patterns/button.ts new file mode 100644 index 0000000000..cd19aa8cc2 --- /dev/null +++ b/packages/nimble-components/src/styles/patterns/button.ts @@ -0,0 +1,217 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; +import { focusVisible } from '../../utilities/style/focus'; +import { + actionColorRgbPartial, + borderColorHover, + borderColorRgbPartial, + borderWidth, + buttonContentFontColor, + contentFontColorDisabled, + contentFontSize, + controlHeight, + fillColorSelected, + fontFamily, + iconColor, + smallDelay, + standardPadding +} from '../../theme-provider/design-tokens'; +import { appearanceBehavior } from '../../utilities/behavior/appearance'; +import { ButtonAppearance } from '../../utilities/types/button-appearance'; + +export const buttonStyles = css` + ${display('inline-flex')} + + :host { + background-color: transparent; + height: ${controlHeight}; + color: ${buttonContentFontColor}; + font-family: ${fontFamily}; + font-size: ${contentFontSize}; + cursor: pointer; + outline: none; + border: none; + box-sizing: border-box; + ${ + /* + Not sure why but this is needed to get buttons with icons and buttons + without icons to align on the same line when the button is inline-flex + See: https://github.com/microsoft/fast/issues/5414 + */ '' + } + vertical-align: middle; + } + + :host([disabled]) { + color: ${contentFontColorDisabled}; + cursor: default; + } + + .control { + background-color: transparent; + height: inherit; + width: inherit; + border: ${borderWidth} solid transparent; + box-sizing: border-box; + color: inherit; + border-radius: inherit; + fill: inherit; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + cursor: inherit; + font-family: inherit; + font-size: inherit; + outline: none; + margin: 0; + padding: 0 ${standardPadding}; + transition: box-shadow ${smallDelay}; + } + + :host([content-hidden]) .control { + width: ${controlHeight}; + padding: 0px; + } + + @media (prefers-reduced-motion) { + .control { + transition-duration: 0s; + } + } + + .control:hover { + box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset; + outline: none; + } + + .control${focusVisible} { + box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset; + outline: ${borderWidth} solid ${borderColorHover}; + outline-offset: -4px; + } + + .control:active { + box-shadow: none; + outline: none; + } + + .control[disabled] { + box-shadow: none; + outline: none; + } + + .content { + display: contents; + } + + :host([content-hidden]) .content { + display: none; + } + + [part='start'] { + display: contents; + } + + slot[name='start']::slotted(*) { + ${iconColor.cssCustomProperty}: ${buttonContentFontColor}; + } + + :host([disabled]) slot[name='start']::slotted(*) { + opacity: 0.6; + } + + [part='end'] { + display: none; + } +` + // prettier-ignore + .withBehaviors( + appearanceBehavior( + ButtonAppearance.Outline, + css` + .control { + background-color: transparent; + border-color: rgba(${actionColorRgbPartial}, 0.3); + } + + .control:hover { + background-color: transparent; + border-color: ${borderColorHover}; + } + + .control${focusVisible} { + background-color: transparent; + border-color: ${borderColorHover}; + } + + .control:active { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } + + .control[disabled] { + background-color: transparent; + border-color: rgba(${borderColorRgbPartial}, 0.2); + } + ` + ), + appearanceBehavior( + ButtonAppearance.Ghost, + css` + .control { + background-color: transparent; + border-color: transparent; + } + + .control:hover { + background-color: transparent; + border-color: ${borderColorHover}; + } + + .control${focusVisible} { + background-color: transparent; + border-color: ${borderColorHover}; + } + + .control:active { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } + + .control[disabled] { + background-color: transparent; + border-color: transparent; + } + ` + ), + appearanceBehavior( + ButtonAppearance.Block, + css` + .control { + background-color: rgba(${borderColorRgbPartial}, 0.1); + border-color: transparent; + } + + .control:hover { + background-color: rgba(${borderColorRgbPartial}, 0.1); + border-color: ${borderColorHover}; + } + + .control${focusVisible} { + background-color: rgba(${borderColorRgbPartial}, 0.1); + border-color: ${borderColorHover}; + } + + .control:active { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; + } + + .control[disabled] { + background-color: rgba(${borderColorRgbPartial}, 0.1); + border-color: transparent; + } + ` + ) + ); diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index c56076ba58..fd3455b3ad 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -5,8 +5,7 @@ import { SwitchOptions } from '@microsoft/fast-foundation'; import { styles } from './styles'; -import { styles as baseButtonStyles } from '../button/styles'; -import { ButtonAppearance } from '../button/types'; +import { ButtonAppearance } from '../utilities/types/button-appearance'; export type { ToggleButton }; @@ -82,7 +81,7 @@ const nimbleToggleButton = ToggleButton.compose({
`, - styles: [baseButtonStyles, styles] + styles: [styles] }); DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton()); \ No newline at end of file diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index db5b27cb04..9868e7b3ae 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -5,8 +5,11 @@ import { borderColorHover, fillColorSelected } from '../theme-provider/design-tokens'; +import { buttonStyles } from '../styles/patterns/button'; export const styles = css` + ${buttonStyles} + :host { user-select: none; } @@ -23,7 +26,6 @@ export const styles = css` .control${focusVisible}[aria-pressed='true'] { background-color: ${fillColorSelected}; - border-color: ${fillColorSelected}; } .control:active[aria-pressed='true'] { diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 9b6983112a..d190f04e62 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../button/types'; +import { ButtonAppearance } from '../../utilities/types/button-appearance'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index 8a5ed3665c..e800bdd254 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { createRenderer } from '../../utilities/tests/storybook'; import '..'; -import { ButtonAppearance } from '../../button/types'; +import { ButtonAppearance } from '../../utilities/types/button-appearance'; interface ToggleButtonArgs { label: string; diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index 39f7a35720..d1ad205a33 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -18,7 +18,7 @@ import { iconSize } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; -import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; +import { DirectionalStyleSheetBehavior } from '../utilities/behavior/direction'; export const styles: ( context: ElementDefinitionContext, diff --git a/packages/nimble-components/src/button/behaviors.ts b/packages/nimble-components/src/utilities/behavior/appearance.ts similarity index 87% rename from packages/nimble-components/src/button/behaviors.ts rename to packages/nimble-components/src/utilities/behavior/appearance.ts index 14d43fb21b..2b17efea04 100644 --- a/packages/nimble-components/src/button/behaviors.ts +++ b/packages/nimble-components/src/utilities/behavior/appearance.ts @@ -1,6 +1,5 @@ import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation'; import type { Behavior, ElementStyles } from '@microsoft/fast-element'; -import type { ButtonAppearance } from './types'; /** * Behavior that will conditionally apply a stylesheet based on the element's @@ -12,7 +11,7 @@ import type { ButtonAppearance } from './types'; * @public */ export function appearanceBehavior( - value: ButtonAppearance, + value: string, styles: ElementStyles ): Behavior { return new PropertyStyleSheetBehavior('appearance', value, styles); diff --git a/packages/nimble-components/src/utilities/style/direction.ts b/packages/nimble-components/src/utilities/behavior/direction.ts similarity index 100% rename from packages/nimble-components/src/utilities/style/direction.ts rename to packages/nimble-components/src/utilities/behavior/direction.ts diff --git a/packages/nimble-components/src/utilities/types/button-appearance.ts b/packages/nimble-components/src/utilities/types/button-appearance.ts new file mode 100644 index 0000000000..2a56a968d6 --- /dev/null +++ b/packages/nimble-components/src/utilities/types/button-appearance.ts @@ -0,0 +1,10 @@ +/** + * Types of button appearance. + * @public + */ +export type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block'; +export enum ButtonAppearance { + Outline = 'outline', + Ghost = 'ghost', + Block = 'block' +} \ No newline at end of file From bbfce5d19e61506d6bef7f2eb66a907849791087 Mon Sep 17 00:00:00 2001 From: Molly Kreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 4 Feb 2022 09:47:41 -0600 Subject: [PATCH 05/22] lint --- .../nimble-components/src/styles/patterns/button.ts | 4 ++-- .../nimble-components/src/toggle-button/index.ts | 5 ++--- .../nimble-components/src/toggle-button/styles.ts | 5 +++-- .../tests/toggle-button-matrix.stories.ts | 6 +++++- .../src/toggle-button/tests/toggle-button.spec.ts | 8 +++++--- .../src/toggle-button/tests/toggle-button.stories.ts | 12 ++++++++++-- .../src/utilities/behavior/direction.ts | 8 ++++++-- .../src/utilities/types/button-appearance.ts | 2 +- 8 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/nimble-components/src/styles/patterns/button.ts b/packages/nimble-components/src/styles/patterns/button.ts index cd19aa8cc2..0d2175bd31 100644 --- a/packages/nimble-components/src/styles/patterns/button.ts +++ b/packages/nimble-components/src/styles/patterns/button.ts @@ -33,12 +33,12 @@ export const buttonStyles = css` border: none; box-sizing: border-box; ${ - /* + /* Not sure why but this is needed to get buttons with icons and buttons without icons to align on the same line when the button is inline-flex See: https://github.com/microsoft/fast/issues/5414 */ '' - } +} vertical-align: middle; } diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index fd3455b3ad..8adf50e006 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -60,8 +60,7 @@ class ToggleButton extends FoundationSwitch { const nimbleToggleButton = ToggleButton.compose({ baseName: 'toggle-button', - template: html` -
({ styles: [styles] }); -DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton()); \ No newline at end of file +DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton()); diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index 9868e7b3ae..2203914b12 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -14,7 +14,8 @@ export const styles = css` user-select: none; } - .control[aria-pressed='true'], .control[disabled][aria-pressed='true'] { + .control[aria-pressed='true'], + .control[disabled][aria-pressed='true'] { background-color: ${fillColorSelected}; border-color: ${fillColorSelected}; } @@ -32,4 +33,4 @@ export const styles = css` background-color: ${fillColorSelected}; border-color: ${fillColorSelected}; } -`; \ No newline at end of file +`; diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index d190f04e62..59d6478520 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -72,5 +72,9 @@ export const toggleButtonThemeMatrix: Story = createRenderer( ); export const hiddenButton: Story = createRenderer( - hiddenWrapper(html``) + hiddenWrapper( + html`` + ) ); diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts index 8c9319503e..b11fe66be0 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts @@ -5,7 +5,9 @@ import '..'; import type { ToggleButton } from '..'; async function setup(): Promise> { - return fixture(html` `); + return fixture( + html` ` + ); } describe('ToggleButton', () => { @@ -156,7 +158,7 @@ describe('ToggleButton', () => { it('should fire an event when spacebar is invoked', async () => { const { element, connect, disconnect } = await setup(); const event = new KeyboardEvent('keypress', { - key: keySpace, + key: keySpace } as KeyboardEventInit); await connect(); @@ -173,7 +175,7 @@ describe('ToggleButton', () => { xit('should fire an event when enter is invoked', async () => { const { element, connect, disconnect } = await setup(); const event = new KeyboardEvent('keypress', { - key: keyEnter, + key: keyEnter } as KeyboardEventInit); await connect(); diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index e800bdd254..0dfb907209 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -54,7 +54,12 @@ const metadata: Meta = { ?content-hidden="${x => x.contentHidden}" appearance="${x => x.appearance}" > - ${when(x => x.icon, html``)} + ${when( + x => x.icon, + html`` + )} ${x => x.label} `), @@ -71,7 +76,10 @@ const metadata: Meta = { export default metadata; export const outlineButton: StoryObj = { - args: { label: 'Outline Toggle Button', appearance: ButtonAppearance.Outline } + args: { + label: 'Outline Toggle Button', + appearance: ButtonAppearance.Outline + } }; export const ghostButton: StoryObj = { diff --git a/packages/nimble-components/src/utilities/behavior/direction.ts b/packages/nimble-components/src/utilities/behavior/direction.ts index afa07c31dc..5f25108905 100644 --- a/packages/nimble-components/src/utilities/behavior/direction.ts +++ b/packages/nimble-components/src/utilities/behavior/direction.ts @@ -63,7 +63,11 @@ export class DirectionalStyleSheetBehavior implements Behavior { private attach(source: FASTElement & HTMLElement) { const subscriber = this.cache.get(source) || - new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source); + new DirectionalStyleSheetBehaviorSubscription( + this.ltr, + this.rtl, + source + ); const value = directionDesignToken.getValueFor(source); directionDesignToken.subscribe(subscriber); @@ -87,7 +91,7 @@ class DirectionalStyleSheetBehaviorSubscription implements Subscriber { public handleChange({ target, - token, + token }: DesignTokenChangeRecord) { this.attach(token.getValueFor(target)); } diff --git a/packages/nimble-components/src/utilities/types/button-appearance.ts b/packages/nimble-components/src/utilities/types/button-appearance.ts index 2a56a968d6..13fe2baf1c 100644 --- a/packages/nimble-components/src/utilities/types/button-appearance.ts +++ b/packages/nimble-components/src/utilities/types/button-appearance.ts @@ -7,4 +7,4 @@ export enum ButtonAppearance { Outline = 'outline', Ghost = 'ghost', Block = 'block' -} \ No newline at end of file +} From 541b8fe7fc64c814985c1a00b211ff454a557080 Mon Sep 17 00:00:00 2001 From: mollykreis Date: Mon, 7 Feb 2022 11:03:07 -0600 Subject: [PATCH 06/22] more moving --- .../src/directives/button/nimble-button.directive.ts | 4 ++-- .../directives/button/tests/nimble-button.directive.spec.ts | 2 +- packages/nimble-components/src/button/index.ts | 2 +- packages/nimble-components/src/button/styles.ts | 2 +- .../src/button/tests/button-matrix.stories.ts | 2 +- packages/nimble-components/src/button/tests/button.stories.ts | 2 +- .../button-appearance.ts => patterns/button/appearance.ts} | 0 .../{styles/patterns/button.ts => patterns/button/styles.ts} | 4 ++-- packages/nimble-components/src/toggle-button/index.ts | 2 +- packages/nimble-components/src/toggle-button/styles.ts | 2 +- .../src/toggle-button/tests/toggle-button-matrix.stories.ts | 2 +- .../src/toggle-button/tests/toggle-button.stories.ts | 2 +- packages/nimble-components/src/tree-item/styles.ts | 2 +- .../src/utilities/{behavior => style}/appearance.ts | 0 .../src/utilities/{behavior => style}/direction.ts | 0 15 files changed, 14 insertions(+), 14 deletions(-) rename packages/nimble-components/src/{utilities/types/button-appearance.ts => patterns/button/appearance.ts} (100%) rename packages/nimble-components/src/{styles/patterns/button.ts => patterns/button/styles.ts} (97%) rename packages/nimble-components/src/utilities/{behavior => style}/appearance.ts (100%) rename packages/nimble-components/src/utilities/{behavior => style}/direction.ts (100%) diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts index f85ac8b06c..aab00651af 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts @@ -1,7 +1,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import type { Button } from '@ni/nimble-components/dist/esm/button'; -import type { ButtonAppearanceAttribute, ButtonType } from '@ni/nimble-components/dist/esm/button/types'; -import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types'; +import type { ButtonType } from '@ni/nimble-components/dist/esm/button/types'; +import type { ButtonAppearanceAttribute, ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; import { BooleanValueOrAttribute, toBooleanProperty } from '../utilities/template-value-helpers'; export type { Button, ButtonType }; diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts index 2429f491e2..67d43eb892 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import type { Button } from '@ni/nimble-components/dist/esm/button'; -import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types'; +import { ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; import type { BooleanValueOrAttribute } from '../../utilities/template-value-helpers'; import { NimbleButtonDirective } from '../nimble-button.directive'; import { NimbleButtonModule } from '../nimble-button.module'; diff --git a/packages/nimble-components/src/button/index.ts b/packages/nimble-components/src/button/index.ts index 51402b772c..a82b3a8f87 100644 --- a/packages/nimble-components/src/button/index.ts +++ b/packages/nimble-components/src/button/index.ts @@ -6,7 +6,7 @@ import { DesignSystem } from '@microsoft/fast-foundation'; import { styles } from './styles'; -import { ButtonAppearance } from '../utilities/types/button-appearance'; +import { ButtonAppearance } from '../patterns/button/appearance'; export type { Button }; diff --git a/packages/nimble-components/src/button/styles.ts b/packages/nimble-components/src/button/styles.ts index 18bb645858..d04e11fcf1 100644 --- a/packages/nimble-components/src/button/styles.ts +++ b/packages/nimble-components/src/button/styles.ts @@ -1,5 +1,5 @@ import { css } from '@microsoft/fast-element'; -import { buttonStyles } from '../styles/patterns/button'; +import { buttonStyles } from '../patterns/button/styles'; export const styles = css` ${buttonStyles} diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts index a8b8dfc64b..fdfe947778 100644 --- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts +++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../utilities/types/button-appearance'; +import { ButtonAppearance } from '../../patterns/button/appearance'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts index 8d3ab92c85..13643721a8 100644 --- a/packages/nimble-components/src/button/tests/button.stories.ts +++ b/packages/nimble-components/src/button/tests/button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../utilities/types/button-appearance'; +import { ButtonAppearance } from '../../patterns/button/appearance'; import '..'; import '../../icons/access-control'; import { createRenderer } from '../../utilities/tests/storybook'; diff --git a/packages/nimble-components/src/utilities/types/button-appearance.ts b/packages/nimble-components/src/patterns/button/appearance.ts similarity index 100% rename from packages/nimble-components/src/utilities/types/button-appearance.ts rename to packages/nimble-components/src/patterns/button/appearance.ts diff --git a/packages/nimble-components/src/styles/patterns/button.ts b/packages/nimble-components/src/patterns/button/styles.ts similarity index 97% rename from packages/nimble-components/src/styles/patterns/button.ts rename to packages/nimble-components/src/patterns/button/styles.ts index 0d2175bd31..343dd7741a 100644 --- a/packages/nimble-components/src/styles/patterns/button.ts +++ b/packages/nimble-components/src/patterns/button/styles.ts @@ -16,8 +16,8 @@ import { smallDelay, standardPadding } from '../../theme-provider/design-tokens'; -import { appearanceBehavior } from '../../utilities/behavior/appearance'; -import { ButtonAppearance } from '../../utilities/types/button-appearance'; +import { appearanceBehavior } from '../../utilities/style/appearance'; +import { ButtonAppearance } from './appearance'; export const buttonStyles = css` ${display('inline-flex')} diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index 8adf50e006..ef7f19fd22 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -5,7 +5,7 @@ import { SwitchOptions } from '@microsoft/fast-foundation'; import { styles } from './styles'; -import { ButtonAppearance } from '../utilities/types/button-appearance'; +import { ButtonAppearance } from '../patterns/button/appearance'; export type { ToggleButton }; diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index 2203914b12..e0c99fe6c8 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -5,7 +5,7 @@ import { borderColorHover, fillColorSelected } from '../theme-provider/design-tokens'; -import { buttonStyles } from '../styles/patterns/button'; +import { buttonStyles } from '../patterns/button/styles'; export const styles = css` ${buttonStyles} diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 59d6478520..032bf85050 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../utilities/types/button-appearance'; +import { ButtonAppearance } from '../../patterns/button/appearance'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index 0dfb907209..7ebd2fbe74 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { createRenderer } from '../../utilities/tests/storybook'; import '..'; -import { ButtonAppearance } from '../../utilities/types/button-appearance'; +import { ButtonAppearance } from '../../patterns/button/appearance'; interface ToggleButtonArgs { label: string; diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts index d1ad205a33..39f7a35720 100644 --- a/packages/nimble-components/src/tree-item/styles.ts +++ b/packages/nimble-components/src/tree-item/styles.ts @@ -18,7 +18,7 @@ import { iconSize } from '../theme-provider/design-tokens'; import { groupSelectedAttribute } from '../tree-view/types'; -import { DirectionalStyleSheetBehavior } from '../utilities/behavior/direction'; +import { DirectionalStyleSheetBehavior } from '../utilities/style/direction'; export const styles: ( context: ElementDefinitionContext, diff --git a/packages/nimble-components/src/utilities/behavior/appearance.ts b/packages/nimble-components/src/utilities/style/appearance.ts similarity index 100% rename from packages/nimble-components/src/utilities/behavior/appearance.ts rename to packages/nimble-components/src/utilities/style/appearance.ts diff --git a/packages/nimble-components/src/utilities/behavior/direction.ts b/packages/nimble-components/src/utilities/style/direction.ts similarity index 100% rename from packages/nimble-components/src/utilities/behavior/direction.ts rename to packages/nimble-components/src/utilities/style/direction.ts From 17ab8d12975cdfa85c4907cc9abd3dbfdcab4ed3 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 11:25:08 -0600 Subject: [PATCH 07/22] cleanup --- .../src/directives/button/nimble-button.directive.ts | 3 ++- packages/nimble-components/src/button/types.ts | 7 ------- .../nimble-components/src/patterns/button/appearance.ts | 2 +- .../toggle-button/tests/toggle-button-matrix.stories.ts | 4 +--- .../src/toggle-button/tests/toggle-button.spec.ts | 2 +- .../src/toggle-button/tests/toggle-button.stories.ts | 7 +------ .../nimble-components/src/utilities/style/direction.ts | 8 ++------ 7 files changed, 8 insertions(+), 25 deletions(-) diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts index aab00651af..4a413106e8 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts @@ -1,7 +1,8 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import type { Button } from '@ni/nimble-components/dist/esm/button'; import type { ButtonType } from '@ni/nimble-components/dist/esm/button/types'; -import type { ButtonAppearanceAttribute, ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; +import type { ButtonAppearanceAttribute } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; +import { ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; import { BooleanValueOrAttribute, toBooleanProperty } from '../utilities/template-value-helpers'; export type { Button, ButtonType }; diff --git a/packages/nimble-components/src/button/types.ts b/packages/nimble-components/src/button/types.ts index 80e9d3cd8a..6245d8f202 100644 --- a/packages/nimble-components/src/button/types.ts +++ b/packages/nimble-components/src/button/types.ts @@ -4,11 +4,4 @@ */ import type { Button } from '@microsoft/fast-foundation'; -export enum ButtonAppearance { - Outline = 'outline', - Ghost = 'ghost', - Block = 'block' -} -export type ButtonAppearanceAttribute = `${ButtonAppearance}`; - export type ButtonType = Button['type']; diff --git a/packages/nimble-components/src/patterns/button/appearance.ts b/packages/nimble-components/src/patterns/button/appearance.ts index 13fe2baf1c..78f07e8a29 100644 --- a/packages/nimble-components/src/patterns/button/appearance.ts +++ b/packages/nimble-components/src/patterns/button/appearance.ts @@ -2,9 +2,9 @@ * Types of button appearance. * @public */ -export type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block'; export enum ButtonAppearance { Outline = 'outline', Ghost = 'ghost', Block = 'block' } +export type ButtonAppearanceAttribute = `${ButtonAppearance}`; diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 032bf85050..9677ac3733 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -73,8 +73,6 @@ export const toggleButtonThemeMatrix: Story = createRenderer( export const hiddenButton: Story = createRenderer( hiddenWrapper( - html`` + html`` ) ); diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts index b11fe66be0..165226afbd 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts @@ -6,7 +6,7 @@ import type { ToggleButton } from '..'; async function setup(): Promise> { return fixture( - html` ` + html`` ); } diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index 7ebd2fbe74..41af1e0eac 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -54,12 +54,7 @@ const metadata: Meta = { ?content-hidden="${x => x.contentHidden}" appearance="${x => x.appearance}" > - ${when( - x => x.icon, - html`` - )} + ${when(x => x.icon, html``)} ${x => x.label} `), diff --git a/packages/nimble-components/src/utilities/style/direction.ts b/packages/nimble-components/src/utilities/style/direction.ts index 5f25108905..afa07c31dc 100644 --- a/packages/nimble-components/src/utilities/style/direction.ts +++ b/packages/nimble-components/src/utilities/style/direction.ts @@ -63,11 +63,7 @@ export class DirectionalStyleSheetBehavior implements Behavior { private attach(source: FASTElement & HTMLElement) { const subscriber = this.cache.get(source) || - new DirectionalStyleSheetBehaviorSubscription( - this.ltr, - this.rtl, - source - ); + new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source); const value = directionDesignToken.getValueFor(source); directionDesignToken.subscribe(subscriber); @@ -91,7 +87,7 @@ class DirectionalStyleSheetBehaviorSubscription implements Subscriber { public handleChange({ target, - token + token, }: DesignTokenChangeRecord) { this.attach(token.getValueFor(target)); } From 86e00ccc595abeb1cb5d3d881ae112b244df5236 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 11:28:54 -0600 Subject: [PATCH 08/22] lint --- packages/nimble-components/src/patterns/button/styles.ts | 4 ++-- .../src/toggle-button/tests/toggle-button-matrix.stories.ts | 1 + .../src/toggle-button/tests/toggle-button.stories.ts | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts index 343dd7741a..09a8d73bff 100644 --- a/packages/nimble-components/src/patterns/button/styles.ts +++ b/packages/nimble-components/src/patterns/button/styles.ts @@ -33,12 +33,12 @@ export const buttonStyles = css` border: none; box-sizing: border-box; ${ - /* + /* Not sure why but this is needed to get buttons with icons and buttons without icons to align on the same line when the button is inline-flex See: https://github.com/microsoft/fast/issues/5414 */ '' -} + } vertical-align: middle; } diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 9677ac3733..9f954d8264 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -71,6 +71,7 @@ export const toggleButtonThemeMatrix: Story = createRenderer( ) ); +// prettier-ignore export const hiddenButton: Story = createRenderer( hiddenWrapper( html`` diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index 41af1e0eac..f9721c8a4f 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -47,6 +47,7 @@ const metadata: Meta = { 'When including an icon, set `slot="start"` on the icon to ensure proper styling.' } }, + // prettier-ignore render: createRenderer(html` Date: Mon, 7 Feb 2022 11:50:02 -0600 Subject: [PATCH 09/22] remove TODO --- packages/nimble-components/src/toggle-button/index.ts | 2 -- .../src/toggle-button/tests/toggle-button.spec.ts | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index ef7f19fd22..d4c8a129b4 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -54,8 +54,6 @@ class ToggleButton extends FoundationSwitch { content.id = this.contentId; this.control.setAttribute('aria-labelledby', this.contentId); } - - // TODO: add Enter key handler to toggle button } const nimbleToggleButton = ToggleButton.compose({ diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts index 165226afbd..63b1904b1f 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts @@ -172,6 +172,8 @@ describe('ToggleButton', () => { await disconnect(); }); + // The 'Enter' key interaction is added to the FAST switch in + // https://github.com/microsoft/fast/pull/5325 xit('should fire an event when enter is invoked', async () => { const { element, connect, disconnect } = await setup(); const event = new KeyboardEvent('keypress', { From e17070266a731e75be4692d169025c750d107245 Mon Sep 17 00:00:00 2001 From: Molly Kreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 12:18:40 -0600 Subject: [PATCH 10/22] Change files --- ...imble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json | 7 +++++++ ...le-components-18658b12-bd45-4e8c-b171-a059d9520578.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json create mode 100644 change/@ni-nimble-components-18658b12-bd45-4e8c-b171-a059d9520578.json diff --git a/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json b/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json new file mode 100644 index 0000000000..ba61b2bf0d --- /dev/null +++ b/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update import paths for button appearance", + "packageName": "@ni/nimble-angular", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-components-18658b12-bd45-4e8c-b171-a059d9520578.json b/change/@ni-nimble-components-18658b12-bd45-4e8c-b171-a059d9520578.json new file mode 100644 index 0000000000..09ad579561 --- /dev/null +++ b/change/@ni-nimble-components-18658b12-bd45-4e8c-b171-a059d9520578.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Create nimble-toggle-button", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} From 202aef0a9eee86aa0ed622943a64b80acae9cd9e Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 12:37:49 -0600 Subject: [PATCH 11/22] update component status in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 60ac2441b0..7843197b48 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ NOTE: To update the component status: | Text Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/42001df1-2969-438e-b353-4327d7a15102) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/button--outline-button) | :white_check_mark: | :o: | | Text and Icon Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/a378bcdb-5c4b-4298-b3b1-28d8b1a37af2) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/button--outline-button) | :white_check_mark: | :o: | | Icon Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/button--icon-ghost-button) | :white_check_mark: | :o: | -| Toggle Icon Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece) | :o: | :o: | :o: | +| Toggle Icon Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/story/toggle-button--icon-button) | :o: | :o: | | Split Icon Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece) | :o: | :o: | :o: | | Icon Menu Button | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece) | :o: | :o: | :o: | | Checkbox | [XD](https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/3698340b-8162-4e5d-bf7a-20194612b3a7) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/checkbox--checkbox) | :white_check_mark: | :o: | From 6a40b637b9f7c6a06255877064b0c8062fd85735 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 16:36:23 -0600 Subject: [PATCH 12/22] add styling to button matrix & clean up test formatting --- .../tests/toggle-button-matrix.stories.ts | 23 +++-- .../toggle-button/tests/toggle-button.spec.ts | 99 ++++--------------- 2 files changed, 32 insertions(+), 90 deletions(-) diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 9f954d8264..5caa5abc8e 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -49,24 +49,29 @@ const checkedStates: CheckedState[] = [ // prettier-ignore const component = ( - [disabledName, disabled]: DisabledState, - [appearanceName, appearance]: AppearanceState, [labelVisible, iconVisible]: PartVisibilityState, - [checkedName, checked]: CheckedState + [checkedName, checked]: CheckedState, + [disabledName, disabled]: DisabledState, + [appearanceName, appearance]: AppearanceState ): ViewTemplate => html` - disabled} ?content-hidden=${() => !labelVisible} ?checked=${() => checked}> - ${when(() => iconVisible, html``)} - ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`} + disabled} + ?content-hidden=${() => !labelVisible} + ?checked=${() => checked} + style="margin-right: 8px; margin-bottom: 8px;"> + ${when(() => iconVisible, html``)} + ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`} `; export const toggleButtonThemeMatrix: Story = createRenderer( themeWrapper( createMatrix(component, [ - disabledStates, - appearanceStates, partVisibilityStates, - checkedStates + checkedStates, + disabledStates, + appearanceStates ]) ) ); diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts index 63b1904b1f..0afff45a72 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.spec.ts @@ -11,184 +11,121 @@ async function setup(): Promise> { } describe('ToggleButton', () => { - it('should set a role of `button` on the internal control', async () => { - const { element, connect, disconnect } = await setup(); - - await connect(); + let element: ToggleButton; + let connect: () => Promise; + let disconnect: () => Promise; - expect(element.control.getAttribute('role')).toBe('button'); + beforeEach(async () => { + ({ element, connect, disconnect } = await setup()); + }); + afterEach(async () => { await disconnect(); }); - it('should set the `aria-pressed` attribute on the internal control equal to the `checked` value', async () => { - const { element, connect, disconnect } = await setup(); + it('should set a role of `button` on the internal control', async () => { + await connect(); + expect(element.control.getAttribute('role')).toBe('button'); + }); + it('should set the `aria-pressed` attribute on the internal control equal to the `checked` value', async () => { element.checked = true; - await connect(); - expect(element.control.getAttribute('aria-pressed')).toBe('true'); element.checked = false; - await DOM.nextUpdate(); expect(element.control.getAttribute('aria-pressed')).toBe('false'); - - await disconnect(); }); it('should add a class of `checked` on the internal control when checked is true', async () => { - const { element, connect, disconnect } = await setup(); - element.checked = true; - await connect(); - expect(element.control.classList.contains('checked')).toBe(true); - - await disconnect(); }); it('should set a default `aria-pressed` value on the internal control when `checked` is not defined', async () => { - const { element, connect, disconnect } = await setup(); - await connect(); - expect(element.control.getAttribute('aria-pressed')).toBe('false'); - - await disconnect(); }); it('should set the `aria-disabled` attribute on the internal control equal to the `disabled` value', async () => { - const { element, connect, disconnect } = await setup(); - element.disabled = true; - await connect(); - expect(element.control.getAttribute('aria-disabled')).toBe('true'); element.disabled = false; - await DOM.nextUpdate(); expect(element.control.getAttribute('aria-disabled')).toBe('false'); - - await disconnect(); }); it('should set a default `aria-disabled` value on the internal control when `disabled` is not defined', async () => { - const { element, connect, disconnect } = await setup(); - await connect(); - expect(element.control.getAttribute('aria-disabled')).toBe('false'); - - await disconnect(); }); it('should set the `aria-readonly` attribute on the internal control equal to the `readonly` value', async () => { - const { element, connect, disconnect } = await setup(); - element.readOnly = true; - await connect(); - expect(element.control.getAttribute('aria-readonly')).toBe('true'); element.readOnly = false; - await DOM.nextUpdate(); expect(element.control.getAttribute('aria-readonly')).toBe('false'); - - await disconnect(); }); it('should NOT set a default `aria-readonly` value on the internal control when `readonly` is not defined', async () => { - const { element, connect, disconnect } = await setup(); - await connect(); - expect(element.getAttribute('aria-readonly')).toBe(null); - - await disconnect(); }); it('should set a tabindex of 0 on the internal control', async () => { - const { element, connect, disconnect } = await setup(); - await connect(); - expect(element.control.getAttribute('tabindex')).toBe('0'); - - await disconnect(); }); it('should NOT set a tabindex on the internal control when disabled is `true`', async () => { - const { element, connect, disconnect } = await setup(); - element.disabled = true; - await connect(); - expect(element.control.hasAttribute('tabindex')).toBe(false); expect(element.control.getAttribute('tabindex')).toBe(null); - - await disconnect(); }); describe('events', () => { it('should fire an event on click', async () => { - const { element, connect, disconnect } = await setup(); - await connect(); - expect(element.checked).toBe(false); - element.control.click(); - expect(element.checked).toBe(true); - - await disconnect(); }); it('should fire an event when spacebar is invoked', async () => { - const { element, connect, disconnect } = await setup(); - const event = new KeyboardEvent('keypress', { - key: keySpace - } as KeyboardEventInit); - await connect(); - expect(element.checked).toBe(false); + const event = new KeyboardEvent('keypress', { + key: keySpace + } as KeyboardEventInit); element.control.dispatchEvent(event); expect(element.checked).toBe(true); - - await disconnect(); }); // The 'Enter' key interaction is added to the FAST switch in // https://github.com/microsoft/fast/pull/5325 xit('should fire an event when enter is invoked', async () => { - const { element, connect, disconnect } = await setup(); - const event = new KeyboardEvent('keypress', { - key: keyEnter - } as KeyboardEventInit); - await connect(); - expect(element.checked).toBe(false); + const event = new KeyboardEvent('keypress', { + key: keyEnter + } as KeyboardEventInit); element.control.dispatchEvent(event); expect(element.checked).toBe(true); - - await disconnect(); }); }); }); From f281ab7c5267d082178787df9cbaea93c9a1761c Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 16:40:45 -0600 Subject: [PATCH 13/22] readme for patterns directory --- packages/nimble-components/src/patterns/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/nimble-components/src/patterns/README.md diff --git a/packages/nimble-components/src/patterns/README.md b/packages/nimble-components/src/patterns/README.md new file mode 100644 index 0000000000..2b6449322f --- /dev/null +++ b/packages/nimble-components/src/patterns/README.md @@ -0,0 +1 @@ +The `patterns` directory contains patterns, such as styles and types, that are shared between multiple components. Place each pattern in its own sub-directory. \ No newline at end of file From de33f2968bf51bbd05c2ec9cee369bfab7e751df Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 7 Feb 2022 16:50:04 -0600 Subject: [PATCH 14/22] lint --- packages/nimble-components/src/patterns/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/patterns/README.md b/packages/nimble-components/src/patterns/README.md index 2b6449322f..c62daad565 100644 --- a/packages/nimble-components/src/patterns/README.md +++ b/packages/nimble-components/src/patterns/README.md @@ -1 +1 @@ -The `patterns` directory contains patterns, such as styles and types, that are shared between multiple components. Place each pattern in its own sub-directory. \ No newline at end of file +The `patterns` directory contains patterns, such as styles and types, that are shared between multiple components. Place each pattern in its own sub-directory. From 62352e5cc10b0cc1373accb92e4b6c12c80be054 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 12:24:10 -0600 Subject: [PATCH 15/22] PR feedback --- .../button/nimble-button.directive.ts | 5 ++- .../tests/nimble-button.directive.spec.ts | 2 +- .../nimble-components/src/button/index.ts | 6 ++-- .../nimble-components/src/button/styles.ts | 6 ---- .../src/button/tests/button-matrix.stories.ts | 2 +- .../src/button/tests/button.stories.ts | 2 +- .../nimble-components/src/button/types.ts | 4 +++ .../src/patterns/button/styles.ts | 2 +- .../button/{appearance.ts => types.ts} | 0 .../src/toggle-button/index.ts | 31 +++---------------- .../src/toggle-button/styles.ts | 18 +++++------ .../src/toggle-button/template.ts | 26 ++++++++++++++++ .../tests/toggle-button-matrix.stories.ts | 2 +- .../tests/toggle-button.stories.ts | 3 +- .../src/toggle-button/types.ts | 9 ++++++ .../src/utilities/style/appearance.ts | 3 +- 16 files changed, 64 insertions(+), 57 deletions(-) delete mode 100644 packages/nimble-components/src/button/styles.ts rename packages/nimble-components/src/patterns/button/{appearance.ts => types.ts} (100%) create mode 100644 packages/nimble-components/src/toggle-button/template.ts create mode 100644 packages/nimble-components/src/toggle-button/types.ts diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts index 4a413106e8..f85ac8b06c 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/button/nimble-button.directive.ts @@ -1,8 +1,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import type { Button } from '@ni/nimble-components/dist/esm/button'; -import type { ButtonType } from '@ni/nimble-components/dist/esm/button/types'; -import type { ButtonAppearanceAttribute } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; -import { ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; +import type { ButtonAppearanceAttribute, ButtonType } from '@ni/nimble-components/dist/esm/button/types'; +import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types'; import { BooleanValueOrAttribute, toBooleanProperty } from '../utilities/template-value-helpers'; export type { Button, ButtonType }; diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts index 67d43eb892..2429f491e2 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/button/tests/nimble-button.directive.spec.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import type { Button } from '@ni/nimble-components/dist/esm/button'; -import { ButtonAppearance } from '@ni/nimble-components/dist/esm/patterns/button/appearance'; +import { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types'; import type { BooleanValueOrAttribute } from '../../utilities/template-value-helpers'; import { NimbleButtonDirective } from '../nimble-button.directive'; import { NimbleButtonModule } from '../nimble-button.module'; diff --git a/packages/nimble-components/src/button/index.ts b/packages/nimble-components/src/button/index.ts index a82b3a8f87..ea12bd65af 100644 --- a/packages/nimble-components/src/button/index.ts +++ b/packages/nimble-components/src/button/index.ts @@ -5,8 +5,8 @@ import { buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation'; -import { styles } from './styles'; -import { ButtonAppearance } from '../patterns/button/appearance'; +import { buttonStyles } from '../patterns/button/styles'; +import { ButtonAppearance } from '../patterns/button/types'; export type { Button }; @@ -70,7 +70,7 @@ const nimbleButton = Button.compose({ baseClass: FoundationButton, // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047 template, - styles, + styles: buttonStyles, shadowOptions: { delegatesFocus: true } diff --git a/packages/nimble-components/src/button/styles.ts b/packages/nimble-components/src/button/styles.ts deleted file mode 100644 index d04e11fcf1..0000000000 --- a/packages/nimble-components/src/button/styles.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { css } from '@microsoft/fast-element'; -import { buttonStyles } from '../patterns/button/styles'; - -export const styles = css` - ${buttonStyles} -`; diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts index fdfe947778..b9dc18a7df 100644 --- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts +++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../patterns/button/appearance'; +import { ButtonAppearance } from '../types'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/button/tests/button.stories.ts b/packages/nimble-components/src/button/tests/button.stories.ts index 13643721a8..51b92be1b7 100644 --- a/packages/nimble-components/src/button/tests/button.stories.ts +++ b/packages/nimble-components/src/button/tests/button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../patterns/button/appearance'; +import { ButtonAppearance } from '../types'; import '..'; import '../../icons/access-control'; import { createRenderer } from '../../utilities/tests/storybook'; diff --git a/packages/nimble-components/src/button/types.ts b/packages/nimble-components/src/button/types.ts index 6245d8f202..a2795bad81 100644 --- a/packages/nimble-components/src/button/types.ts +++ b/packages/nimble-components/src/button/types.ts @@ -3,5 +3,9 @@ * @public */ import type { Button } from '@microsoft/fast-foundation'; +import type { ButtonAppearanceAttribute } from '../patterns/button/types'; +import { ButtonAppearance } from '../patterns/button/types'; export type ButtonType = Button['type']; +export type { ButtonAppearanceAttribute }; +export { ButtonAppearance }; diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts index 09a8d73bff..dcc96ded00 100644 --- a/packages/nimble-components/src/patterns/button/styles.ts +++ b/packages/nimble-components/src/patterns/button/styles.ts @@ -17,7 +17,7 @@ import { standardPadding } from '../../theme-provider/design-tokens'; import { appearanceBehavior } from '../../utilities/style/appearance'; -import { ButtonAppearance } from './appearance'; +import { ButtonAppearance } from './types'; export const buttonStyles = css` ${display('inline-flex')} diff --git a/packages/nimble-components/src/patterns/button/appearance.ts b/packages/nimble-components/src/patterns/button/types.ts similarity index 100% rename from packages/nimble-components/src/patterns/button/appearance.ts rename to packages/nimble-components/src/patterns/button/types.ts diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index d4c8a129b4..a334be3100 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -5,7 +5,8 @@ import { SwitchOptions } from '@microsoft/fast-foundation'; import { styles } from './styles'; -import { ButtonAppearance } from '../patterns/button/appearance'; +import { template } from './template'; +import { ButtonAppearance } from '../patterns/button/types'; export type { ToggleButton }; @@ -42,43 +43,19 @@ class ToggleButton extends FoundationSwitch { public contentHidden = false; public readonly control!: HTMLElement; - private readonly contentId = 'nimble-toggle-button-content'; public connectedCallback(): void { super.connectedCallback(); if (!this.appearance) { this.appearance = ButtonAppearance.Outline; } - - const content = this.control.querySelector('.content')!; - content.id = this.contentId; - this.control.setAttribute('aria-labelledby', this.contentId); } } const nimbleToggleButton = ToggleButton.compose({ baseName: 'toggle-button', - template: html`
- - - - - - -
`, - styles: [styles] + template, + styles }); DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton()); diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index e0c99fe6c8..21d0f0c4cf 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -2,7 +2,6 @@ import { css } from '@microsoft/fast-element'; import { focusVisible } from '../utilities/style/focus'; import { - borderColorHover, fillColorSelected } from '../theme-provider/design-tokens'; import { buttonStyles } from '../patterns/button/styles'; @@ -10,26 +9,25 @@ import { buttonStyles } from '../patterns/button/styles'; export const styles = css` ${buttonStyles} - :host { - user-select: none; + .control[aria-pressed='true'] { + background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; } - .control[aria-pressed='true'], - .control[disabled][aria-pressed='true'] { + .control[aria-pressed='true']:hover { background-color: ${fillColorSelected}; - border-color: ${fillColorSelected}; } - .control[aria-pressed='true']:hover:not([disabled]) { + .control[aria-pressed='true']${focusVisible} { background-color: ${fillColorSelected}; - border-color: ${borderColorHover}; } - .control${focusVisible}[aria-pressed='true'] { + .control[aria-pressed='true'][disabled] { background-color: ${fillColorSelected}; + border-color: ${fillColorSelected}; } - .control:active[aria-pressed='true'] { + .control[aria-pressed='true'][disabled]:hover { background-color: ${fillColorSelected}; border-color: ${fillColorSelected}; } diff --git a/packages/nimble-components/src/toggle-button/template.ts b/packages/nimble-components/src/toggle-button/template.ts new file mode 100644 index 0000000000..41632f3ef9 --- /dev/null +++ b/packages/nimble-components/src/toggle-button/template.ts @@ -0,0 +1,26 @@ +import { html, ref } from '@microsoft/fast-element'; +import type { ToggleButton } from '.'; + +export const template = html` +
+ + + + + + +
` +; \ No newline at end of file diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts index 5caa5abc8e..df9c1fee60 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts @@ -1,7 +1,7 @@ import type { Meta, Story } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { html, ViewTemplate, when } from '@microsoft/fast-element'; -import { ButtonAppearance } from '../../patterns/button/appearance'; +import { ButtonAppearance } from '../types'; import { disabledStates, DisabledState, diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts index f9721c8a4f..7e4f73adc4 100644 --- a/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts +++ b/packages/nimble-components/src/toggle-button/tests/toggle-button.stories.ts @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/html'; import { withXD } from 'storybook-addon-xd-designs'; import { createRenderer } from '../../utilities/tests/storybook'; import '..'; -import { ButtonAppearance } from '../../patterns/button/appearance'; +import { ButtonAppearance } from '../types'; interface ToggleButtonArgs { label: string; @@ -77,7 +77,6 @@ export const outlineButton: StoryObj = { appearance: ButtonAppearance.Outline } }; - export const ghostButton: StoryObj = { args: { label: 'Ghost Toggle Button', appearance: ButtonAppearance.Ghost } }; diff --git a/packages/nimble-components/src/toggle-button/types.ts b/packages/nimble-components/src/toggle-button/types.ts new file mode 100644 index 0000000000..6c10f9efd3 --- /dev/null +++ b/packages/nimble-components/src/toggle-button/types.ts @@ -0,0 +1,9 @@ +/** + * Types of toggle button. + * @public + */ +import type { ButtonAppearanceAttribute } from '../patterns/button/types'; +import { ButtonAppearance } from '../patterns/button/types'; + +export type { ButtonAppearanceAttribute }; +export { ButtonAppearance }; diff --git a/packages/nimble-components/src/utilities/style/appearance.ts b/packages/nimble-components/src/utilities/style/appearance.ts index 2b17efea04..56bf7be523 100644 --- a/packages/nimble-components/src/utilities/style/appearance.ts +++ b/packages/nimble-components/src/utilities/style/appearance.ts @@ -1,5 +1,6 @@ import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation'; import type { Behavior, ElementStyles } from '@microsoft/fast-element'; +import type { ButtonAppearance } from '../../patterns/button/types'; /** * Behavior that will conditionally apply a stylesheet based on the element's @@ -11,7 +12,7 @@ import type { Behavior, ElementStyles } from '@microsoft/fast-element'; * @public */ export function appearanceBehavior( - value: string, + value: ButtonAppearance, styles: ElementStyles ): Behavior { return new PropertyStyleSheetBehavior('appearance', value, styles); From 0cd3953f440c560b1bfc3f58e40d9ff9007e3b71 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 12:29:13 -0600 Subject: [PATCH 16/22] lint --- packages/nimble-components/src/toggle-button/index.ts | 2 +- packages/nimble-components/src/toggle-button/styles.ts | 4 +--- packages/nimble-components/src/toggle-button/template.ts | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/nimble-components/src/toggle-button/index.ts b/packages/nimble-components/src/toggle-button/index.ts index a334be3100..584f878f94 100644 --- a/packages/nimble-components/src/toggle-button/index.ts +++ b/packages/nimble-components/src/toggle-button/index.ts @@ -1,4 +1,4 @@ -import { attr, html, ref } from '@microsoft/fast-element'; +import { attr } from '@microsoft/fast-element'; import { DesignSystem, Switch as FoundationSwitch, diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index 21d0f0c4cf..0a5618ac2b 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -1,9 +1,7 @@ import { css } from '@microsoft/fast-element'; import { focusVisible } from '../utilities/style/focus'; -import { - fillColorSelected -} from '../theme-provider/design-tokens'; +import { fillColorSelected } from '../theme-provider/design-tokens'; import { buttonStyles } from '../patterns/button/styles'; export const styles = css` diff --git a/packages/nimble-components/src/toggle-button/template.ts b/packages/nimble-components/src/toggle-button/template.ts index 41632f3ef9..91e891acde 100644 --- a/packages/nimble-components/src/toggle-button/template.ts +++ b/packages/nimble-components/src/toggle-button/template.ts @@ -22,5 +22,5 @@ export const template = html` -
` -; \ No newline at end of file + +`; From bfa8fba64f43e46c8216de08db24be975a5de320 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 12:37:08 -0600 Subject: [PATCH 17/22] minor cleanup --- packages/nimble-components/src/button/index.ts | 2 +- packages/nimble-components/src/button/types.ts | 2 +- packages/nimble-components/src/toggle-button/types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nimble-components/src/button/index.ts b/packages/nimble-components/src/button/index.ts index ea12bd65af..3825bc45bf 100644 --- a/packages/nimble-components/src/button/index.ts +++ b/packages/nimble-components/src/button/index.ts @@ -6,7 +6,7 @@ import { DesignSystem } from '@microsoft/fast-foundation'; import { buttonStyles } from '../patterns/button/styles'; -import { ButtonAppearance } from '../patterns/button/types'; +import { ButtonAppearance } from './types'; export type { Button }; diff --git a/packages/nimble-components/src/button/types.ts b/packages/nimble-components/src/button/types.ts index a2795bad81..09a0c79101 100644 --- a/packages/nimble-components/src/button/types.ts +++ b/packages/nimble-components/src/button/types.ts @@ -1,5 +1,5 @@ /** - * Types of button. + * Types of button appearance. * @public */ import type { Button } from '@microsoft/fast-foundation'; diff --git a/packages/nimble-components/src/toggle-button/types.ts b/packages/nimble-components/src/toggle-button/types.ts index 6c10f9efd3..c0fad9c09b 100644 --- a/packages/nimble-components/src/toggle-button/types.ts +++ b/packages/nimble-components/src/toggle-button/types.ts @@ -1,5 +1,5 @@ /** - * Types of toggle button. + * Types of toggle button appearance. * @public */ import type { ButtonAppearanceAttribute } from '../patterns/button/types'; From aac0fed8be8116705581151736a4c07e0553acdb Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 14:45:59 -0600 Subject: [PATCH 18/22] delete change file for nimble-angular --- ...imble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json diff --git a/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json b/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json deleted file mode 100644 index ba61b2bf0d..0000000000 --- a/change/@ni-nimble-angular-048e19a3-30bb-4a3a-a989-5b334f32c6f8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "Update import paths for button appearance", - "packageName": "@ni/nimble-angular", - "email": "20542556+mollykreis@users.noreply.github.com", - "dependentChangeType": "patch" -} From b75ab75f566af0e042b00d18b8fd778bd5265051 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 16:05:56 -0600 Subject: [PATCH 19/22] Update packages/nimble-components/src/toggle-button/types.ts Co-authored-by: Milan Raj --- packages/nimble-components/src/toggle-button/types.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/nimble-components/src/toggle-button/types.ts b/packages/nimble-components/src/toggle-button/types.ts index c0fad9c09b..dfe76edea7 100644 --- a/packages/nimble-components/src/toggle-button/types.ts +++ b/packages/nimble-components/src/toggle-button/types.ts @@ -2,8 +2,5 @@ * Types of toggle button appearance. * @public */ -import type { ButtonAppearanceAttribute } from '../patterns/button/types'; -import { ButtonAppearance } from '../patterns/button/types'; - -export type { ButtonAppearanceAttribute }; -export { ButtonAppearance }; +export type { ButtonAppearanceAttribute } from '../patterns/button/types'; +export { ButtonAppearance } from '../patterns/button/types'; From 403491d6c6b03964fdfcb71c7a78a5e4c56c5c1c Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 16:06:04 -0600 Subject: [PATCH 20/22] Update packages/nimble-components/src/patterns/README.md Co-authored-by: Milan Raj --- packages/nimble-components/src/patterns/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/nimble-components/src/patterns/README.md b/packages/nimble-components/src/patterns/README.md index c62daad565..3994a44800 100644 --- a/packages/nimble-components/src/patterns/README.md +++ b/packages/nimble-components/src/patterns/README.md @@ -1 +1,5 @@ +# Patterns + +## Overview + The `patterns` directory contains patterns, such as styles and types, that are shared between multiple components. Place each pattern in its own sub-directory. From e052c954a3e28ec002dd2a5b1c018be3b2bd2576 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 16:06:35 -0600 Subject: [PATCH 21/22] rename button styles export --- packages/nimble-components/src/button/index.ts | 4 ++-- packages/nimble-components/src/patterns/button/styles.ts | 2 +- packages/nimble-components/src/toggle-button/styles.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/nimble-components/src/button/index.ts b/packages/nimble-components/src/button/index.ts index 3825bc45bf..4311a6037d 100644 --- a/packages/nimble-components/src/button/index.ts +++ b/packages/nimble-components/src/button/index.ts @@ -5,7 +5,7 @@ import { buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation'; -import { buttonStyles } from '../patterns/button/styles'; +import { styles } from '../patterns/button/styles'; import { ButtonAppearance } from './types'; export type { Button }; @@ -70,7 +70,7 @@ const nimbleButton = Button.compose({ baseClass: FoundationButton, // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047 template, - styles: buttonStyles, + styles, shadowOptions: { delegatesFocus: true } diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts index dcc96ded00..16fa30876f 100644 --- a/packages/nimble-components/src/patterns/button/styles.ts +++ b/packages/nimble-components/src/patterns/button/styles.ts @@ -19,7 +19,7 @@ import { import { appearanceBehavior } from '../../utilities/style/appearance'; import { ButtonAppearance } from './types'; -export const buttonStyles = css` +export const styles = css` ${display('inline-flex')} :host { diff --git a/packages/nimble-components/src/toggle-button/styles.ts b/packages/nimble-components/src/toggle-button/styles.ts index 0a5618ac2b..dea5cb3fb3 100644 --- a/packages/nimble-components/src/toggle-button/styles.ts +++ b/packages/nimble-components/src/toggle-button/styles.ts @@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element'; import { focusVisible } from '../utilities/style/focus'; import { fillColorSelected } from '../theme-provider/design-tokens'; -import { buttonStyles } from '../patterns/button/styles'; +import { styles as buttonStyles } from '../patterns/button/styles'; export const styles = css` ${buttonStyles} From 119f2e24691e61af596e26c975cc873e2d7e9932 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 8 Feb 2022 16:15:23 -0600 Subject: [PATCH 22/22] apply import/export format to button types --- packages/nimble-components/src/button/types.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/nimble-components/src/button/types.ts b/packages/nimble-components/src/button/types.ts index 09a0c79101..a09339d8e3 100644 --- a/packages/nimble-components/src/button/types.ts +++ b/packages/nimble-components/src/button/types.ts @@ -3,9 +3,8 @@ * @public */ import type { Button } from '@microsoft/fast-foundation'; -import type { ButtonAppearanceAttribute } from '../patterns/button/types'; -import { ButtonAppearance } from '../patterns/button/types'; + +export type { ButtonAppearanceAttribute } from '../patterns/button/types'; +export { ButtonAppearance } from '../patterns/button/types'; export type ButtonType = Button['type']; -export type { ButtonAppearanceAttribute }; -export { ButtonAppearance };