From e074e1082747fffa78d8fa0c39256840f489e0cf Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:40:52 -0700 Subject: [PATCH 1/9] Fix Codicon import path in createCodiconIcon util --- src/utilities/storybook/createCodiconIcon.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utilities/storybook/createCodiconIcon.ts b/src/utilities/storybook/createCodiconIcon.ts index 596778e0..7dc1ca69 100644 --- a/src/utilities/storybook/createCodiconIcon.ts +++ b/src/utilities/storybook/createCodiconIcon.ts @@ -1,8 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import '../../../node_modules/vscode-codicons/dist/codicon.css'; -import {default as iconMapping} from '../../../node_modules/vscode-codicons/src/template/mapping.json'; +import '../../../node_modules/@vscode/codicons/dist/codicon.css'; +import {default as iconMapping} from '../../../node_modules/@vscode/codicons/src/template/mapping.json'; type createCodiconParams = { iconName?: string; From 580aada1801f8fad7a9783c8ab06d3b62fb4fb4c Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:41:46 -0700 Subject: [PATCH 2/9] Remove Combobox component --- src/combobox/README.md | 75 ----------- src/combobox/combobox.stories.ts | 158 ------------------------ src/combobox/combobox.styles.ts | 38 ------ src/combobox/fixtures/createCombobox.ts | 63 ---------- src/combobox/index.ts | 31 ----- 5 files changed, 365 deletions(-) delete mode 100644 src/combobox/README.md delete mode 100644 src/combobox/combobox.stories.ts delete mode 100644 src/combobox/combobox.styles.ts delete mode 100644 src/combobox/fixtures/createCombobox.ts delete mode 100644 src/combobox/index.ts diff --git a/src/combobox/README.md b/src/combobox/README.md deleted file mode 100644 index 49a8cfc2..00000000 --- a/src/combobox/README.md +++ /dev/null @@ -1,75 +0,0 @@ -# VS Code Combo Box - -The `vscode-combo-box` is a web component implementation of an [HTML Text Field Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/text). - -## Attributes - -| Attribute | Type | Description | -| -------------- | ------- | ----------------------------------------------------------------------------------------- | -| `autocomplete` | string | Handles autocomplete features for the control. Options: `none`, `inline`, `list`, `both`. | -| `disabled` | boolean | Disables the combobox and child options. | -| `open` | boolean | If true, toggles the combobox to the open position. | -| `position` | string | The placement for the listbox when the combobox is open. Options: `above`, `below`. | -| `value` | string | The string to use as the value of the combobox. | - -## Usage - -The `vscode-combobox` component must be used with the `vscode-option` component. - -### Basic Usage - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-combobox--default) - -```html - - Option Label #1 - Option Label #2 - Option Label #3 - -``` - -### Disabled Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-combobox--with-disabled) - -```html - - Option Label #1 - Option Label #2 - Option Label #3 - -``` - -### Open Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-combobox--with-open) - -```html - - Option Label #1 - Option Label #2 - Option Label #3 - -``` - -### Position Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-combobox--with-position-above) - -```html - - Option Label #1 - Option Label #2 - Option Label #3 - -``` - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-combobox--with-position-below) - -```html - - Option Label #1 - Option Label #2 - Option Label #3 - -``` diff --git a/src/combobox/combobox.stories.ts b/src/combobox/combobox.stories.ts deleted file mode 100644 index 3d8e9c99..00000000 --- a/src/combobox/combobox.stories.ts +++ /dev/null @@ -1,158 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {action} from '@storybook/addon-actions'; -import {ComboboxArgs, createCombobox} from './fixtures/createCombobox'; - -export default { - title: 'Library/Combobox', - argTypes: { - placeholder: {control: 'text'}, - value: {control: 'text'}, - autocomplete: { - control: { - type: 'select', - options: ['inline', 'list', 'both'], - }, - }, - position: { - control: { - type: 'select', - options: ['above', 'below'], - }, - }, - isDisabled: {control: 'boolean'}, - isRequired: {control: 'boolean'}, - numberOfChildren: {control: 'number'}, - onChange: { - action: 'changed', - table: { - disable: true, - }, - }, - }, -}; - -const Template = ({...args}: ComboboxArgs) => { - return createCombobox({...args}); -}; - -export const Default: any = Template.bind({}); -Default.args = { - placeholder: '', - position: 'below', - isDisabled: false, - numberOfChildren: 3, - onChange: action('input-onchange'), -}; -Default.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithPlaceholder: any = Template.bind({}); -WithPlaceholder.args = { - ...Default.args, - placeholder: 'Enter an option', -}; -WithPlaceholder.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithDisabled: any = Template.bind({}); -WithDisabled.args = { - ...Default.args, - value: 'This is disabled', - isDisabled: true, -}; -WithDisabled.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithOpen: any = Template.bind({}); -WithOpen.args = { - ...Default.args, - isOpen: true, -}; -WithOpen.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithPositionAbove: any = Template.bind({}); -WithPositionAbove.decorators = [ - story => { - const decorator = document.createElement('div'); - decorator.style.marginTop = '5rem'; - decorator.appendChild(story()); - return decorator; - }, -]; -WithPositionAbove.args = { - ...Default.args, - isOpen: true, - position: 'above', -}; -WithPositionAbove.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithAutocomplete: any = Template.bind({}); -WithAutocomplete.args = { - ...Default.args, - autocomplete: 'inline', - placeholder: 'Enter an option', -}; -WithAutocomplete.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n`, - }, - }, -}; - -export const WithNoOptions: any = Template.bind({}); -WithNoOptions.args = { - ...Default.args, - isOpen: true, - numberOfChildren: 0, -}; -WithNoOptions.parameters = { - docs: { - source: { - code: ``, - }, - }, -}; - -export const WithLongList: any = Template.bind({}); -WithLongList.args = { - ...Default.args, - isOpen: true, - numberOfChildren: 50, -}; -WithLongList.parameters = { - docs: { - source: { - code: `\n\tOption Label #1\n\tOption Label #2\n\tOption Label #3\n\t\n`, - }, - }, -}; diff --git a/src/combobox/combobox.styles.ts b/src/combobox/combobox.styles.ts deleted file mode 100644 index ef274aff..00000000 --- a/src/combobox/combobox.styles.ts +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {css} from '@microsoft/fast-element'; -import {disabledCursor, focusVisible} from '@microsoft/fast-foundation'; -import { - borderWidth, - typeRampBaseFontSize, - typeRampBaseLineHeight, -} from '../design-tokens'; -import {DropdownStyles} from '../dropdown/dropdown.styles'; - -export const ComboboxStyles = css` - ${DropdownStyles} - - :host([disabled]) *, - :host([disabled]) .selected-value { - cursor: ${disabledCursor}; - user-select: none; - } - .selected-value { - -webkit-appearance: none; - background: transparent; - border: none; - color: inherit; - font-size: ${typeRampBaseFontSize}; - line-height: ${typeRampBaseLineHeight}; - height: calc(100% - (2 * (${borderWidth} * 1px))); - margin: auto 0; - width: 100%; - } - .selected-value:hover, - .selected-value:${focusVisible}, - .selected-value:disabled, - .selected-value:active { - outline: none; - } -`; diff --git a/src/combobox/fixtures/createCombobox.ts b/src/combobox/fixtures/createCombobox.ts deleted file mode 100644 index 3b81a436..00000000 --- a/src/combobox/fixtures/createCombobox.ts +++ /dev/null @@ -1,63 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {VSCodeCombobox} from '../index'; -import {VSCodeOption} from '../../option'; - -export type ComboboxArgs = { - placeholder?: string; - value?: string; - autocomplete?: string; - isDisabled?: boolean; - isOpen?: boolean; - position?: string; - numberOfChildren: number; - onChange: any; -}; - -export function createCombobox({ - placeholder, - value, - autocomplete, - isDisabled, - isOpen, - position, - numberOfChildren, - onChange, -}: ComboboxArgs) { - const combobox = createComboboxWithNChildren(numberOfChildren); - - if (placeholder) { - combobox.setAttribute('placeholder', placeholder); - } - if (value) { - combobox.value = value; - } - if (autocomplete) { - combobox.setAttribute('autocomplete', autocomplete); - } - if (isDisabled) { - combobox.setAttribute('disabled', ''); - } - if (isOpen) { - combobox.setAttribute('open', ''); - } - if (position) { - combobox.setAttribute('position', position); - } - combobox.addEventListener('change', onChange); - - return combobox; -} - -function createComboboxWithNChildren(numberOfChildren: number) { - const combobox = new VSCodeCombobox(); - - for (let i = 0; i < numberOfChildren; i++) { - const option = new VSCodeOption(); - option.textContent = `Option Label #${i + 1}`; - combobox.appendChild(option); - } - - return combobox; -} diff --git a/src/combobox/index.ts b/src/combobox/index.ts deleted file mode 100644 index 778577c8..00000000 --- a/src/combobox/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {customElement} from '@microsoft/fast-element'; -import { - Combobox, - ComboboxTemplate as template, -} from '@microsoft/fast-foundation'; -import {ComboboxStyles as styles} from './combobox.styles'; - -/** - * The VS Code Combobox element. Extends - * {@link https://www.fast.design/docs/api/fast-foundation.Combobox/ | Combobox} and - * {@link https://www.fast.design/docs/api/fast-foundation.Comboboxtemplate/ | ComboboxTemplate}. - * - * @remarks - * HTML Element: `` - * - * Shadow Option: {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} - * - * @public - */ -@customElement({ - name: 'vscode-combobox', - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class VSCodeCombobox extends Combobox {} From 11ba818001fd48ab4fdb4c0dc363e04ed67ed58b Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:42:14 -0700 Subject: [PATCH 3/9] Remove Progress Bar component --- src/progress-bar/README.md | 51 ---------- .../fixtures/createProgressBar.ts | 26 ----- src/progress-bar/index.ts | 43 --------- src/progress-bar/progress-bar.stories.ts | 46 --------- src/progress-bar/progress-bar.styles.ts | 94 ------------------- 5 files changed, 260 deletions(-) delete mode 100644 src/progress-bar/README.md delete mode 100644 src/progress-bar/fixtures/createProgressBar.ts delete mode 100644 src/progress-bar/index.ts delete mode 100644 src/progress-bar/progress-bar.stories.ts delete mode 100644 src/progress-bar/progress-bar.styles.ts diff --git a/src/progress-bar/README.md b/src/progress-bar/README.md deleted file mode 100644 index 188b148e..00000000 --- a/src/progress-bar/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# VS Code Progress Bar - -The `vscode-progress-bar` component is used to indicate the length of time a process will take. - -This may either be a determinate state in which the progress is a percentage of the total time needed to complete the task or as an indeterminate state where the wait time is unspecified. - -The `vscode-progress-bar` renders a linear visual appearance for progress state. If a circular visual appearance is needed, use the `vscode-progress-ring`. - -## Attributes - -| Attribute | Type | Description | -| --------- | ------- | -------------------------------------- | -| `value` | string | The current value of the progress bar. | -| `min` | boolean | The minimum progress bar value. | -| `max` | boolean | The maximum progress bar value. | - -## Usage - -### Basic Usage - -The basic usage will display a looping animation to indicate an indeterminate state where the wait time is unspecified. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-progress-bar--default) - -```html - -``` - -### Value Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-progress-bar--with-value) - -```html - -``` - -### Min Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-progress-bar--with-value) - -```html - -``` - -### Max Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-progress-bar--with-value) - -```html - -``` diff --git a/src/progress-bar/fixtures/createProgressBar.ts b/src/progress-bar/fixtures/createProgressBar.ts deleted file mode 100644 index 3a49bafb..00000000 --- a/src/progress-bar/fixtures/createProgressBar.ts +++ /dev/null @@ -1,26 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {VSCodeProgressBar} from '../index'; - -export type ProgressBarArgs = { - value: number; - min: number; - max: number; -}; - -export function createProgressBar({value, min, max}: ProgressBarArgs) { - const progressBar = new VSCodeProgressBar(); - - if (value) { - progressBar.setAttribute('value', value.toString()); - } - if (min) { - progressBar.setAttribute('min', min.toString()); - } - if (max) { - progressBar.setAttribute('max', max.toString()); - } - - return progressBar; -} diff --git a/src/progress-bar/index.ts b/src/progress-bar/index.ts deleted file mode 100644 index fba9ab18..00000000 --- a/src/progress-bar/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {customElement} from '@microsoft/fast-element'; -import { - BaseProgress, - ProgressTemplate as template, -} from '@microsoft/fast-foundation'; -import {ProgressBarStyles as styles} from './progress-bar.styles'; - -/** - * The VS Code Progress Bar element. Extends - * {@link https://www.fast.design/docs/api/fast-foundation.baseprogress/ | BaseProgress} and - * {@link https://www.fast.design/docs/api/fast-foundation.progresstemplate/ | ProgressTemplate}. - * - * @remarks - * HTML Element: `` - * - * @public - */ -@customElement({ - name: 'vscode-progress-bar', - template, - styles, -}) -export class VSCodeProgressBar extends BaseProgress { - /** - * 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 paused attribute - // provided by the FAST Foundation BaseProgress component - // so that VSCodeProgressBars can never be paused - if (this.paused) { - this.paused = false; - } - } -} diff --git a/src/progress-bar/progress-bar.stories.ts b/src/progress-bar/progress-bar.stories.ts deleted file mode 100644 index da01fdcf..00000000 --- a/src/progress-bar/progress-bar.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {createProgressBar, ProgressBarArgs} from './fixtures/createProgressBar'; - -export default { - title: 'Library/Progress Bar', - argTypes: { - value: {control: 'number'}, - min: {control: 'number'}, - max: {control: 'number'}, - }, - parameters: { - actions: { - disabled: true, - }, - }, -}; - -const Template = ({...args}: ProgressBarArgs) => { - return createProgressBar({...args}); -}; - -export const Default: any = Template.bind({}); -Default.args = {}; -Default.parameters = { - docs: { - source: { - code: ``, - }, - }, -}; - -export const WithValue: any = Template.bind({}); -WithValue.args = { - value: 75, - min: 0, - max: 100, -}; -WithValue.parameters = { - docs: { - source: { - code: ``, - }, - }, -}; diff --git a/src/progress-bar/progress-bar.styles.ts b/src/progress-bar/progress-bar.styles.ts deleted file mode 100644 index d78d39b2..00000000 --- a/src/progress-bar/progress-bar.styles.ts +++ /dev/null @@ -1,94 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {css} from '@microsoft/fast-element'; -import {display} from '@microsoft/fast-foundation'; -import {cornerRadius, designUnit, progressBackground} from '../design-tokens'; - -export const ProgressBarStyles = css` - ${display('flex')} :host { - align-items: center; - height: calc((${designUnit} + 1) * 1px); - margin: calc(${designUnit} * 1px) 0; - outline: none; - width: 100%; - } - .progress { - background-color: transparent; - border-radius: calc(${cornerRadius} * 1px); - width: 100%; - height: 100%; - display: flex; - align-items: center; - position: relative; - } - .determinate { - background-color: ${progressBackground}; - border-radius: calc(${cornerRadius} * 1px); - height: 100%; - transition: all 0.2s ease-in-out; - display: flex; - } - .indeterminate { - border-radius: calc(${cornerRadius} * 1px); - display: flex; - height: 100%; - position: relative; - overflow: hidden; - width: 100%; - } - .indeterminate-indicator-1 { - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - animation: indeterminate-1 2s infinite; - background-color: ${progressBackground}; - border-radius: calc(${cornerRadius} * 1px); - height: 100%; - position: absolute; - opacity: 0; - width: 40%; - } - .indeterminate-indicator-2 { - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - animation: indeterminate-2 2s infinite; - background-color: ${progressBackground}; - border-radius: calc(${cornerRadius} * 1px); - height: 100%; - position: absolute; - opacity: 0; - width: 60%; - } - @keyframes indeterminate-1 { - 0% { - opacity: 1; - transform: translateX(-100%); - } - 70% { - opacity: 1; - transform: translateX(300%); - } - 70.01% { - opacity: 0; - } - 100% { - opacity: 0; - transform: translateX(300%); - } - } - @keyframes indeterminate-2 { - 0% { - opacity: 0; - transform: translateX(-150%); - } - 29.99% { - opacity: 0; - } - 30% { - opacity: 1; - transform: translateX(-150%); - } - 100% { - transform: translateX(166.66%); - opacity: 1; - } - } -`; From b342c0f987fe37ecfb381daf47a8426e0021ac75 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:43:04 -0700 Subject: [PATCH 4/9] Remove Breadcrumb and Breadcrumb Item components --- src/breadcrumb-item/README.md | 72 ------------- .../breadcrumb-item.stories.ts | 102 ------------------ src/breadcrumb-item/breadcrumb-item.styles.ts | 86 --------------- .../fixtures/createBreadcrumbItem.ts | 61 ----------- src/breadcrumb-item/index.ts | 31 ------ src/breadcrumb/README.md | 98 ----------------- src/breadcrumb/breadcrumb.stories.ts | 79 -------------- src/breadcrumb/breadcrumb.styles.ts | 22 ---- src/breadcrumb/fixtures/createBreadcrumb.ts | 35 ------ src/breadcrumb/index.ts | 26 ----- 10 files changed, 612 deletions(-) delete mode 100644 src/breadcrumb-item/README.md delete mode 100644 src/breadcrumb-item/breadcrumb-item.stories.ts delete mode 100644 src/breadcrumb-item/breadcrumb-item.styles.ts delete mode 100644 src/breadcrumb-item/fixtures/createBreadcrumbItem.ts delete mode 100644 src/breadcrumb-item/index.ts delete mode 100644 src/breadcrumb/README.md delete mode 100644 src/breadcrumb/breadcrumb.stories.ts delete mode 100644 src/breadcrumb/breadcrumb.styles.ts delete mode 100644 src/breadcrumb/fixtures/createBreadcrumb.ts delete mode 100644 src/breadcrumb/index.ts diff --git a/src/breadcrumb-item/README.md b/src/breadcrumb-item/README.md deleted file mode 100644 index 618159dd..00000000 --- a/src/breadcrumb-item/README.md +++ /dev/null @@ -1,72 +0,0 @@ -# VS Code Breadcrumb Item - -The `vscode-breadcrumb-item` is a component meant to be used with `vscode-breadcrumb`. - -## Attributes - -| Attribute | Type | Description | -| --------- | ------ | --------------------------------- | -| href | string | The URL the hyperlink references. | - -## Usage - -### Basic Usage - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb-item--default) - -```html -Breadcrumb Item Label -``` - -### Href Attribute - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb-item--with-link) - -```html -Breadcrumb Item Label -``` - -### Custom Separator - -The default separator is a `/` but it can customized by adding an element with the attribute `slot="separator"`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb-item--with-custom-separator) - -```html - - - - Breadcrumb Item Label - - -``` - -### Start Icon - -An icon can be added to the left of Breadcrumb Item text by adding an element with the attribute `slot="start"`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb-item--with-start-icon) - -```html - - - - Breadcrumb Item Label - - -``` - -### End Icon - -An icon can be added to the right of Breadcrumb Item text by adding an element with the attribute `slot="end"`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb-item--with-end-icon) - -```html - - - - Breadcrumb Item Label - - -``` diff --git a/src/breadcrumb-item/breadcrumb-item.stories.ts b/src/breadcrumb-item/breadcrumb-item.stories.ts deleted file mode 100644 index 4610f65b..00000000 --- a/src/breadcrumb-item/breadcrumb-item.stories.ts +++ /dev/null @@ -1,102 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import { - BreadcrumbItemArgs, - createBreadcrumbItem, -} from './fixtures/createBreadcrumbItem'; - -export default { - title: 'Library/Breadcrumb Item', - argTypes: { - label: {control: 'text'}, - href: {control: 'text'}, - startIcon: {control: 'boolean'}, - separatorIcon: {control: 'boolean'}, - endIcon: {control: 'boolean'}, - isFocused: {control: 'boolean'}, - }, - parameters: { - actions: { - disabled: true, - }, - }, -}; - -const Template = ({...args}: BreadcrumbItemArgs) => { - return createBreadcrumbItem({...args}); -}; - -export const Default: any = Template.bind({}); -Default.args = { - label: 'Breadcrumb Item Label', - href: '', - startIcon: false, - separatorIcon: false, - endIcon: false, - isFocused: false, -}; -Default.parameters = { - docs: { - source: { - code: `Breadcrumb Item Label`, - }, - }, -}; - -export const WithLink: any = Template.bind({}); -WithLink.args = { - ...Default.args, - href: '#', -}; -WithLink.parameters = { - docs: { - source: { - code: `Breadcrumb Item Label`, - }, - }, -}; - -export const WithCustomSeparator: any = Template.bind({}); -WithCustomSeparator.args = { - ...Default.args, - href: '#', - separatorIcon: true, -}; -WithCustomSeparator.parameters = { - docs: { - source: { - code: `\n\n\n\tBreadcrumb Item Label\n\t\n`, - }, - }, -}; - -export const WithStartIcon: any = Template.bind({}); -WithStartIcon.args = { - ...Default.args, - href: '#', - startIcon: true, - separatorIcon: true, -}; -WithStartIcon.parameters = { - docs: { - source: { - code: `\n\n\n\tBreadcrumb Item Label\n\t\n\t\n`, - }, - }, -}; - -export const WithEndIcon: any = Template.bind({}); -WithEndIcon.args = { - ...Default.args, - href: '#', - separatorIcon: true, - endIcon: true, -}; -WithEndIcon.parameters = { - docs: { - source: { - code: `\n\n\n\tBreadcrumb Item Label\n\t\n\t\n`, - }, - }, -}; diff --git a/src/breadcrumb-item/breadcrumb-item.styles.ts b/src/breadcrumb-item/breadcrumb-item.styles.ts deleted file mode 100644 index 872bd6ed..00000000 --- a/src/breadcrumb-item/breadcrumb-item.styles.ts +++ /dev/null @@ -1,86 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {css} from '@microsoft/fast-element'; -import {display, focusVisible} from '@microsoft/fast-foundation'; -import { - borderWidth, - breadcrumbItemForeground, - breadcrumbItemForegroundHover, - breadcrumbSeparatorMarginHorizontal, - designUnit, - focusBorder, - fontFamily, - typeRampBaseFontSize, - typeRampBaseLineHeight, -} from '../design-tokens'; - -export const BreadcrumbItemStyles = css` - ${display('inline-flex')} :host { - background: transparent; - box-sizing: border-box; - color: ${breadcrumbItemForeground}; - font-family: ${fontFamily}; - font-size: ${typeRampBaseFontSize}; - fill: current; - line-height: ${typeRampBaseLineHeight}; - min-width: calc(${designUnit} * 7px); - outline: none; - } - :host(:not([href])) slot:not([name]) { - display: block; - cursor: default; - color: ${breadcrumbItemForeground}; - border: calc(${borderWidth} * 1px) solid transparent; - } - :host(:not([href]):${focusVisible}) slot:not([name]) { - color: ${breadcrumbItemForegroundHover}; - border: calc(${borderWidth} * 1px) solid ${focusBorder}; - } - :host(:${focusVisible}) .control { - color: ${breadcrumbItemForegroundHover}; - border: calc(${borderWidth} * 1px) solid ${focusBorder}; - } - :host(:hover) .control { - color: ${breadcrumbItemForegroundHover}; - } - .control { - align-items: center; - box-sizing: border-box; - color: ${breadcrumbItemForeground}; - border: calc(${borderWidth} * 1px) solid transparent; - cursor: pointer; - display: flex; - fill: inherit; - outline: none; - text-decoration: none; - white-space: nowrap; - } - .control .content { - position: relative; - } - .listitem { - display: flex; - align-items: center; - } - .separator { - display: flex; - align-items: center; - margin: 0 ${breadcrumbSeparatorMarginHorizontal}; - } - .start, - .end { - display: flex; - } - ::slotted(svg), - ::slotted(span) { - width: calc(${designUnit} * 4px); - height: calc(${designUnit} * 4px); - } - .start { - margin-inline-end: calc(var(--design-unit) * 1px); - } - .end { - margin-inline-start: calc(var(--design-unit) * 1px); - } -`; diff --git a/src/breadcrumb-item/fixtures/createBreadcrumbItem.ts b/src/breadcrumb-item/fixtures/createBreadcrumbItem.ts deleted file mode 100644 index 99e5a261..00000000 --- a/src/breadcrumb-item/fixtures/createBreadcrumbItem.ts +++ /dev/null @@ -1,61 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {VSCodeBreadcrumbItem} from '../index'; -import { - createCodiconIcon, - focusObserver, -} from '../../utilities/storybook/index'; - -export type BreadcrumbItemArgs = { - label: string; - href: string; - startIcon: boolean; - separatorIcon: boolean; - endIcon: boolean; - isFocused: boolean; -}; - -export function createBreadcrumbItem({ - label, - href, - startIcon, - separatorIcon, - endIcon, - isFocused, -}: BreadcrumbItemArgs) { - const breadcrumbItem = new VSCodeBreadcrumbItem(); - - if (label) { - breadcrumbItem.textContent = label; - } - if (href) { - breadcrumbItem.setAttribute('href', href); - } - if (startIcon) { - const start = createCodiconIcon({ - iconName: 'symbol-method', - slotName: 'start', - }); - breadcrumbItem.appendChild(start); - } - if (separatorIcon) { - const separator = createCodiconIcon({ - iconName: 'chevron-right', - slotName: 'separator', - }); - breadcrumbItem.appendChild(separator); - } - if (endIcon) { - const end = createCodiconIcon({ - iconName: 'symbol-method', - slotName: 'end', - }); - breadcrumbItem.appendChild(end); - } - if (isFocused) { - focusObserver(breadcrumbItem); - } - - return breadcrumbItem; -} diff --git a/src/breadcrumb-item/index.ts b/src/breadcrumb-item/index.ts deleted file mode 100644 index df9f6215..00000000 --- a/src/breadcrumb-item/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {customElement} from '@microsoft/fast-element'; -import { - BreadcrumbItem, - BreadcrumbItemTemplate as template, -} from '@microsoft/fast-foundation'; -import {BreadcrumbItemStyles as styles} from './breadcrumb-item.styles'; - -/** - * The VS Code BreadcrumbItem element. Extends - * {@link https://www.fast.design/docs/api/fast-foundation.breadcrumbitem/ | BreadcrumbItem} and - * {@link https://www.fast.design/docs/api/fast-foundation.breadcrumbitemtemplate/ | BreadcrumbItemTemplate}. - * - * @remarks - * HTML Element: `` - * - * Shadow Option: {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} - * - * @public - */ -@customElement({ - name: 'vscode-breadcrumb-item', - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class VSCodeBreadcrumbItem extends BreadcrumbItem {} diff --git a/src/breadcrumb/README.md b/src/breadcrumb/README.md deleted file mode 100644 index 28a2e80c..00000000 --- a/src/breadcrumb/README.md +++ /dev/null @@ -1,98 +0,0 @@ -# VS Code Breadcrumb - -The `vscode-breadcrumb` is used as a navigational aid, allowing users to maintain awareness of their navigated path within an extension. - -## Attributes - -None - -## Usage - -The `vscode-breadcrumb` component must be used with the `vscode-breadcrumb-item` component. - -### Basic Usage - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb--default) - -```html - - src - components - index.ts - -``` - -### Custom Separators - -The default separator is a `/` but it can customized by adding an element with the attribute `slot="separator"`, such as an span icon. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb--with-custom-separators) - -```html - - - - - src - - - - components - - - - index.ts - - - -``` - -### Start Icons - -An icon can be added to the left of Breadcrumb Item text by adding an element with the attribute `slot="start"`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb--with-start-icons) - -```html - - - - - src - - - - components - - - - index.ts - - - -``` - -### End Icons - -An icon can be added to the right of Breadcrumb Item text by adding an element with the attribute `slot="end"`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-breadcrumb--with-end-icons) - -```html - - - - - src - - - - components - - - - index.ts - - - -``` diff --git a/src/breadcrumb/breadcrumb.stories.ts b/src/breadcrumb/breadcrumb.stories.ts deleted file mode 100644 index 9deaeecc..00000000 --- a/src/breadcrumb/breadcrumb.stories.ts +++ /dev/null @@ -1,79 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {BreadcrumbArgs, createBreadcrumb} from './fixtures/createBreadcrumb'; - -export default { - title: 'Library/Breadcrumb', - argTypes: { - breadcrumbItemList: {control: 'array'}, - startIcon: {control: 'boolean'}, - separatorIcon: {control: 'boolean'}, - endIcon: {control: 'boolean'}, - }, - parameters: { - actions: { - disabled: true, - }, - }, -}; - -const Template = ({...args}: BreadcrumbArgs) => { - return createBreadcrumb({...args}); -}; - -export const Default: any = Template.bind({}); -Default.args = { - breadcrumbItemList: ['src', 'components', 'index.ts'], - startIcon: false, - separatorIcon: false, - endIcon: false, -}; -Default.parameters = { - docs: { - source: { - code: `\n\tsrc\n\tcomponents\n\tindex.ts\n`, - }, - }, -}; - -export const WithCustomSeparators: any = Template.bind({}); -WithCustomSeparators.args = { - ...Default.args, - separatorIcon: true, -}; -WithCustomSeparators.parameters = { - docs: { - source: { - code: `\n\n\n\t\n\t\tsrc\n\t\t\n\t\n\t\n\t\tcomponents\n\t\t\n\t\n\t\n\t\tindex.ts\n\t\t\n\t\n`, - }, - }, -}; - -export const WithStartIcons: any = Template.bind({}); -WithStartIcons.args = { - ...Default.args, - startIcon: true, - separatorIcon: true, -}; -WithStartIcons.parameters = { - docs: { - source: { - code: `\n\n\n\t\n\t\tsrc\n\t\t\n\t\t\n\t\n\t\n\t\tcomponents\n\t\t\n\t\t\n\t\n\t\n\t\tindex.ts\n\t\t\n\t\t\n\t\n`, - }, - }, -}; - -export const WithEndIcons: any = Template.bind({}); -WithEndIcons.args = { - ...Default.args, - separatorIcon: true, - endIcon: true, -}; -WithEndIcons.parameters = { - docs: { - source: { - code: `\n\n\n\t\n\t\tsrc\n\t\t\n\t\t\n\t\n\t\n\t\tcomponents\n\t\t\n\t\t\n\t\n\t\n\t\tindex.ts\n\t\t\n\t\t\n\t\n`, - }, - }, -}; diff --git a/src/breadcrumb/breadcrumb.styles.ts b/src/breadcrumb/breadcrumb.styles.ts deleted file mode 100644 index 607ff00d..00000000 --- a/src/breadcrumb/breadcrumb.styles.ts +++ /dev/null @@ -1,22 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {css} from '@microsoft/fast-element'; -import {display} from '@microsoft/fast-foundation'; -import { - fontFamily, - typeRampBaseFontSize, - typeRampBaseLineHeight, -} from '../design-tokens'; - -export const BreadcrumbStyles = css` - ${display('inline-block')} :host { - box-sizing: border-box; - font-family: ${fontFamily}; - font-size: ${typeRampBaseFontSize}; - line-height: ${typeRampBaseLineHeight}; - } - .list { - display: flex; - } -`; diff --git a/src/breadcrumb/fixtures/createBreadcrumb.ts b/src/breadcrumb/fixtures/createBreadcrumb.ts deleted file mode 100644 index 6dd251bc..00000000 --- a/src/breadcrumb/fixtures/createBreadcrumb.ts +++ /dev/null @@ -1,35 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {VSCodeBreadcrumb} from '../index'; -import {createBreadcrumbItem} from '../../breadcrumb-item/fixtures/createBreadcrumbItem'; - -export type BreadcrumbArgs = { - breadcrumbItemList: string[]; - startIcon: boolean; - separatorIcon: boolean; - endIcon: boolean; -}; - -export function createBreadcrumb({ - breadcrumbItemList, - startIcon, - separatorIcon, - endIcon, -}: BreadcrumbArgs) { - const breadcrumb = new VSCodeBreadcrumb(); - - for (let i = 0; i < breadcrumbItemList.length; i++) { - const breadcrumbItem = createBreadcrumbItem({ - label: breadcrumbItemList[i], - href: '#', - startIcon, - separatorIcon, - endIcon, - isFocused: false, - }); - breadcrumb.appendChild(breadcrumbItem); - } - - return breadcrumb; -} diff --git a/src/breadcrumb/index.ts b/src/breadcrumb/index.ts deleted file mode 100644 index 9b4a1af1..00000000 --- a/src/breadcrumb/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import {customElement} from '@microsoft/fast-element'; -import { - Breadcrumb, - BreadcrumbTemplate as template, -} from '@microsoft/fast-foundation'; -import {BreadcrumbStyles as styles} from './breadcrumb.styles'; - -/** - * The VS Code Breadcrumb element. Extends - * {@link https://www.fast.design/docs/api/fast-foundation.breadcrumb/ | Breadcrumb} and - * {@link https://www.fast.design/docs/api/fast-foundation.breadcrumbtemplate/ | BreadcrumbTemplate}. - * - * @remarks - * HTML Element: `` - * - * @public - */ -@customElement({ - name: 'vscode-breadcrumb', - template, - styles, -}) -export class VSCodeBreadcrumb extends Breadcrumb {} From 662e697badd22ba3f49afe97b8a376dd3f929579 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:43:48 -0700 Subject: [PATCH 5/9] Remove primary appearance from Badge component --- src/badge/README.md | 15 +-------------- src/badge/badge.stories.ts | 20 ------------------- src/badge/badge.styles.ts | 32 +++++-------------------------- src/badge/fixtures/createBadge.ts | 8 ++------ src/badge/index.ts | 21 +------------------- 5 files changed, 9 insertions(+), 87 deletions(-) diff --git a/src/badge/README.md b/src/badge/README.md index a3f3e9b2..57f5c784 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -4,9 +4,7 @@ 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` | +None ## Usage @@ -21,14 +19,3 @@ If a component that labels an item with a string is desired, see the `vscode-tag ```html 1 ``` - -### Appearance Attribute - -There are a number of visual appearances that the `vscode-badge` can have. The default appearance is `primary`. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--secondary) - -```html -1 -1 -``` diff --git a/src/badge/badge.stories.ts b/src/badge/badge.stories.ts index 90178c26..1539183f 100644 --- a/src/badge/badge.stories.ts +++ b/src/badge/badge.stories.ts @@ -7,12 +7,6 @@ export default { title: 'Library/Badge', argTypes: { label: {control: 'number'}, - appearance: { - control: { - type: 'select', - options: ['Primary', 'Secondary'], - }, - }, }, parameters: { actions: { @@ -28,7 +22,6 @@ const Template = ({...args}: BadgeArgs) => { export const Default: any = Template.bind({}); Default.args = { label: '1', - appearance: 'Primary', }; Default.parameters = { docs: { @@ -37,16 +30,3 @@ Default.parameters = { }, }, }; - -export const Secondary: any = Template.bind({}); -Secondary.args = { - ...Default.args, - appearance: 'Secondary', -}; -Secondary.parameters = { - docs: { - source: { - code: `1`, - }, - }, -}; diff --git a/src/badge/badge.styles.ts b/src/badge/badge.styles.ts index 159f4002..94f0a0f7 100644 --- a/src/badge/badge.styles.ts +++ b/src/badge/badge.styles.ts @@ -4,17 +4,15 @@ import {css} from '@microsoft/fast-element'; import {display} from '@microsoft/fast-foundation'; import { - badgePrimaryBackground, - badgePrimaryForeground, - badgeSecondaryBackground, - badgeSecondaryForeground, + badgeBackground, + badgeForeground, designUnit, fontFamily, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens'; -const BaseBadgeStyles = css` +export const BadgeStyles = css` ${display('inline-block')} :host { box-sizing: border-box; font-family: ${fontFamily}; @@ -23,10 +21,10 @@ const BaseBadgeStyles = css` } .control { align-items: center; - background-color: ${badgePrimaryBackground}; + background-color: ${badgeBackground}; border-radius: 100px; box-sizing: border-box; - color: ${badgePrimaryForeground}; + color: ${badgeForeground}; display: flex; height: calc(${designUnit} * 4px); justify-content: center; @@ -34,23 +32,3 @@ const BaseBadgeStyles = css` padding: 0 calc(${designUnit} * 1px); } `; - -const PrimaryBadgeStyles = css` - :host([appearance='primary']) .control { - background: ${badgePrimaryBackground}; - color: ${badgePrimaryForeground}; - } -`; - -const SecondaryBadgeStyles = css` - :host([appearance='secondary']) .control { - background: ${badgeSecondaryBackground}; - color: ${badgeSecondaryForeground}; - } -`; - -export const BadgeStyles = css` - ${BaseBadgeStyles} - ${PrimaryBadgeStyles} - ${SecondaryBadgeStyles} -`; diff --git a/src/badge/fixtures/createBadge.ts b/src/badge/fixtures/createBadge.ts index dadb4263..bd1a4637 100644 --- a/src/badge/fixtures/createBadge.ts +++ b/src/badge/fixtures/createBadge.ts @@ -1,22 +1,18 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import {BadgeAppearance, VSCodeBadge} from '../index'; +import {VSCodeBadge} from '../index'; export type BadgeArgs = { label: string; - appearance?: BadgeAppearance; }; -export function createBadge({label, appearance}: BadgeArgs) { +export function createBadge({label}: BadgeArgs) { const badge = new VSCodeBadge(); if (label) { badge.textContent = label; } - if (appearance) { - badge.setAttribute('appearance', appearance.toLowerCase()); - } return badge; } diff --git a/src/badge/index.ts b/src/badge/index.ts index 185ccc0d..54832870 100644 --- a/src/badge/index.ts +++ b/src/badge/index.ts @@ -1,16 +1,10 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import {attr, customElement} from '@microsoft/fast-element'; +import {customElement} from '@microsoft/fast-element'; import {Badge, BadgeTemplate as template} from '@microsoft/fast-foundation'; import {BadgeStyles as styles} from './badge.styles'; -/** - * Types of badge appearance. - * @public - */ -export type BadgeAppearance = 'primary' | 'secondary'; - /** * The VS Code Badge element. Extends * {@link https://www.fast.design/docs/api/fast-foundation.badge/ | Badge} and @@ -27,16 +21,6 @@ export type BadgeAppearance = 'primary' | 'secondary'; styles, }) export class VSCodeBadge extends Badge { - /** - * The appearance the badge should have. - * - * @remarks - * HTML Attribute: appearance - * - * @public - */ - @attr public appearance: BadgeAppearance; - /** * Component lifecycle method that runs when the element is inserted * into the DOM. @@ -45,9 +29,6 @@ export class VSCodeBadge extends Badge { */ public connectedCallback() { super.connectedCallback(); - if (!this.appearance) { - this.appearance = 'primary'; - } // This will override any usage of the circular attribute // provided by the FAST Foundation Badge component so that From d4bd8da2633cf1fb3aa7727334b22ec2117698b2 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:44:17 -0700 Subject: [PATCH 6/9] Remove reference links to deleted component docs --- docs/components.md | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/components.md b/docs/components.md index a490eeca..276a112d 100644 --- a/docs/components.md +++ b/docs/components.md @@ -2,25 +2,21 @@ Here you can find a list of all the components currently available in the toolkit with links to documentation for each component. -| Component | Doc Link | -| ----------------- | ----------------------------------------------------------------- | -| `badge` | [Badge Documentation](../src/badge/README.md) | -| `breadcrumb` | [Breadcrumb Documentation](../src/breadcrumb/README.md) | -| `breadcrumb-item` | [Breadcrumb Item Documentation](../src/breadcrumb-item/README.md) | -| `button` | [Button Documentation](../src/button/README.md) | -| `checkbox` | [Checkbox Documentation](../src/checkbox/README.md) | -| `combobox` | [Combobox Documentation](../src/combobox/README.md) | -| `data-grid` | [Data Grid Documentation](../src/data-grid/README.md) | -| `divider` | [Divider Documentation](../src/divider/README.md) | -| `dropdown` | [Dropdown Documentation](../src/dropdown/README.md) | -| `link` | [Link Documentation](../src/link/README.md) | -| `number-field` | [Number Field Documentation](../src/number-field/README.md) | -| `option` | [Option Documentation](../src/option/README.md) | -| `panels` | [Panels Documentation](../src/panels/README.md) | -| `progress-bar` | [Progress Bar Documentation](../src/progress-bar/README.md) | -| `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) | +| Component | Doc Link | +| --------------- | ------------------------------------------------------------- | +| `badge` | [Badge Documentation](../src/badge/README.md) | +| `button` | [Button Documentation](../src/button/README.md) | +| `checkbox` | [Checkbox Documentation](../src/checkbox/README.md) | +| `data-grid` | [Data Grid Documentation](../src/data-grid/README.md) | +| `divider` | [Divider Documentation](../src/divider/README.md) | +| `dropdown` | [Dropdown Documentation](../src/dropdown/README.md) | +| `link` | [Link Documentation](../src/link/README.md) | +| `number-field` | [Number Field Documentation](../src/number-field/README.md) | +| `option` | [Option Documentation](../src/option/README.md) | +| `panels` | [Panels Documentation](../src/panels/README.md) | +| `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) | From 85834a4c3afc6d5585438ed09b27f85f53b5e7a4 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:45:12 -0700 Subject: [PATCH 7/9] Update and remove design tokens related to updated and deleted components --- src/design-tokens.ts | 31 ++++++---------------------- src/tag/tag.styles.ts | 8 +++---- src/utilities/theme/tokenMappings.ts | 17 ++++----------- 3 files changed, 14 insertions(+), 42 deletions(-) diff --git a/src/design-tokens.ts b/src/design-tokens.ts index 0173bc90..fb3a1d03 100644 --- a/src/design-tokens.ts +++ b/src/design-tokens.ts @@ -61,34 +61,15 @@ export const typeRampPlus1LineHeight = create( 'type-ramp-plus1-line-height' ).withDefault('24px'); -/** - * Breadcrumb Item design tokens. - */ -export const breadcrumbItemForeground = create( - 'breadcrumb-item-foreground' -).withDefault('#cccccccc'); -export const breadcrumbItemForegroundHover = create( - 'breadcrumb-item-foreground-hover' -).withDefault('#e0e0e0'); -export const breadcrumbSeparatorMarginHorizontal = create( - 'breadcrumb-separator-margin-horizontal' -).withDefault('6px'); - /** * Badge design tokens. */ -export const badgePrimaryForeground = create( - 'badge-primary-foreground' -).withDefault('#ffffff'); -export const badgePrimaryBackground = create( - 'badge-primary-background' -).withDefault('#007acc'); -export const badgeSecondaryForeground = create( - 'badge-secondary-foreground' -).withDefault('#ffffff'); -export const badgeSecondaryBackground = create( - 'badge-secondary-background' -).withDefault('#4d4d4d'); +export const badgeForeground = create('badge-foreground').withDefault( + '#ffffff' +); +export const badgeBackground = create('badge-background').withDefault( + '#4d4d4d' +); /** * Button design tokens. diff --git a/src/tag/tag.styles.ts b/src/tag/tag.styles.ts index 608fa6c6..9b68a91e 100644 --- a/src/tag/tag.styles.ts +++ b/src/tag/tag.styles.ts @@ -4,8 +4,8 @@ import {css} from '@microsoft/fast-element'; import {display} from '@microsoft/fast-foundation'; import { - badgeSecondaryBackground, - badgeSecondaryForeground, + badgeBackground, + badgeForeground, designUnit, fontFamily, tagCornerRadius, @@ -21,9 +21,9 @@ export const TagStyles = css` line-height: ${typeRampMinus1LineHeight}; } .control { - background-color: ${badgeSecondaryBackground}; + background-color: ${badgeBackground}; border-radius: ${tagCornerRadius}; - color: ${badgeSecondaryForeground}; + color: ${badgeForeground}; padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px); text-transform: uppercase; } diff --git a/src/utilities/theme/tokenMappings.ts b/src/utilities/theme/tokenMappings.ts index 3b835f2e..9de24123 100644 --- a/src/utilities/theme/tokenMappings.ts +++ b/src/utilities/theme/tokenMappings.ts @@ -3,12 +3,8 @@ import {CSSDesignToken} from '@microsoft/fast-foundation'; import { - badgePrimaryBackground, - badgePrimaryForeground, - badgeSecondaryBackground, - badgeSecondaryForeground, - breadcrumbItemForeground, - breadcrumbItemForegroundHover, + badgeBackground, + badgeForeground, buttonBorder, buttonPrimaryBackground, buttonPrimaryForeground, @@ -59,14 +55,9 @@ export const tokenMappings: {[index: string]: CSSDesignToken} = { // ---- Contrast Styles ---- '--vscode-contrastActiveBorder': contrastActiveBorder, '--vscode-contrastBorder': contrastBorder, - // ---- Breadcrumbs ---- - '--vscode-breadcrumb-foreground': breadcrumbItemForeground, - '--vscode-breadcrumb-focusForeground': breadcrumbItemForegroundHover, // ---- Badges ---- - '--vscode-activityBarBadge-background': badgePrimaryBackground, - '--vscode-activityBarBadge-foreground': badgePrimaryForeground, - '--vscode-badge-foreground': badgeSecondaryForeground, - '--vscode-badge-background': badgeSecondaryBackground, + '--vscode-badge-foreground': badgeForeground, + '--vscode-badge-background': badgeBackground, // ---- Buttons ---- '--vscode-button-background': buttonPrimaryBackground, '--vscode-button-foreground': buttonPrimaryForeground, From 3fad57020f0c7b896a8a12c4f471f345f8eb4c26 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:45:30 -0700 Subject: [PATCH 8/9] Remove export paths of deleted components --- src/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index 68963e9d..09a02279 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,11 +3,8 @@ // Export components export * from './badge/index'; -export * from './breadcrumb/index'; -export * from './breadcrumb-item/index'; export * from './button/index'; export * from './checkbox/index'; -export * from './combobox/index'; export * from './data-grid/index'; export * from './divider/index'; export * from './dropdown/index'; @@ -15,7 +12,6 @@ export * from './link/index'; export * from './number-field/index'; export * from './option/index'; export * from './panels/index'; -export * from './progress-bar/index'; export * from './progress-ring/index'; export * from './radio-group/index'; export * from './radio/index'; From a723087557ce814f9cfe36d26d3fa733f93f9904 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 8 Sep 2021 11:45:39 -0700 Subject: [PATCH 9/9] Regenerate API report --- docs/api-report.md | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/docs/api-report.md b/docs/api-report.md index 6f044844..6d7f1442 100644 --- a/docs/api-report.md +++ b/docs/api-report.md @@ -7,11 +7,8 @@ import { Anchor } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; -import { Breadcrumb } from '@microsoft/fast-foundation'; -import { BreadcrumbItem } from '@microsoft/fast-foundation'; import { Button } from '@microsoft/fast-foundation'; import { Checkbox } from '@microsoft/fast-foundation'; -import { Combobox } from '@microsoft/fast-foundation'; import { DataGrid } from '@microsoft/fast-foundation'; import { DataGridCell } from '@microsoft/fast-foundation'; import { DataGridRow } from '@microsoft/fast-foundation'; @@ -27,27 +24,15 @@ import { Tabs } from '@microsoft/fast-foundation'; import { TextArea } from '@microsoft/fast-foundation'; import { TextField } from '@microsoft/fast-foundation'; -// @public -export type BadgeAppearance = 'primary' | 'secondary'; - // @public export type ButtonAppearance = 'primary' | 'secondary' | 'icon'; // @public export class VSCodeBadge extends Badge { - appearance: BadgeAppearance; // @internal connectedCallback(): void; } -// @public -export class VSCodeBreadcrumb extends Breadcrumb { -} - -// @public -export class VSCodeBreadcrumbItem extends BreadcrumbItem { -} - // @public export class VSCodeButton extends Button { appearance: ButtonAppearance; @@ -59,10 +44,6 @@ export class VSCodeButton extends Button { export class VSCodeCheckbox extends Checkbox { } -// @public -export class VSCodeCombobox extends Combobox { -} - // @public export class VSCodeDataGrid extends DataGrid { } @@ -109,12 +90,6 @@ export class VSCodePanelTab extends Tab { export class VSCodePanelView extends TabPanel { } -// @public -export class VSCodeProgressBar extends BaseProgress { - // @internal - connectedCallback(): void; -} - // @public export class VSCodeProgressRing extends BaseProgress { // @internal