Comments (6)
Reviewing the use cases for the current Spinner, it made sense to me why it wouldn't show over a Dialog. So I'm good with that. Thanks!
from design-system.
Hi @dmethvin-gov!
The spinner component that we have in the design system is meant to be flexible and simple enough to use in any context that the application needs—from inside buttons to being a placeholder for content. It would be outside the scope of its design to force it to display above everything else, and in fact we can't for the very reasons you've shown with your example (because browser-made dialogs render above everything else). This is an example of something we'd place in the realm of application responsibility.
But perhaps I'm not understanding the request. What is it you're trying to do exactly? This is not a pattern we've seen used so far in healthcare.gov or medicare.gov or any other apps that we've seen using the design system.
from design-system.
No, you understood correctly. I have a dialog and want a modal spinner to appear when something in the dialog causes it to need to appear. We don't want the user to interact with the dialog while it's in the middle of exchaning data with the server, for example.
I see your point about the spinner though, since the examples show it spinning on a button and in that case it should be contained by the element it's within. So our use case isn't a good match for it. We'll need to create a custom component for it.
from design-system.
Before responding, I want to confirm my read on the interaction presented
On submit, the spinner appears over everything on the page in order to disable any interactions on the page until the data status returned changes the state?
this could be the data submitted was a success, or it could be failed- try again.
What you are after is interaction guidance that does not disrupt the flow— is that correct?
from design-system.
@brentschneider Your description sounds accurate. The data submit/fetch are async and there is a central location in the app that manages whether the spinner needs to be shown or not. The user may take actions in the dialog that require remote data. In that case, the data in the dialog may need to be changed and we want to ensure the data user doesn't, for example, start editing a field that a few seconds later will be updated from the server.
from design-system.
Dave, I saw you closed this issue on GH.
Did you want to continue the convo over in the #cms-design-system-team slack?
from design-system.
Related Issues (20)
- Tooltips open on touchmove
- Migration Script Error HOT 5
- Request for documentation for a pattern and guidance for links/buttons that are document downloads, i.e. PDF HOT 1
- Inline form errors should indicate they're errors to screen readers HOT 4
- `inputRef` prop being passed into DOM when using <Dropdown /> HOT 6
- [Accessibility] h4 in footer component causes heading order issues HOT 1
- Calendar Picker Component allows for unlimited entry of numbers
- [Accessibility] healthcare.gov logo's svg elements are being read out by VoiceOver HOT 1
- Allow Alerts to take custom icons
- [Accessibility] Footer social icons do not provide an accessible name HOT 3
- Versions of @types/react greater than 18.2.21 cause TypeScript errors
- Wrong code on NPM for 7.0.7 release HOT 1
- Badge: Add variation that allows the badge to display block HOT 4
- Add more font weights for custom fonts HOT 1
- ChoiceList "hint" states Hints are their own component HOT 3
- Choice List hint wrapping text prematurely
- Inline error messages are dynamically appended, which breaks aria-live functionality HOT 1
- Dropdown component can't be accessed via mouse after being set via keyboard HOT 1
- Improve tab keyboard interactions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from design-system.