Experimental Design - custom width for buttons

[thejordanwood]

What

The Sitewide team is making changes to the facility locator based on feedback during the DS Council meeting on 4/11/2024. We want to implement progressive disclosure to the search to avoid a disabled input field in certain situations. We also want to align with mobile styling by stacking the form fields.

We've tried to solve for this by moving the search to the left of the map. Designs can be viewed in this Figma file.

The search button is unable to expand the full width of this section. We would like an adjustment to the current functionality of the button component.

This may relate to this ticket that discusses full width buttons on mobile.

Purpose

This would make the button a consistent width to the other search fields.

Usage

Usage would stay the same.

Behavior

Behavior would stay the same.

Examples

Current

Updated

Accessibility

N/A

Guidance

N/A

Collaboration Cycle Ticket

Collab cycle ticket

Your team

Sitewide

Research (optional)

N/A

Code (optional)

N/A

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.