Giters

cerner / terra-core

Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.

Home Page:http://terra-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[loading-overlay] Missing spinner size and container padding props

git-nandor-epam opened this issue · comments

commented

Bug Report

When creating Loading Overlay relative to its container it seems to not adapts correctly. The spinner icon always fixed in one size with fixed paddings.

Description

Default settings causing cropped display on small containers.
No available options for size and paddings.
select-loading-overlay-02

Currently we have to override the terra styles and relies on the internal DOM structure of the loading overlay which isn't safe.

Steps to Reproduce

Add loading overlay to small container.

Additional Context / Screenshots

Expected Behavior

Needed options for proper sizing: spinner icon svg height, inner div first child paddings (see possible solution image below)
select-loading-overlay-01

Possible Solution

Add Loading Overlay Props for spinner icon svg height and paddings, to avoid custom css like this:
scss-override

Environment

  • Component Name and Version: terra-overlay/lib/LoadingOverlay v3.69.0
  • Browser Name and Version: All supported browsers
  • Node/npm Version: [e.g. Node 8/npm 5] -
  • Webpack Version: -
  • Operating System and version (desktop or mobile): Windows 10 desktop

@ Mentions

commented

Thank your @git-nandor-epam, after reviewing your request, we do not consider this a bug, as the intent for the LoadingOverlay component in terra-overlay is not designed for or intended for use in 100% of every loading situation always. It was created for pages and containers (modals, fixed panels, etc) and opening up for sizing override would allow for potential inconsistency as spinners could be sizes uniquely per implementing content team.

UX also would not expect to see this same Terra loading-overlay component used as the discrete indication for specific UI elements like your reference image (buttons, forms elements like the dropdown select, etc.) and they would need their own internal way to show loading or progress, as the interaction details may need to be applied uniquely and accessibility details most certainly would not be the same. Instead, each targeted component will need to be requested to have an enhancement to add a loading state and appropriate visual indication.

My recommendation would be to work with your UX designer to bring this request to the Cerner UX Foundations team to review standardizing the approach on how to add loading indication to the form-select (or any component needing the pattern) since it has also been done in alternate ways in the past, and for it receive design and accessibility guidance needed to proceed for best consistency.

I will plan to close this issue unless you have any questions.

commented

Closing. Can be re-opened in the future if UX determines setting a max-size with auto-shrinking for smaller containers is an appropriate use of the LoadingOverlay. Additional tests for if text was also provided how that should correctly render without causing overflow or truncation.