Add docs for multiple icons in text fields (#427)

Description of changes

Adds documentation and Storybook sample explaining how text field slots can be used to create something like the native search text field in VS Code.

src/text-field/README.md

@@ -147,3 +147,30 @@ An icon can be added to the right of the text field by adding an element with th
   <span slot="end" class="codicon codicon-chevron-right"></span>
 </vscode-text-field>
 ```
+
+### Multiple Icons
+
+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 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)
+
+```html
+<!-- Note: Using Visual Studio Code Codicon Library -->
+
+<vscode-text-field>
+  Text Field Label
+  <section slot="end" style="display:flex; align-items: center;">
+    <vscode-button appearance="icon" aria-label="Match Case">
+      <span class="codicon codicon-case-sensitive"></span>
+    </vscode-button>
+    <vscode-button appearance="icon" aria-label="Match Whole Word">
+      <span class="codicon codicon-whole-word"></span>
+    </vscode-button>
+    <vscode-button appearance="icon" aria-label="Use Regular Expression">
+      <span class="codicon codicon-regex"></span>
+    </vscode-button>
+  </section>
+</vscode-text-field>
+```

src/text-field/fixtures/createTextField.ts

@@ -18,6 +18,7 @@ export type TextFieldArgs = {
 	isAutoFocused: boolean;
 	startIcon: boolean;
 	endIcon: boolean;
+	multipleIcons: boolean;
 };
 
 export function createTextField({
@@ -32,6 +33,7 @@ export function createTextField({
 	isAutoFocused,
 	startIcon,
 	endIcon,
+	multipleIcons,
 }: TextFieldArgs) {
 	const textField = new TextField();
 
@@ -73,6 +75,26 @@ export function createTextField({
 		const end = createCodiconIcon({iconName: 'text-size', slotName: 'end'});
 		textField.appendChild(end);
 	}
+	if (multipleIcons) {
+		const section = document.createElement('section');
+		section.setAttribute('slot', 'end');
+		section.style.display = 'flex';
+		section.style.alignItems = 'center';
+
+		section.innerHTML = /*html*/ `
+			<vscode-button appearance="icon" aria-label="Match Case">
+					<span class="codicon codicon-case-sensitive"></span>
+			</vscode-button>
+			<vscode-button appearance="icon" aria-label="Match Whole Word">
+					<span class="codicon codicon-whole-word"></span>
+			</vscode-button>
+			<vscode-button appearance="icon" aria-label="Use Regular Expression">
+					<span class="codicon codicon-regex"></span>
+			</vscode-button>
+		`;
+
+		textField.appendChild(section);
+	}
 
 	return textField;
 }

src/text-field/text-field.stories.ts

@@ -22,6 +22,7 @@ export default {
 		isAutoFocused: {control: 'boolean'},
 		startIcon: {control: 'boolean'},
 		endIcon: {control: 'boolean'},
+		multipleIcons: {control: 'boolean'},
 	},
 	parameters: {
 		actions: {
@@ -47,6 +48,7 @@ Default.args = {
 	isAutoFocused: false,
 	startIcon: false,
 	endIcon: false,
+	multipleIcons: false,
 };
 Default.parameters = {
 	docs: {
@@ -177,3 +179,16 @@ WithEndIcon.parameters = {
 		},
 	},
 };
+
+export const WithMultipleIcons: any = Template.bind({});
+WithMultipleIcons.args = {
+	...Default.args,
+	multipleIcons: true,
+};
+WithMultipleIcons.parameters = {
+	docs: {
+		source: {
+			code: `<!-- Note: Using Visual Studio Code Codicon Library -->\n\n<vscode-text-field>\n\tText Field Label\n\t<section slot="end" style="display:flex; align-items: center;">\n\t\t<vscode-button appearance="icon" aria-label="Match Case">\n\t\t\t<span class="codicon codicon-case-sensitive"></span>\n\t\t</vscode-button>\n\t\t<vscode-button appearance="icon" aria-label="Match Whole Word">\n\t\t\t<span class="codicon codicon-whole-word"></span>\n\t\t</vscode-button>\n\t\t<vscode-button appearance="icon" aria-label="Use Regular Expression">\n\t\t\t<span class="codicon codicon-regex"></span>\n\t\t</vscode-button>\n\t</section>\n</vscode-text-field>`,
+		},
+	},
+};