The new o-header

[metart43]

Describe your changes

Please, follow my commit history while reviewing the PR.

FT header is undergoing designs changes as a part of the initiative to revamp search on ft.com.

Main changes:

• search input field has a type="search" which is the semantically correct type. We are getting some built-in advantages of using type="search". It should have a positive effect on a11ty. More about it
• search form and search button are bigger
• search container overlays the rest of the nav menu and rest of the content
• magnifying glass icon is shown on the tablet break-point
• drawer search is hidden on the tablet break-point
• close button is changed from x to close

Demo

Desktop

Tablet

Phone (375 width). This break-point is not meant to be used because you cannot toggle the search menu, but it's okay to still make it look acceptable

Phone (320 width). This break-point is not meant to be used because you cannot toggle the search menu, but it's okay to still make it look acceptable

Issue ticket number and link

https://financialtimes.atlassian.net/jira/software/c/projects/CON/boards/1061?selectedIssue=CON-3449

Link to Figma designs

https://www.figma.com/design/L6qyUFPPLRmf59OxTkz2VJ/Semantic-Search?node-id=10-2861&m=dev

Checklist before requesting a review

• I have applied percy label for o-[COMPONENT] or chromatic label for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md
• If it is a new feature, I have added thorough tests.
• I have updated relevant docs.
• I have updated relevant env variables in Doppler.

[notlee]

Hey,

I haven't had time to do a proper review but I can see this isn't quite ready for release yet. For example, markup changes are classed as a breaking change so we need to ensure this is a major release and has a migration guide.

As I'm off tomorrow I've written up a Jira Ticket to capture some things the Origami team should pay some closer attention to on review

[metart43]

@notlee

• The search bar can display at least twice, in the main nav and the sticky nav. Ensure they both work and the correct input/controls/labels are associated.

Search bar can be displayed three times. Drawer, sticky and main nav.

In production label and controls currently are not properly associated. See this commit for the reference. If you inspect the main input field and it's label you will spot they reference different IDs.

I can write up a migration guide, highlighting changes described in this PR. The main change related to the type="search" and introduction of a z-index. Everything else is trivial.

[metart43]

@frshwtr you should be able to start up the storybook and go to http://localhost:6006/?path=/story/components-o-header--header-primary&globals=backgrounds:!undefined

[frshwtr]

It's quite hard to see but it seems the button is about 1px taller than the search bar, is that intentional?

[metart43]

@frshwtr I am not sure if you are QAing the changes I've pushed. Th screenshot you've shared doesn't look right. I can see that the button on your screenshot looks different to what I have locally

Please, see the dimension of the search bar and the button was (42px):

I have pushed a commit to reduce the icon height, the bar height should be 40 034a682

[metart43]

@notlee thanks for advising to write up a migration guide. I have pushed a commit to do so d533203

[frshwtr]

This guide is useful in providing updates on the changes to TSX users. o-header also supports HTML and CSS users. Please could you add some details on how I would upgrade my code using this approach?

Migrating from v11 to v12 in this file has some examples of the things to mention. Mostly an example of the overall HTML to use (from the storybook link) and details on what individual sections can be removed/added/updated.

[metart43]

Thanks for pointing this. I've addressed in a357342

[frshwtr]

@frshwtr I am not sure if you are QAing the changes I've pushed. Th screenshot you've shared doesn't look right. I can see that the button on your screenshot looks different to what I have locally

Please, see the dimension of the search bar and the button was (42px):

I have pushed a commit to reduce the icon height, the bar height should be 40 034a682

This looks good now, thanks.