markcaron commented 2 years ago

Component name:

There are several issues we've found in implementing the new PFE Nav on RHDC.

Bugs / updates

1. Force break text blocks being stripped

Our current nav structure utilizes <span class=”text-block”></span> around some of the text/labels in the nav. These appear to be getting stripped—potentially as text is being moved from lightDOM to shadowDOM. This is causing line break issues with longer labels, especially when translated.

2. Too much space between stacked CTAs, including the bottom margin on the last CTA.

In Chrome at 767px wide and below, as soon as the CTAs start stacking, it feels like we have too much space between the CTAs. See bottom of the Red Hat & open source menu. Can that be tightened up? Maybe 32px between each of them?

Last CTA example:

3. CTAs bumping against each other at certain breakpoints.

This is likely related to # 2 above. In Chrome and FF at 469px wide “Search jobs” is butting up against the primary CTA. Wondering about defaulting to stacking multiple CTAs, especially given different lengths in different languages.

4. Increased font-size on mobile's accordion (from previous version)

New version on the left:

5. On medium to smaller screens, allow for 2 columns in dropdown at breakpoint

At 767px and above, we have 3 columns. Then below that it drops to 1 column. On the previous version, there was a step for 2 columns in between (767px-576px). It’d save some scrolling.

6. Increased spacing between list items in drop down.

See above screenshot in # 5.

Was it intentional to increase the spacing between list items? I can see the argument for making it more readable, but it’ll require more scrolling. I’m thinking about the super long Product A-Z that’s coming.

7. Mobile views overlap.

mobile (1)

Component's handling of long copy on mobile nav, copy overlap with >, instead of wrapping.

8. Decrease padding in nested accordion on mobile to get more horizontal space.

Notes from System UX discovery meeting on this:

2 CSS variables control padding - 32px surrounding nav & search bar, lessen that. 16px is the norm.
Allen is modifying the CSS variable as a "bandaid" for now- trying 16px padding option instead of 32px.
We'll need to "undo" this once we implement at the component level
Notes: https://docs.google.com/document/d/17iSx7gVr6scH4AcQo4nsaGTCy8lOo2hLl2dVn00Zpss/edit#bookmark=id.go2uwaexcuq1

Let me know if you have questions. Thanks!

markcaron commented 2 years ago

CC @wesruv @heyMP @methomps

bennypowers commented 2 years ago

Should we reopen this in redhat-ux/red-hat-design-system?

methomps commented 2 years ago

Attempt to link a related issue with this larger feature of pfe-nav 2.0 enhancements #2023 #238

methomps commented 2 years ago

I’d think so, if that’s where we are migrating prioritized work eligible to “pick up next”.

Sent from my iPhone

On May 11, 2022, at 3:02 AM, Benny Powers @.***> wrote:

Should we reopen this in redhat-ux/red-hat-design-system?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

patternfly / patternfly-elements

[bug] PFE Nav — multiple issues, mostly style adjustments #2023