Ent 2784 pro bar #1191

phelipemaia · 2025-12-02T10:48:58Z

Description

This PR adds a new element to the Layout called HeaderCoving. The HeaderCoving will always appear between the headerBefore and the header. It will be used by the Professional Bar to show a mint bar for Professional users based on a flag that should be passed to Layout.
Flags were being used on Header only. I'm adding an options prop to LayoutProps so we can also have flags on Layout layer.
The solutions has been discussed with Platforms already and all the investigation is in the tech proposal.

Checklist

I've discussed this feature with the Platforms team
This feature is stable, i.e. is not an ongoing experiment, temporary workaround, or hack
My branch has been rebased onto the latest commit on main (don't merge main into your branch)

We also added a new prop called options to layout where we can pass flags to it just like the header.

apaleslimghost

looking good! i have a few minor, nonblocking suggestions, a question to clarify, and one small accessibility issue.

apaleslimghost · 2025-12-02T11:58:22Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.js

+      setTimeout(() => {
+        updateOrganisationName(coving, licenceInfo.organisationName)
+        textContainer.classList.remove('is-fading-out')
+        textContainer.classList.add('is-fading-in')
+      }, 500)


suggestion: rather than a fixed timeout, it would be more robust here to listen for the transitionend event with { once: true } (if e.g. the transition duration changes we'd also have to update this timeout).

apaleslimghost · 2025-12-02T12:12:19Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.scss

+.n-layout__pro-coving {
+  display: flex;
+  width: 100%;
+  background-color: var(--o3-color-palette-mint);


thought: it would be good to get this (and the slate foreground below) added to o3-foundation as use case tokens (e.g. --o3-color-use-case-coving-background/foreground)

that's a good idea.. however, I will add that to the professional brand only even though the header coving is a layout element now..

@apaleslimghost is this a use case value you see being used in FT Pink also?

apaleslimghost · 2025-12-02T12:14:11Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.scss

+  padding-top: var(--o3-spacing-4xs);
+  padding-bottom: var(--o3-spacing-4xs);


suggestion: would be more concise to use the newish padding-block property (available in all browsers we support). same for border-block:

Suggested change

padding-top: var(--o3-spacing-4xs);

padding-bottom: var(--o3-spacing-4xs);

padding-block: var(--o3-spacing-4xs);

apaleslimghost · 2025-12-02T12:15:01Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.scss

+
+.n-layout__pro-coving-organisation:not(:empty)::before {
+  content: "|";
+  padding: 0 var(--o3-spacing-3xs);


suggestion:

Suggested change

padding: 0 var(--o3-spacing-3xs);

padding-inline: var(--o3-spacing-3xs);

apaleslimghost · 2025-12-02T12:17:08Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.tsx

+  return (
+    <div data-o3-brand="professional" className={`n-layout__pro-coving`}>
+      <div className={`n-layout__pro-coving-text`}>
+        <span className={`n-layout__pro-coving-brand`}>FT PROFESSIONAL</span>


issue: some screenreaders will read PROFESSIONAL out letter-by-letter. it should be FT Professional in the markup with text-transform: uppercase; in the styles.

ohh nice catch!

apaleslimghost · 2025-12-02T12:18:45Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.js

+    setTimeout(() => {
+      textContainer.classList.remove('is-fading-out')
+      textContainer.classList.remove('is-fading-in')
+    }, 510)


question: just so i understand the intended animation behaviour here, is it supposed to show FT PROFESSIONAL until the call to get the licence returns, then fade out for 0.5s, then fade back in with FT PROFESSIONAL | Organisation for 0.5s?

that's correct.. our designer preferred this approach with 1s animation rather than updating the content without animation

thanks! in that case i think the following logic would be easier to follow:

textContainer.classList.add('is-fading-out') textContainer.addEventListener('transitionend', () => { textContainer.classList.remove('is-fading-out') textContainer.classList.add('is-fading-in') requestAnimationFrame(() => { textContainer.classList.remove('is-fading-in') }) }, { once: true })

and then the finally isn't necessary, because is-fading-out/is-fading-in are added after the only thing that would throw

apaleslimghost · 2025-12-02T12:27:26Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.js

+  } catch (error) {
+    const isFetchError = error.message.includes('fetch')
+    const eventData = {
+      action: isFetchError ? 'fetch' : 'update',


suggestion: the only error thrown is by fetchLicenceInfo, so isFetchError is redundant (the message will always include "fetch")

oh yeah, I had that before adding the timeout and now the event listener... I will change the event listener to check for error on update so we can track that..

i don't think that's necessary, it's generally not possible for setting textContent on an element that exists to throw an error

apaleslimghost · 2025-12-02T12:28:35Z

packages/dotcom-ui-layout/src/components/professional/headerCoving.js

+
+  const coving = document.querySelector(`.n-layout__pro-coving`)
+  const textContainer = document.querySelector('.n-layout__pro-coving-text')
+  if (!coving || coving.length === 0) {


suggestion: querySelector either returns the element, or null; it won't ever return something with length: 0

Suggested change

if (!coving || coving.length === 0) {

if (!coving) {

and actually, this can be merged with the textContainer check:

Suggested change

if (!coving || coving.length === 0) {

if (!coving || !textContainer) {

good catch... forgot to remove after changing to querySelector

…imer

phelipemaia added 3 commits December 2, 2025 10:34

chore: add codeowner for new pro bar

1beced3

feat: add pro header coving to layout

2018718

feat: add Pro Bar to layout

f457564

We also added a new prop called options to layout where we can pass flags to it just like the header.

phelipemaia requested a review from a team as a code owner December 2, 2025 10:48

apaleslimghost reviewed Dec 2, 2025

View reviewed changes

phelipemaia added 6 commits December 3, 2025 10:11

feat: Pro coving animation based on transitionend event rather than t…

094dccd

…imer

fix: remove unnecessary checks when updating coving content

eed007a

fix: improve readability of coving animation

19c8d48

fix: avoid uppercase on brand placeholder due to accessibility

2e74218

feat: improve coving styling to use padding-block border-block

b7a0649

fix: fix fetchLicenceInfo to make request against pro-navigation

940bc8b

phelipemaia requested a review from apaleslimghost December 3, 2025 15:15

apaleslimghost approved these changes Dec 9, 2025

View reviewed changes

phelipemaia merged commit 7e88ed0 into main Dec 9, 2025
12 checks passed

phelipemaia deleted the ent-2784-pro-bar branch December 9, 2025 14:24

		padding-top: var(--o3-spacing-4xs);
		padding-bottom: var(--o3-spacing-4xs);

	padding-top: var(--o3-spacing-4xs);
	padding-bottom: var(--o3-spacing-4xs);
	padding-block: var(--o3-spacing-4xs);

	padding: 0 var(--o3-spacing-3xs);
	padding-inline: var(--o3-spacing-3xs);

	if (!coving \|\| coving.length === 0) {
	if (!coving \|\| !textContainer) {

Ent 2784 pro bar #1191

Ent 2784 pro bar #1191

Uh oh!

Conversation

phelipemaia commented Dec 2, 2025

Description

Checklist

Uh oh!

apaleslimghost left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apaleslimghost Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

apaleslimghost Dec 3, 2025 •

edited

Loading