Add new EuiSkeleton components; deprecate EuiLoadingContent
#6558
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
* Setup EuiSkeleton files and folders structure * Moved Skeleton under the Display side menu category * Component variants setup * feat: skeleton setup [text, rect, circle] * feat: added skeleton item draft and other minors * chore: renamed sizes * feat: added Heading in favor of Rect component * Update src-docs/src/views/skeleton/skeleton_example.js Co-authored-by: Elizabet Oliveira <[email protected]> * Update src-docs/src/views/skeleton/skeleton_example.js Co-authored-by: Elizabet Oliveira <[email protected]> * Update src-docs/src/views/skeleton/skeleton_example.js Co-authored-by: Elizabet Oliveira <[email protected]> * chore: wrapped p with EuiText and indentation * chore: removed useless styles * chore: centralized and renamed skeleton animation keyfram * refactor: renamed euiSkeletonHeading to euiSkeletonTitle and updated sizes with euiTitle ones * chore: renamed EuiSkeletonItem to EuiSkeletonRectangle * Remove hard-coded `euiSkeletonTitleStyles` heights map - in favor of calling `euiTitle`'s font utils and grabbing `lineHeight` directly from it * [docs] Add EuiSwitch toggle to EuiSkeletonTitle tests - this toggle help demonstrates to consumers how to conditionally switch from loading to non-loading components, and also allows us to test heights * Add `size` prop to `EuiSkeletonText` + add calculations & offsets to account for text scale + update docs to allow changing size & toggle between text to test visual behavior * [docs] Add loading toggle for EuiSkeletonCircle + prettier fixes * [PR feedback] Fix incorrect BEM naming; remove extra modifier classes - BEM: `__` should only be used for children/descendants, and these are parent-level styles and should use regular camelCasing - modifier classes removal: we're moving away from setting these extra CSS classes, which do not have any actual CSS tied to them (since we're using Emotion CSS-in-JS instead). The top-level className remains as an API for consumers to hook into for overrides if needed. * [PR feedback] DRY out all `aria`/a11y attributes to reusable helper - not all components were correctly receiving all the aria attrs they should have been - this helper fixes that * [PR feedback] Rename` _skeleton` to `utils`, DRY out repeated gradient CSS - `utils` better matches naming/architecture convention in other components (+ ignore i18n complaint) + tweak gradient size and animation for circle and rectangle components to look a bit better + rename global animation to a more generic name/usage * [PR feedback] DRY out repeated CSS between modifiers - should exist in the base styles instead + bonus - DRY out `logicalSizeCSS` to only require 1 input if both sides are the same * [PR feedback] Avoid dynamic wildcard Emotion classes - use `style` instead The reason for this is performance - Emotion generates a completely new hash/className for every single possible permutation of width/height passed to it. We want to avoid this for wildcard prop-based styles and use inline styles instead * [PR feedback] Improve/add unit tests + cover all props + prefer RTL over Enzyme (part of ongoing migration) + fix type issue found during testing * [docs] Add toggle to EuiSkeletonRectangle example * [PR feedback] EuiSkeletonRectangle tweaks - allow numbers as well as strings - now that we're using inline `style`s for the dimensions, React accepts numbers as well (which matches EuiImage API) - remove image URI in favor of a picsum link - set width/height on img to prevent page jumping * [PR feedback] Tweak EuiSkeletonText typing - for whatever reason, using `|` prints the line numbers in non-ascending order in the props table - using an array and `as const` fixes this, and is reusable in tests * [PR feedback] Convert docs files to Typescript + improve mobile display of demos * [PR feedback] Documentation copy + order - move EuiSkeletonCircle slightly lower in docs order - EuiSkeletonText is likely going to be more popular since it already exists - misc copy tweaks * [Docs] Set up playgrounds * DRY out aria-label further - since `euiLoadingStrings.ariaLabel` already exists, just reuse that instead of making our translators re-translate the same string * Add fix for Safari workaround - note: this is already broken on prod as well for `EuiLoadingContent` * Changelog * chore: comment typo and zero value for border radius --------- Co-authored-by: Elizabet Oliveira <[email protected]> Co-authored-by: Constance Chen <[email protected]>
cee-chen
changed the title
EuiSkeleton componentsEuiSkeleton components; deprecate EuiLoadingContent
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
* Deprecate EuiLoadingContent + dogfood EuiSkeletonText * Remove unnecessary tests - leave a basic `is rendered` test in just to confirm the content, but should be deleted in the future * Update documentation with deprecation notice * changelog
|
Once staging is done updating, I'm going to take another QA pass against the checklist and if everything checks out, merge this in. CC @miukimiu in case you want to take another pass as well |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
…ding` API handling (#6562) * Create reusable `EuiSkeletonLoading` component - for DRYing out correct accessibility attributes, wrappers, and a simpler loading API * Convert `EuiSkeletonText` to dogfood new `EuiSkeletonLoading` wrapper + update docs/example to how `isLoading`/`children` behavior * Convert `EuiSkeletonTitle` to dogfood new `EuiSkeletonLoading` wrapper + update docs/example to how `isLoading`/`children` behavior * Convert `EuiSkeletonRectangle` to dogfood new `EuiSkeletonLoading` wrapper + update docs/example to how `isLoading`/`children` behavior * Convert `EuiSkeletonRectangle` to dogfood new `EuiSkeletonLoading` wrapper + update docs/example to how `isLoading`/`children` behavior * Add docs example + a11y callout for `EuiSkeletonLoading` * Fix annoying Safari bug popping up again - the new `aria-busy` wrapper appears to make the `z-index` workaround not work, so use `isolation` (https://developer.mozilla.org/en-US/docs/Web/CSS/isolation) instead to force the necessary stacking context * changelog * [PR feedback] use `div` instead of `section` (or in this case, `EuiPanel` for looks
- Missed in #6562 - Playground still isn't perfect; but good enough for now
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
|
@miukimiu I'm not sure how the community Figma link works, but it looks like the new skeleton components aren't synced to it yet - any chance you could check it and make sure it's all good to go? I'm going to merge this PR in without it, but would super appreciate making sure we get that last checkbox taken care of post-merge! |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6558/ |
|
@AndreaDellaValle woohoo - this is shipped and should be landing in our next EUI release tomorrow! Thank you again for the fantastic community contribution, it's incredibly appreciated! |
|
Amazing @cee-chen ! I'm super happy to see this merged into EUI 💜 |
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 merges a feature branch of already-reviewed PRs. Please see individual PRs for more details:
EuiLoadingContentin favor ofEuiSkeletonText#6557isLoadingAPI handling #6562QA
General checklist
@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examples- [ ] A changelog entry exists and is marked appropriatelyN/A - changelogs were added in individual PRs