[EuiPageHeader] Design and component enhancements

[ryankeairns]

The Observability design team has conducted a comprehensive review of page headers throughout their solution and found many inconsistencies. As an outcome, they are establishing new guidance and patterns that could be supported by changes at the EuiPageHeader level.

In working with the EUI/SharedUX designer, we are proposing a few changes:

1. Downsize the default title size
2. Downsize the default description size
3. Downsize the tab options (l, xlº to m, l)
4. Reduce the gap between rigthtside items/buttons
5. Consider adding a badge group prop

º Separately, consider deprecating or downsizing xl option for EuiTabs

cc:/ @kkurstak @ek-so

---

Reference screenshots

(1)title and (2)description size
Top: local branch, bottom: EUI current

(3)tabs

• Tabs are l (large) when a title is provided and xl (extra large) when not.

(4)rightside buttons gap
Top: Figma component, bottom: EUI current

(5)badges
Badges can be displayed via the existing children prop. Are they prevalent enough that we want to enforce placement and style further via a dedicated badges prop? This could also live between the title and description as seen in thee Obs designs below:

[ryankeairns]

I propose we move ahead with an EUI PR for items 1 through 4.

• Items 1-3 move us further away from Amsterdam and closer to Borealis.
• Item 4 is simply a 'ux bug'

If Obs, et al, feel 5 is worth pursuing, then we open an issue for the EUI eng team to triage and work.

[ryankeairns]

I'll add my vote for a separate badge bar below the title. @ek-so noted this could be useful in other places, such as Spaces, and the order makes sense to scan this prior to description which may only be useful initially/when unfamiliar with a screen.

[ryankeairns]

There are examples of neatly arranged badges via the existing children prop.

The page header...

https://github.com/elastic/kibana/blob/f2b5f3fe48564816d97ecd6342e5bb2d7f95f4c0/x-pack/solutions/observability/plugins/slo/public/pages/slo_details/slo_details.tsx#L128

...imports header_title which includes...

https://github.com/elastic/kibana/blob/f2b5f3fe48564816d97ecd6342e5bb2d7f95f4c0/x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/header_title.tsx#L36-L53

The design drawbacks being:

1. the extra spacing between the title and badges
2. and, more importantly, the lack of control. Each page must implement this flex group pattern manually within children

[ryankeairns]

🤔 Given the customization on some of these badges - it would be a lot to pass/handle - perhaps a new generic slot is all we need. In other words, add an optional metadata prop that provides the desired spacing with docs demonstrating badges as the prime use case.

Example take from SLO value badge:

      <EuiFlexItem grow={false}>
        {slo.summary.status === 'NO_DATA' ? (
          <EuiToolTip
            position="top"
            content={i18n.translate('xpack.slo.sloStatusBadge.noDataTooltip', {
              defaultMessage: 'It may take some time before the data is aggregated and available.',
            })}
          >
            <EuiBadge color={displayStatus[slo.summary.status].badgeColor}>
              {badgeDisplayText}
            </EuiBadge>
          </EuiToolTip>
        ) : (
          <EuiBadge color={displayStatus[slo.summary.status].badgeColor}>
            {badgeDisplayText}
          </EuiBadge>
        )}
      </EuiFlexItem>

[ryankeairns]

Draft PR covering items 1-3; need to put in a Kibana POC
#8445