Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add oui-overflow* CSS utilities #774

Open
BSFishy opened this issue May 23, 2023 · 1 comment
Open

Add oui-overflow* CSS utilities #774

BSFishy opened this issue May 23, 2023 · 1 comment
Labels
enhancement New feature or request

Comments

@BSFishy
Copy link
Contributor

BSFishy commented May 23, 2023

Is your feature request related to a problem? Please describe.

Currently, there is no way to apply the overflow CSS property in OUI. This property is extremely useful in determining what to do when the contents of a container overflow out of the container.

Describe the solution you'd like

The simplest and cleanest way would be to add a few new CSS utilities. These would allow setting overflow to a few settings: visible, hidden, scroll, and auto. Additionally, individual overflow-x and overflow-y utilities should be made available too.

.oui-overflowVisible { overflow: visible !important; }
.oui-overflowHidden { overflow: hidden !important; }
.oui-overflowScroll { overflow: scroll !important; }
.oui-overflowAuto { overflow: auto !important; }

.oui-overflowXVisible { overflow-x: visible !important; }
.oui-overflowXHidden { overflow-x: hidden !important; }
.oui-overflowXScroll { overflow-x: scroll !important; }
.oui-overflowXAuto { overflowx: auto !important; }

.oui-overflowYVisible { overflow-y: visible !important; }
.oui-overflowYHidden { overflow-y: hidden !important; }
.oui-overflowYScroll { overflow-y: scroll !important; }
.oui-overflowYAuto { overflow-y: auto !important; }

Describe alternatives you've considered

I also considered creating a utility component to achieve this. It might look something like this:

return (
  <OuiOverflow direction="both" value="auto">
    {/* Contents with overflow: auto set */}
  </OuiOverflow>
);

However, given the simplicity of the need, I think having an entire component for this would be extremely overkill and not worth the maintaining effort.

Additional context

This gap was identified as part of an OUI compliance audit: opensearch-project/OpenSearch-Dashboards#4122

@joshuarrrr
Copy link
Member

The problem with a utility class is that it offloads the usage burden to developers and implementers. I think many of these cases where we want particular overflow behavior are themselves a bit more generalizable (such as resizable panels with min-sized content). Before we decide one way or another, I think we want to bring visual examples from all the audits of plugins which are using specific overflow behaviors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Todo
Development

No branches or pull requests

2 participants