Dev: Align Search with Site Search Box (font size, border radius)

[realdylanzheng]

📇 User Story or Summary

As a developer, I want the font size on the search component to be smaller than 20px, and I want the rounded corners removed to complete the alignment work with Canada.ca

Design file

Search (opens in Figma)

✅ Definition of Done / Outcomes

• Done when a PR is reviewed and approved on the tokens repository
• Done when the PR on the tokens repository is merged and released
• Done when a PR on the components repository is approved and ready to merge, but not yet merged
• Done when PR on the components repository has been reviewed by at least 1 dev
• Done when tests are written and passing
• Done when the requirements doc has been updated to include the changes

📜 Acceptance criteria

• The font size on the search input is set to 16px on mobile to align with Canada.ca
• The font size on the search input is set to 16px on desktop to align with Canada.ca
• Ensure the size is set to 34 characters for the input element
• Ensure the max-length is set to 170 for the input element
• The rounded corners, or border radius, on the search component should be removed or set to none.
• The component tokens gcds-search-font-desktop and gcds-search-font-mobile for the search component should be updated to use a smaller font size (1rem or 16px)
• The CSS for the component token has been updated to remove the rounded borders
• PR on the components repository needs to be reviewed by at least 1 designer
• PR on the components repository, while approved, should not yet be merged

Out of scope:

• Colour
• Button / icon font size

[adorayi]

Missing acceptance criteria for size of the search input to be set to size 34

[adorayi]

What happens when the search component is used outside of the header? re: responsive vs non responsive use.
Follow up with @jmealing in the next meeting, how should the Search component be used outside of the header. See Canada.ca Search results page.

[jmealing]

@realdylanzheng Could we plan to touch base and discuss in one of our design sprints; maybe the 29th?