storybook example with icon buttons inside of text field

[jckr]

Feature/component description

Currently, we have storybook examples with start or end icons inside a text field. These examples use a single span element with a slot property.
Glancing at these examples, I wasn't sure whether it was possible to have something else than a display icon in these text fields, when actually, it's pretty simple to use the same approach to have a vscode-button inside the text field.

Use case

I was trying to reproduce something similar to the find text box in VS Code. It's a text field which has icon buttons that can be toggled. I first tried to do that without using slots, and while it's possible to come close, it's a lot of useless markup. So IMO it would be useful to have that as one of the examples.

Screenshots/references

That's my implementation ftr.

[hawkticehurst]

Thanks for bringing this up @jckr –– I think this is a reasonable request!

Also just to make sure I understand your request, I'm interpreting this as you're hoping for a code sample that demonstrates the full extent of how the slot attribute can be used in the vscode-text-field component. Does that feel correct?

If so, the short answer is that any arbitrary HTML should be valid when the slot="start" or slot="end" attribute is added. So in the case of reproducing the search text box from VS Code you could do something along these lines:

<!-- NOTE: DO NOT COPY-PASTE THIS CODE, IT IS INCOMPLETE/INCORRECT -->
<vscode-text-field>
    Label
    <section slot="end" style="display:flex; align-items: center;">
        <vscode-button appearance="icon" aria-label="Toggle case sensitive search">
            <span class="codicon codicon-case-sensitive"></span>
        </vscode-button>
        <vscode-button appearance="icon" aria-label="Toggle whole word search">
            <span class="codicon codicon-whole-word"></span>
        </vscode-button>
        <vscode-button appearance="icon" aria-label="Toggle regex search">
            <span class="codicon codicon-regex"></span>
        </vscode-button>
    </section>
</vscode-text-field>

This is not a fully complete/working solution because the vscode-button with appearance="icon" has incorrect styling for a search text box and also does not have toggle functionality built in.

So again, I could explore some other custom alternatives and provide that as a code sample on Storybook or maybe this predicates the need for a new button appearance option and toggle functionality (@daviddossett once you're back in office we should chat about this).

[jckr]

Hi Hawk, I've already made a UI that implements this in an extension. My markup looks like yours, though i didn't wrap the vscode-button elements in a section - I just set slot="end" for all of them, set aria roles to checkbox and gave them an extra class on toggle. What i'm suggesting is to have an example in your storybook that show this kind of UI in action, as I see input boxes with clickable icons inside in various places of the VS Code UI so that looks like a pattern.

[hawkticehurst]

Ahh okay, I'm oriented now, thank you for clarifying!

Yes, I think that's a great idea and fits wonderfully within a larger vision we've had about being able to provide a set of helpful/common UI patterns and best practices for extension authors.

More than happy to add this to a list of requested patterns/code samples.

[hawkticehurst]

cc @daviddossett

[Nic30]

For mentioned example the button should work as a checkbox.
vscode-button appearance="icon" does not save its check state.
vscode-checkbox does not display correctly (has additional checkbox and check state does not affect the icon)
Is it somehow possible to use add checkbox like behavior to vscode-button appearance="icon" and obtain its state from form data?

I briefly looked at projects of people from this issue, I see that everyone is implementing check manually https://github.com/codemodsquad/vscode-astx/blob/348e68d05bdf5fd2ca1482544abfa62ad7e69a87/src/SearchReplaceView/SearchReplaceView.tsx#L123