Supporting labels for VSCodeDropdown

[petrbroz]

Feature request

Add support for specifying a label for the <VSCodeDropdown /> React component that will look the same as labels for other input elements. Or, if this is feature is already available, please document it.

Expected behavior

One should be able to specify a label on the <VSCodeDropdown /> React component, for example, like so:

<VSCodeDropdown value="e1" label="Engine:">
    <VSCodeOption value="e1">Engine 1</VSCodeOption>
    <VSCodeOption value="e2">Engine 2</VSCodeOption>
</VSCodeDropdown>

And the label should be styled in the same way as for other input elements such as <VSCodeTextField />.

Current behavior

AFAIK the only way of adding a label to the <VSCodeDropdown /> React component is like so:

<div>
    <label htmlFor="engine">Engine:</label>
    <VSCodeDropdown id="engine" value="e1">
        <VSCodeOption value="e1">Engine 1</VSCodeOption>
        <VSCodeOption value="e2">Engine 2</VSCodeOption>
    </VSCodeDropdown>
</div>

Unfortunately in this case the label's layout and style doesn't match the labels of other input elements, as indicated in the screenshot below:

[hawkticehurst]

Hey @petrbroz! Thanks for the call out on the inadequate docs, I definitely could be providing more here 😅

In the short term, I'll update our docs to offer some better markup/styling details like so:

<div class="dropdown-container">
  <label for="dropdown-1">Dropdown label</label>
  <vscode-dropdown id="dropdown-1">
    <vscode-option>Option Label #1</vscode-option>
    <vscode-option>Option Label #2</vscode-option>
    <vscode-option>Option Label #3</vscode-option>
  </vscode-dropdown>
</div>

.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;
}

In the longer term, I also very much want to improve all our input components so they can support labels in a consistent way, but as I have been mentioning in other issue threads we are really tightly resourced at this time (myself and one other person split our time between this project and a handful of others) so I, unfortunately, can't make any guarantees about timelines at this point.

This work is very much on the backlog, however, just a question of when we'll be able to get to it. Hope you understand :)

[petrbroz]

Thanks @hawkticehurst! No worries, I understand :) Thank you for the great work you're doing here!