[App Search] DataPanel & LoadingOverlay component tweaks #94251
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cee-chen
added
Feature:Plugins
release_note:skip
cee-chen
commented
Mar 10, 2021
Comment on lines
+61
to
+63
| <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}> | ||
| {iconType && ( | ||
| <EuiFlexItem> | ||
| <EuiFlexItem grow={false}> |
There was a problem hiding this comment.
This fixes the icon position. It should now look like so:
Note that the icon prop isn't currently in use however, but will be in an upcoming Curation PR.
cee-chen
commented
Mar 10, 2021
| </EuiFlexItem> | ||
| {action && <EuiFlexItem grow={false}>{action}</EuiFlexItem>} | ||
| </EuiFlexGroup> | ||
| <EuiSpacer /> | ||
| {children} | ||
| {isLoading && <LoadingOverlay />} |
There was a problem hiding this comment.
This is what the LoadingOverlay should eventually look like when in use by the Curation view:
This should look very similar to the current loading indicator for the promoted documents section in the standalone UI.
There was a problem hiding this comment.
My name is Davey and I approve of this loading overlay. 😀
cee-chen
force-pushed
the
curation-panel-setup
branch
from
dadebcb to
5494e76
Compare
- should have an opacity'd overlay to hide content underneath - specify z-index
- update CSS to contain LoadingOverlay - add isLoading prop
cee-chen
force-pushed
the
curation-panel-setup
branch
from
5494e76 to
7d61dd5
Compare
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
JasonStoltz
approved these changes
Mar 10, 2021
|
Thanks y'all! 🎉 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 10, 2021
* DataPanel: fix icons showing unaligned & w/ too much flex space * LoadingOverlay: add new loading component w/ overlay - should have an opacity'd overlay to hide content underneath - specify z-index * DataPanel: add flag to display a LoadingOverlay - update CSS to contain LoadingOverlay - add isLoading prop
kibanamachine
added a commit
that referenced
this pull request
Mar 10, 2021
…4328) * DataPanel: fix icons showing unaligned & w/ too much flex space * LoadingOverlay: add new loading component w/ overlay - should have an opacity'd overlay to hide content underneath - specify z-index * DataPanel: add flag to display a LoadingOverlay - update CSS to contain LoadingOverlay - add isLoading prop Co-authored-by: Constance <[email protected]>
12 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR is setup for upcoming Curation work/PRs.
isLoadingprop to show a LoadingOverlay componentScreenshots will be included in the comments below.
Checklist
Accessibility note
Just want to that the below items are potential accessibility point of weaknesses in the app:
Reasons:
aria-busyis a sufficient indicator for nowTL;DR - this isn't a perfect or accessible implementation of a loading indicator and is mostly visual-focused - it's definitely a tech debt item to re-evaluate this at some pointer for better screen reader and keyboard compatibility, possibly via the
inertproperty in the future.