Improve dropdown label docs (#463)

Description of changes

Adds better documentation on how to create labels in dropdown components that adhere to the VS Code design language.

Author: hawkticehurst

src/dropdown/README.md

@@ -47,20 +47,42 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ### With Label
 
+_Note: There are [long term plans](https://github.com/microsoft/vscode-webview-ui-toolkit/issues/461#issuecomment-1478408942) to better support labels in dropdown components, but in the meantime the below markup and styling will create a label that adheres to the VS Code design language._
+
 ```html
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown">
-  <vscode-option>Option Label #1</vscode-option>
-  <vscode-option>Option Label #2</vscode-option>
-  <vscode-option>Option Label #3</vscode-option>
-</vscode-dropdown>
+<div class="dropdown-container">
+  <label for="my-dropdown">Choose an option:</label>
+  <vscode-dropdown id="my-dropdown">
+    <vscode-option>Option Label #1</vscode-option>
+    <vscode-option>Option Label #2</vscode-option>
+    <vscode-option>Option Label #3</vscode-option>
+  </vscode-dropdown>
+</div>
+```
+
+```css
+.dropdown-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.dropdown-container label {
+  display: block;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  font-size: var(--vscode-font-size);
+  line-height: normal;
+  margin-bottom: 2px;
+}
 ```
 
 ### Disabled Attribute
 
 ```html
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown" disabled>
+<vscode-dropdown disabled>
   <vscode-option>Option Label #1</vscode-option>
   <vscode-option>Option Label #2</vscode-option>
   <vscode-option>Option Label #3</vscode-option>
@@ -70,8 +92,7 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 ### Open Attribute
 
 ```html
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown" open>
+<vscode-dropdown open>
   <vscode-option>Option Label #1</vscode-option>
   <vscode-option>Option Label #2</vscode-option>
   <vscode-option>Option Label #3</vscode-option>
@@ -81,17 +102,15 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 ### Position Attribute
 
 ```html
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown" position="above">
+<vscode-dropdown position="above">
   <vscode-option>Option Label #1</vscode-option>
   <vscode-option>Option Label #2</vscode-option>
   <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
 ```html
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown" position="below">
+<vscode-dropdown position="below">
   <vscode-option>Option Label #1</vscode-option>
   <vscode-option>Option Label #2</vscode-option>
   <vscode-option>Option Label #3</vscode-option>
@@ -105,8 +124,7 @@ The default indicator is a downward facing chevron, but it can customized by add
 ```html
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
-<label for="my-dropdown">Choose an option:</label>
-<vscode-dropdown id="my-dropdown">
+<vscode-dropdown>
   <span slot="indicator" class="codicon codicon-settings"></span>
   <vscode-option>Option Label #1</vscode-option>
   <vscode-option>Option Label #2</vscode-option>