Split VS Code Badge Into VS Code Tag & VS Code Badge (#149)

Description of changes

Split the VS Code Badge component into:

- VS Code Tag
- VS Code Badge

docs/api-report.md

@@ -17,8 +17,6 @@ import { DataGridCell } from '@microsoft/fast-foundation';
 import { DataGridRow } from '@microsoft/fast-foundation';
 import { Divider } from '@microsoft/fast-foundation';
 import { ListboxOption } from '@microsoft/fast-foundation';
-import { Menu } from '@microsoft/fast-foundation';
-import { MenuItem } from '@microsoft/fast-foundation';
 import { NumberField } from '@microsoft/fast-foundation';
 import { Radio } from '@microsoft/fast-foundation';
 import { RadioGroup } from '@microsoft/fast-foundation';
@@ -38,7 +36,7 @@ export type ButtonAppearance = 'primary' | 'secondary' | 'icon';
 // @public
 export class VSCodeBadge extends Badge {
     appearance: BadgeAppearance;
-    // @internal (undocumented)
+    // @internal
     connectedCallback(): void;
 }
 
@@ -87,16 +85,6 @@ export class VSCodeDropdown extends Select {
 
 // @public
 export class VSCodeLink extends Anchor {
-    // @internal
-    defaultSlottedContentChanged(): void;
-}
-
-// @public
-export class VSCodeMenu extends Menu {
-}
-
-// @public
-export class VSCodeMenuItem extends MenuItem {
 }
 
 // @public
@@ -141,6 +129,12 @@ export class VSCodeRadio extends Radio {
 export class VSCodeRadioGroup extends RadioGroup {
 }
 
+// @public
+export class VSCodeTag extends Badge {
+    // @internal
+    connectedCallback(): void;
+}
+
 // @public
 export class VSCodeTextArea extends TextArea {
 }

docs/components.md

@@ -21,5 +21,6 @@ Here you can find a list of all the components currently available in this toolk
 | `progress-ring`   | [Progress Ring Documentation](../src/progress-ring/README.md)     |
 | `radio`           | [Radio Documentation](../src/radio/README.md)                     |
 | `radio-group`     | [Radio Group Documentation](../src/radio-group/README.md)         |
+| `tag`             | [Tag Documentation](../src/tag/README.md)                         |
 | `text-area`       | [Text Area Documentation](../src/text-area/README.md)             |
 | `text-field`      | [Text Field Documentation](../src/text-field/README.md)           |

src/badge/README.md

@@ -4,19 +4,22 @@ The `vscode-badge` component is used to highlight an item, attract attention, an
 
 ## Attributes
 
-| Attribute    | Type    | Description                                                                    |
-| ------------ | ------- | ------------------------------------------------------------------------------ |
-| `appearance` | string  | Determines the visual appearance of the badge. Options: `primary`, `secondary` |
-| `circular`   | boolean | Indicates the element should be circular.                                      |
+| Attribute    | Type   | Description                                                                    |
+| ------------ | ------ | ------------------------------------------------------------------------------ |
+| `appearance` | string | Determines the visual appearance of the badge. Options: `primary`, `secondary` |
 
 ## Usage
 
+A `vscode-badge` should only contain numbers to follow the conventions of the VS Code design language.
+
+If a component that labels an item with a string is desired, see the `vscode-tag` component.
+
 ### Basic Usage
 
 [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--default)
 
 ```html
-<vscode-badge>BADGE TEXT</vscode-badge>
+<vscode-badge>1</vscode-badge>
 ```
 
 ### Appearance Attribute
@@ -26,14 +29,6 @@ There are a number of visual appearances that the `vscode-badge` can have. The d
 [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--secondary)
 
 ```html
-<vscode-badge appearance="primary">BADGE TEXT</vscode-badge>
-<vscode-badge appearance="secondary">BADGE TEXT</vscode-badge>
-```
-
-### Circular Attribute
-
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-badge--circular)
-
-```html
-<vscode-badge circular="true">1</vscode-badge>
+<vscode-badge appearance="primary">1</vscode-badge>
+<vscode-badge appearance="secondary">1</vscode-badge>
 ```

src/badge/badge.stories.ts

@@ -6,14 +6,13 @@ import {BadgeArgs, createBadge} from './fixtures/createBadge';
 export default {
 	title: 'Library/Badge',
 	argTypes: {
-		label: {control: 'text'},
+		label: {control: 'number'},
 		appearance: {
 			control: {
 				type: 'select',
 				options: ['Primary', 'Secondary'],
 			},
 		},
-		isCircular: {control: 'boolean'},
 	},
 	parameters: {
 		actions: {
@@ -28,14 +27,13 @@ const Template = ({...args}: BadgeArgs) => {
 
 export const Default: any = Template.bind({});
 Default.args = {
-	label: 'BADGE TEXT',
+	label: '1',
 	appearance: 'Primary',
-	isCircular: false,
 };
 Default.parameters = {
 	docs: {
 		source: {
-			code: `<vscode-badge appearance="primary">BADGE TEXT</vscode-badge>`,
+			code: `<vscode-badge>1</vscode-badge>`,
 		},
 	},
 };
@@ -48,21 +46,7 @@ Secondary.args = {
 Secondary.parameters = {
 	docs: {
 		source: {
-			code: `<vscode-badge appearance="secondary">BADGE TEXT</vscode-badge>`,
-		},
-	},
-};
-
-export const WithCircular: any = Template.bind({});
-WithCircular.args = {
-	...Default.args,
-	label: '1',
-	isCircular: true,
-};
-WithCircular.parameters = {
-	docs: {
-		source: {
-			code: `<vscode-badge circular>1</vscode-badge>`,
+			code: `<vscode-badge appearance="secondary">1</vscode-badge>`,
 		},
 	},
 };

src/badge/badge.styles.ts

@@ -4,7 +4,6 @@
 import {css} from '@microsoft/fast-element';
 import {display} from '@microsoft/fast-foundation';
 import {
-	badgeCornerRadius,
 	badgePrimaryBackground,
 	badgePrimaryForeground,
 	badgeSecondaryBackground,
@@ -15,42 +14,38 @@ import {
 	typeRampMinus1LineHeight,
 } from '../design-tokens';
 
-export const BaseBadgeStyles = css`
+const BaseBadgeStyles = css`
 	${display('inline-block')} :host {
+		box-sizing: border-box;
 		font-family: ${fontFamily};
 		font-size: ${typeRampMinus1FontSize};
 		line-height: ${typeRampMinus1LineHeight};
-		box-sizing: border-box;
 	}
 	.control {
-		border-radius: ${badgeCornerRadius};
-		padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
-		color: ${badgePrimaryForeground};
-		background-color: ${badgePrimaryBackground};
-	}
-	:host([circular]) .control {
-		border-radius: 100px;
-		padding: 0 calc(${designUnit} * 1px);
-		height: calc(${designUnit} * 4px);
-		min-width: calc(${designUnit} * 4px);
-		display: flex;
 		align-items: center;
-		justify-content: center;
+		background-color: ${badgePrimaryBackground};
+		border-radius: 100px;
 		box-sizing: border-box;
-	}
-`;
-
-export const PrimaryBadgeStyles = css`
-	:host([appearance='primary']) .control {
 		color: ${badgePrimaryForeground};
-		background: ${badgePrimaryBackground};
+		display: flex;
+		height: calc(${designUnit} * 4px);
+		justify-content: center;
+		min-width: calc(${designUnit} * 4px);
+		padding: 0 calc(${designUnit} * 1px);
 	}
 `;
 
-export const SecondaryBadgeStyles = css`
+const PrimaryBadgeStyles = css`
+	:host([appearance='primary']) .control {
+		background: ${badgePrimaryBackground};
+		color: ${badgePrimaryForeground};
+	}
+`;
+
+const SecondaryBadgeStyles = css`
 	:host([appearance='secondary']) .control {
-		color: ${badgeSecondaryForeground};
 		background: ${badgeSecondaryBackground};
+		color: ${badgeSecondaryForeground};
 	}
 `;
 

src/badge/fixtures/createBadge.ts

@@ -6,19 +6,17 @@ import {BadgeAppearance, VSCodeBadge} from '../index';
 export type BadgeArgs = {
 	label: string;
 	appearance?: BadgeAppearance;
-	isCircular: boolean;
 };
 
-export function createBadge({label, appearance, isCircular}: BadgeArgs) {
+export function createBadge({label, appearance}: BadgeArgs) {
 	const badge = new VSCodeBadge();
 
-	badge.textContent = label;
+	if (label) {
+		badge.textContent = label;
+	}
 	if (appearance) {
 		badge.setAttribute('appearance', appearance.toLowerCase());
 	}
-	if (isCircular) {
-		badge.setAttribute('circular', '');
-	}
 
 	return badge;
 }

src/badge/index.ts

@@ -1,7 +1,7 @@
-import {attr, customElement} from '@microsoft/fast-element';
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import {attr, customElement} from '@microsoft/fast-element';
 import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation';
 import {BadgeStyles as styles} from './badge.styles';
 
@@ -38,6 +38,9 @@ export class VSCodeBadge extends Badge {
 	@attr public appearance: BadgeAppearance;
 
 	/**
+	 * Component lifecycle method that runs when the element is inserted
+	 * into the DOM.
+	 *
 	 * @internal
 	 */
 	public connectedCallback() {
@@ -45,5 +48,12 @@ export class VSCodeBadge extends Badge {
 		if (!this.appearance) {
 			this.appearance = 'primary';
 		}
+
+		// This will override any usage of the circular attribute
+		// provided by the FAST Foundation Badge component so that
+		// VSCodeBadges are always circular
+		if (!this.circular) {
+			this.circular = true;
+		}
 	}
 }

src/design-tokens.ts

@@ -87,9 +87,6 @@ export const badgeSecondaryForeground = create<string>(
 export const badgeSecondaryBackground = create<string>(
 	'badge-secondary-background'
 ).withDefault('#4d4d4d');
-export const badgeCornerRadius = create<string>(
-	'badge-corner-radius'
-).withDefault('2px');
 
 /**
  * Button design tokens.
@@ -243,3 +240,10 @@ export const panelTabActiveForegroundColor = create<string>(
 export const panelTabActiveBorderColor = create<string>(
 	'panel-tab-active-border-color'
 ).withDefault('#e7e7e7');
+
+/**
+ * Tag design tokens.
+ */
+export const tagCornerRadius = create<string>('tag-corner-radius').withDefault(
+	'2px'
+);

src/index.ts

@@ -10,6 +10,7 @@ export * from './checkbox/index';
 export * from './combobox/index';
 export * from './data-grid/index';
 export * from './divider/index';
+export * from './dropdown/index';
 export * from './link/index';
 export * from './number-field/index';
 export * from './option/index';
@@ -18,7 +19,7 @@ export * from './progress-bar/index';
 export * from './progress-ring/index';
 export * from './radio-group/index';
 export * from './radio/index';
-export * from './dropdown/index';
+export * from './tag/index';
 export * from './text-area/index';
 export * from './text-field/index';
 

src/tag/README.md

@@ -0,0 +1,21 @@
+# VS Code Tag
+
+The `vscode-tag` component is used to label an item, attract attention, and/or flag status.
+
+## Attributes
+
+None
+
+## Usage
+
+A `vscode-tag` should only contain text and will be automatically be converted uppercase to follow the conventions of the VS Code design language.
+
+If a component that highlights an item with a number is desired, see the `vscode-badge` component.
+
+### Basic Usage
+
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-toolkit/?path=/story/library-tag--default)
+
+```html
+<vscode-tag>Tag Text</vscode-tag>
+```

src/tag/fixtures/createTag.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {VSCodeTag} from '../index';
+
+export type TagArgs = {
+	label?: string;
+};
+
+export function createTag({label}: TagArgs) {
+	const tag = new VSCodeTag();
+
+	if (label) {
+		tag.textContent = label;
+	}
+
+	return tag;
+}

src/tag/index.ts

@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {customElement} from '@microsoft/fast-element';
+import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation';
+import {TagStyles as styles} from './tag.styles';
+
+/**
+ * The VS Code Tag element. Extends
+ * {@link https://www.fast.design/docs/api/fast-foundation.badge/ | Badge} and
+ * {@link https://www.fast.design/docs/api/fast-foundation.badgetemplate/ | BadgeTemplate}.
+ *
+ * @remarks
+ * HTML Element: `<vscode-tag>`
+ *
+ * @public
+ */
+@customElement({
+	name: 'vscode-tag',
+	template,
+	styles,
+})
+export class VSCodeTag extends Badge {
+	/**
+	 * Component lifecycle method that runs when the element is inserted
+	 * into the DOM.
+	 *
+	 * @internal
+	 */
+	public connectedCallback() {
+		super.connectedCallback();
+
+		// This will override any usage of the circular attribute
+		// provided by the FAST Foundation Badge component so that
+		// VSCodeTags are never circular
+		if (this.circular) {
+			this.circular = false;
+		}
+	}
+}

src/tag/tag.stories.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {createTag, TagArgs} from './fixtures/createTag';
+
+export default {
+	title: 'Library/Tag',
+	argTypes: {
+		label: {control: 'text'},
+	},
+	parameters: {
+		actions: {
+			disabled: true,
+		},
+	},
+};
+
+const Template = ({...args}: TagArgs) => {
+	return createTag({...args});
+};
+
+export const Default: any = Template.bind({});
+Default.args = {
+	label: 'Tag Text',
+};
+Default.parameters = {
+	docs: {
+		source: {
+			code: `<vscode-tag>Tag Text</vscode-tag>`,
+		},
+	},
+};

src/tag/tag.styles.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {css} from '@microsoft/fast-element';
+import {display} from '@microsoft/fast-foundation';
+import {
+	badgeSecondaryBackground,
+	badgeSecondaryForeground,
+	designUnit,
+	fontFamily,
+	tagCornerRadius,
+	typeRampMinus1FontSize,
+	typeRampMinus1LineHeight,
+} from '../design-tokens';
+
+export const TagStyles = css`
+	${display('inline-block')} :host {
+		box-sizing: border-box;
+		font-family: ${fontFamily};
+		font-size: ${typeRampMinus1FontSize};
+		line-height: ${typeRampMinus1LineHeight};
+	}
+	.control {
+		background-color: ${badgeSecondaryBackground};
+		border-radius: ${tagCornerRadius};
+		color: ${badgeSecondaryForeground};
+		padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
+		text-transform: uppercase;
+	}
+`;