search

patternfly / patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
https://patternfly.org
MIT License
704 stars 96 forks source link

Menu toggle - toggle icon spacing #6458

Closed mcoker closed 1 month ago

mcoker commented 7 months ago

Follow up from https://github.com/patternfly/patternfly/pull/6441#pullrequestreview-1955693920

The menu toggle controls element has a min-width that creates the space around the toggle icon. That space doesn't match the intended design if the controls element is wider (due to its content) than the min-width. This is a similar issue to https://github.com/patternfly/patternfly/issues/6454

It's hard to tell what that spacing should be when looking at figma because the icon container in figma creates space in the component layout, and the icon container in figma should not be reflected in our component designs. So we need to get clarification from design on what the intended spacer is to use on the right edge of menu toggles between the icon and the edge of the component.

We can update from there, though I wonder if part of this solution will be ensuring some consistency in icon widths that may be part of https://github.com/patternfly/patternfly/issues/6454, too. One thought toward that might be to use the .fa-fw class that ships with FA, maybe at least for smaller icons? That way we don't have to style FA icons in the base PF styles, which I suspect aren't relevant to most react users, who are likely using @react-icons instead. The only rub with .fa-fw is it makes the width 1.25em, but hey - it's something!

github-actions[bot] commented 5 months ago

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.