From 372323d45ed997a8ab37fc695ccfd5d25eae984c Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 7 Dec 2022 13:50:08 -0800 Subject: [PATCH 1/5] Add text field slotted content docs --- src/text-field/README.md | 31 ++++++++++++++++++++++ src/text-field/fixtures/createTextField.ts | 23 ++++++++++++++++ src/text-field/text-field.stories.ts | 15 +++++++++++ 3 files changed, 69 insertions(+) diff --git a/src/text-field/README.md b/src/text-field/README.md index d9afed3b..607d5cf7 100644 --- a/src/text-field/README.md +++ b/src/text-field/README.md @@ -147,3 +147,34 @@ An icon can be added to the right of the text field by adding an element with th ``` + +### Slotted Content + +Building on top of the icon examples, it's worth noting that any arbitrary HTML can be inserted into the start and end slots of a text field with the `slot="start"` and `slot="end"` attributes. + +The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further behavior is needed to make this functional). + +**❗️ An important note ❗️** + +While component slots provide a lot of flexibility to extend components please use them responsibly and remember to follow the extension [UX Guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to ensure that your extension UI still has the same look and feel as the rest of VS Code. + +[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-field--with-slotted-content) + +```html + + + + Text Field Label +
+ + + + + + + + + +
+ +``` diff --git a/src/text-field/fixtures/createTextField.ts b/src/text-field/fixtures/createTextField.ts index 9456ccba..e4c98b5e 100644 --- a/src/text-field/fixtures/createTextField.ts +++ b/src/text-field/fixtures/createTextField.ts @@ -2,6 +2,7 @@ // Licensed under the MIT License. import {TextField} from '../index'; +import {Button, ButtonAppearance} from '../../index'; import {createCodiconIcon} from '../../utilities/storybook/index'; type TextFieldType = 'email' | 'password' | 'tel' | 'text' | 'url'; @@ -18,6 +19,7 @@ export type TextFieldArgs = { isAutoFocused: boolean; startIcon: boolean; endIcon: boolean; + slottedContent: boolean; }; export function createTextField({ @@ -32,6 +34,7 @@ export function createTextField({ isAutoFocused, startIcon, endIcon, + slottedContent, }: TextFieldArgs) { const textField = new TextField(); @@ -73,6 +76,26 @@ export function createTextField({ const end = createCodiconIcon({iconName: 'text-size', slotName: 'end'}); textField.appendChild(end); } + if (slottedContent) { + const section = document.createElement('section'); + section.setAttribute('slot', 'end'); + section.style.display = 'flex'; + section.style.alignItems = 'center'; + + section.innerHTML = /*html*/ ` + + + + + + + + + + `; + + textField.appendChild(section); + } return textField; } diff --git a/src/text-field/text-field.stories.ts b/src/text-field/text-field.stories.ts index 02f99da1..f30d8624 100644 --- a/src/text-field/text-field.stories.ts +++ b/src/text-field/text-field.stories.ts @@ -22,6 +22,7 @@ export default { isAutoFocused: {control: 'boolean'}, startIcon: {control: 'boolean'}, endIcon: {control: 'boolean'}, + slottedContent: {control: 'boolean'}, }, parameters: { actions: { @@ -47,6 +48,7 @@ Default.args = { isAutoFocused: false, startIcon: false, endIcon: false, + slottedContent: false, }; Default.parameters = { docs: { @@ -177,3 +179,16 @@ WithEndIcon.parameters = { }, }, }; + +export const WithSlottedContent: any = Template.bind({}); +WithSlottedContent.args = { + ...Default.args, + slottedContent: true, +}; +WithSlottedContent.parameters = { + docs: { + source: { + code: `\n\n\n\tText Field Label\n\t
\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t
\n`, + }, + }, +}; From 263befc201a57783db9d284b53a25903dc23b21e Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 7 Dec 2022 13:50:45 -0800 Subject: [PATCH 2/5] Remove unused import --- src/text-field/fixtures/createTextField.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/text-field/fixtures/createTextField.ts b/src/text-field/fixtures/createTextField.ts index e4c98b5e..bdf2784a 100644 --- a/src/text-field/fixtures/createTextField.ts +++ b/src/text-field/fixtures/createTextField.ts @@ -2,7 +2,6 @@ // Licensed under the MIT License. import {TextField} from '../index'; -import {Button, ButtonAppearance} from '../../index'; import {createCodiconIcon} from '../../utilities/storybook/index'; type TextFieldType = 'email' | 'password' | 'tel' | 'text' | 'url'; From fb3caf25b0655427042726f23c6d9263e18e7de9 Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 7 Dec 2022 13:57:59 -0800 Subject: [PATCH 3/5] Update text field readme --- src/text-field/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/text-field/README.md b/src/text-field/README.md index 607d5cf7..9cebb5a2 100644 --- a/src/text-field/README.md +++ b/src/text-field/README.md @@ -152,7 +152,7 @@ An icon can be added to the right of the text field by adding an element with th Building on top of the icon examples, it's worth noting that any arbitrary HTML can be inserted into the start and end slots of a text field with the `slot="start"` and `slot="end"` attributes. -The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further behavior is needed to make this functional). +The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further JavaScript is needed to make this example functional). **❗️ An important note ❗️** From 2c2127f62f342573ea91ffea84469866509d53cb Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 8 Dec 2022 09:54:33 -0800 Subject: [PATCH 4/5] Update multiple icons text field docs and storybook example --- src/text-field/README.md | 18 +++++++----------- src/text-field/fixtures/createTextField.ts | 12 ++++++------ src/text-field/text-field.stories.ts | 14 +++++++------- 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/text-field/README.md b/src/text-field/README.md index 9cebb5a2..27d74b50 100644 --- a/src/text-field/README.md +++ b/src/text-field/README.md @@ -148,17 +148,13 @@ An icon can be added to the right of the text field by adding an element with th ``` -### Slotted Content +### Multiple Icons -Building on top of the icon examples, it's worth noting that any arbitrary HTML can be inserted into the start and end slots of a text field with the `slot="start"` and `slot="end"` attributes. +Building on top of the icon examples above, multiple icons can also be inserted into the start and end slots of a text field with the `slot="start"` and `slot="end"` attributes. -The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further JavaScript is needed to make this example functional). +The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further JavaScript is needed to make this example functional, however). -**❗️ An important note ❗️** - -While component slots provide a lot of flexibility to extend components please use them responsibly and remember to follow the extension [UX Guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to ensure that your extension UI still has the same look and feel as the rest of VS Code. - -[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-field--with-slotted-content) +[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-field--with-multiple-icons) ```html @@ -166,13 +162,13 @@ While component slots provide a lot of flexibility to extend components please u Text Field Label
- + - + - +
diff --git a/src/text-field/fixtures/createTextField.ts b/src/text-field/fixtures/createTextField.ts index bdf2784a..aee6369d 100644 --- a/src/text-field/fixtures/createTextField.ts +++ b/src/text-field/fixtures/createTextField.ts @@ -18,7 +18,7 @@ export type TextFieldArgs = { isAutoFocused: boolean; startIcon: boolean; endIcon: boolean; - slottedContent: boolean; + multipleIcons: boolean; }; export function createTextField({ @@ -33,7 +33,7 @@ export function createTextField({ isAutoFocused, startIcon, endIcon, - slottedContent, + multipleIcons, }: TextFieldArgs) { const textField = new TextField(); @@ -75,20 +75,20 @@ export function createTextField({ const end = createCodiconIcon({iconName: 'text-size', slotName: 'end'}); textField.appendChild(end); } - if (slottedContent) { + if (multipleIcons) { const section = document.createElement('section'); section.setAttribute('slot', 'end'); section.style.display = 'flex'; section.style.alignItems = 'center'; section.innerHTML = /*html*/ ` - + - + - + `; diff --git a/src/text-field/text-field.stories.ts b/src/text-field/text-field.stories.ts index f30d8624..a68eb628 100644 --- a/src/text-field/text-field.stories.ts +++ b/src/text-field/text-field.stories.ts @@ -22,7 +22,7 @@ export default { isAutoFocused: {control: 'boolean'}, startIcon: {control: 'boolean'}, endIcon: {control: 'boolean'}, - slottedContent: {control: 'boolean'}, + multipleIcons: {control: 'boolean'}, }, parameters: { actions: { @@ -48,7 +48,7 @@ Default.args = { isAutoFocused: false, startIcon: false, endIcon: false, - slottedContent: false, + multipleIcons: false, }; Default.parameters = { docs: { @@ -180,15 +180,15 @@ WithEndIcon.parameters = { }, }; -export const WithSlottedContent: any = Template.bind({}); -WithSlottedContent.args = { +export const WithMultipleIcons: any = Template.bind({}); +WithMultipleIcons.args = { ...Default.args, - slottedContent: true, + multipleIcons: true, }; -WithSlottedContent.parameters = { +WithMultipleIcons.parameters = { docs: { source: { - code: `\n\n\n\tText Field Label\n\t
\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t
\n`, + code: `\n\n\n\tText Field Label\n\t
\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t
\n`, }, }, }; From 6915a23c80f23fea6e39dfdce99a9d2d86ce5b5f Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Thu, 8 Dec 2022 10:00:49 -0800 Subject: [PATCH 5/5] Fix grammar --- src/text-field/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/text-field/README.md b/src/text-field/README.md index 27d74b50..e762cf57 100644 --- a/src/text-field/README.md +++ b/src/text-field/README.md @@ -152,7 +152,7 @@ An icon can be added to the right of the text field by adding an element with th Building on top of the icon examples above, multiple icons can also be inserted into the start and end slots of a text field with the `slot="start"` and `slot="end"` attributes. -The below example demonstrate how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further JavaScript is needed to make this example functional, however). +The below example demonstrates how the native search text field from VS Code might be _visually_ implemented with a `section` tag that wraps a few `vscode-buttons` with an icon appearance applied (please note that further JavaScript is needed to make this example functional, however). [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-field--with-multiple-icons)