[expand button]: initial PR

[legomushroom]

Adds the expand button for HUD:

[msftclas]

@legomushroom,
Thanks for your contribution as a Microsoft full-time employee or intern. You do not need to sign a CLA.
Thanks,
Microsoft Pull Request Bot

[mike-kaufman]

@davidkpiano , @philliphoff - please review this.

[davidkpiano]

Looks great! 🚢

[mike-kaufman]

please get sign-off from David & Phil before mergingin.

[davidkpiano]

@legomushroom If you can, can you narrow the width of the div containing the caret? (maybe by 1/2, cc. @avanderhoorn )

Otherwise looks good to me

[avanderhoorn]

Feedback on design... can we make it a bit more narrow? By about 1/3 or 1/2?

[legomushroom]

@avanderhoorn

1/3:

[avanderhoorn]

Thats better! And what does 1/2 look like?

[legomushroom]

@avanderhoorn

1/2:

[avanderhoorn]

I like the last best. Can the collapsed carrot be hollow (like in VS Codes find/replace component)?

[legomushroom]

@avanderhoorn only if we are ok to pull in svg icon for that, right now we use a vanilla CSS arrow?

[mike-kaufman]

I want to land this in the next ~10 minutes to start a build, so if any styling changes are going to take longer than that, let's open separate bugs to track them.

[philliphoff]

I'm not crazy about the icon choice; it's not obvious to me what the expand/collapse icon mean in this context. To me, using + and - might have been more clear, or icons that are clear arrows. Otherwise LGTM.

[mike-kaufman]

I'm not crazy about the icon choice; it's not obvious to me what the expand/collapse icon mean in this context. To me, using + and - might have been more clear,

This is good feedback, oleg plz open a seperate bug to track icon choice here. I don't want to block the functionality any longer.

[davidkpiano]

I'm not crazy about the icon choice; it's not obvious to me what the expand/collapse icon mean in this context. To me, using + and - might have been more clear, or icons that are clear arrows.

For context, this is modeling the expand/collapse behavior and UI in VS Code (find/replace) for now, but yeah, we can revise this.

[philliphoff]

For context, this is modeling the expand/collapse behavior and UI in VS Code (find/replace) for now, but yeah, we can revise this.

I'd say it still doesn't work great in VS Code, but at least works slightly better since it's not expanding to a large panel. I think these icons would be more obvious:

[legomushroom]

@davidkpiano @philliphoff I created an issue to track this: #133