Toggle button

README.md

@@ -78,7 +78,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: |

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 { 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 } 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 };

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';

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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 '../patterns/button/appearance';
 
 export type { Button };
 

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 '../patterns/button/styles';
 
 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.5);
-                }
-
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control${focusVisible} {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: transparent;
-                }
-
-                .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: transparent;
-                }
-
-                .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: transparent;
-                }
-
-                .control[disabled] {
-                    background-color: rgba(${borderColorRgbPartial}, 0.1);
-                    border-color: rgba(${borderColorRgbPartial}, 0.1);
-                }
-            `
-        )
-    );
+    ${buttonStyles}
+`;

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 '../../patterns/button/appearance';
 import {
     disabledStates,
     DisabledState,

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 '../../patterns/button/appearance';
 import '..';
 import '../../icons/access-control';
 import { createRenderer } from '../../utilities/tests/storybook';

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 enum ButtonAppearance {
-    Outline = 'outline',
-    Ghost = 'ghost',
-    Block = 'block'
-}
-export type ButtonAppearanceAttribute = `${ButtonAppearance}`;
-
 export type ButtonType = Button['type'];

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.

packages/nimble-components/src/patterns/button/appearance.ts

@@ -0,0 +1,10 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+export enum ButtonAppearance {
+    Outline = 'outline',
+    Ghost = 'ghost',
+    Block = 'block'
+}
+export type ButtonAppearanceAttribute = `${ButtonAppearance}`;