Skip to content

Commit 0254e05

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/1.38.2 into main branch (#807)
* import skeleton.css directly to LoadingSkeleton (#806)
1 parent 5b36bbc commit 0254e05

File tree

4 files changed

+317
-2
lines changed

4 files changed

+317
-2
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "1.38.1",
3+
"version": "1.38.2",
44
"dependencies": {
55
"react-bootstrap": "^2.5.0",
66
"react-loading-skeleton": "^3.1.0",

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7679,6 +7679,268 @@ exports[`Storyshots Components/LoadingOverlay Default 1`] = `
76797679
</div>
76807680
`;
76817681

7682+
exports[`Storyshots Components/LoadingSkeleton Card Content 1`] = `
7683+
<div
7684+
style={
7685+
Object {
7686+
"padding": "1rem",
7687+
}
7688+
}
7689+
>
7690+
<section
7691+
className="Card Card--md"
7692+
>
7693+
<div
7694+
className="Card__header"
7695+
>
7696+
<h2
7697+
className="Card__title"
7698+
>
7699+
Invite Team members
7700+
</h2>
7701+
</div>
7702+
<h3
7703+
className="Card__subtitle"
7704+
>
7705+
Research is better together 🕵️🕵. Invite as many team members as you'd like so they can view and copy any project.
7706+
</h3>
7707+
<span
7708+
aria-busy={true}
7709+
aria-live="polite"
7710+
>
7711+
<span
7712+
className="react-loading-skeleton LoadingSkeleton"
7713+
style={
7714+
Object {
7715+
"--base-color": "#E1E1E1",
7716+
"borderRadius": "0.25rem",
7717+
"width": "100%",
7718+
}
7719+
}
7720+
>
7721+
‌
7722+
</span>
7723+
<br />
7724+
<span
7725+
className="react-loading-skeleton LoadingSkeleton"
7726+
style={
7727+
Object {
7728+
"--base-color": "#E1E1E1",
7729+
"borderRadius": "0.25rem",
7730+
"width": "100%",
7731+
}
7732+
}
7733+
>
7734+
‌
7735+
</span>
7736+
<br />
7737+
<span
7738+
className="react-loading-skeleton LoadingSkeleton"
7739+
style={
7740+
Object {
7741+
"--base-color": "#E1E1E1",
7742+
"borderRadius": "0.25rem",
7743+
"width": "100%",
7744+
}
7745+
}
7746+
>
7747+
‌
7748+
</span>
7749+
<br />
7750+
</span>
7751+
<br />
7752+
<span
7753+
aria-busy={true}
7754+
aria-live="polite"
7755+
>
7756+
<span
7757+
className="react-loading-skeleton LoadingSkeleton"
7758+
style={
7759+
Object {
7760+
"--base-color": "#E1E1E1",
7761+
"borderRadius": "0.25rem",
7762+
"width": "100%",
7763+
}
7764+
}
7765+
>
7766+
‌
7767+
</span>
7768+
<br />
7769+
<span
7770+
className="react-loading-skeleton LoadingSkeleton"
7771+
style={
7772+
Object {
7773+
"--base-color": "#E1E1E1",
7774+
"borderRadius": "0.25rem",
7775+
"width": "100%",
7776+
}
7777+
}
7778+
>
7779+
‌
7780+
</span>
7781+
<br />
7782+
<span
7783+
className="react-loading-skeleton LoadingSkeleton"
7784+
style={
7785+
Object {
7786+
"--base-color": "#E1E1E1",
7787+
"borderRadius": "0.25rem",
7788+
"width": "calc(100% * 0.5)",
7789+
}
7790+
}
7791+
>
7792+
‌
7793+
</span>
7794+
<br />
7795+
</span>
7796+
</section>
7797+
</div>
7798+
`;
7799+
7800+
exports[`Storyshots Components/LoadingSkeleton Circle 1`] = `
7801+
<div
7802+
style={
7803+
Object {
7804+
"padding": "1rem",
7805+
}
7806+
}
7807+
>
7808+
<span
7809+
aria-busy={true}
7810+
aria-live="polite"
7811+
>
7812+
<span
7813+
className="react-loading-skeleton LoadingSkeleton"
7814+
style={
7815+
Object {
7816+
"--base-color": "#E1E1E1",
7817+
"borderRadius": "50%",
7818+
"height": 44,
7819+
"width": 44,
7820+
}
7821+
}
7822+
>
7823+
‌
7824+
</span>
7825+
<br />
7826+
</span>
7827+
</div>
7828+
`;
7829+
7830+
exports[`Storyshots Components/LoadingSkeleton Default 1`] = `
7831+
<div
7832+
style={
7833+
Object {
7834+
"padding": "1rem",
7835+
}
7836+
}
7837+
>
7838+
<span
7839+
aria-busy={true}
7840+
aria-live="polite"
7841+
>
7842+
<span
7843+
className="react-loading-skeleton LoadingSkeleton"
7844+
style={
7845+
Object {
7846+
"--base-color": "#E1E1E1",
7847+
"borderRadius": "0.25rem",
7848+
"width": "100%",
7849+
}
7850+
}
7851+
>
7852+
‌
7853+
</span>
7854+
<br />
7855+
</span>
7856+
</div>
7857+
`;
7858+
7859+
exports[`Storyshots Components/LoadingSkeleton Height And Width 1`] = `
7860+
<div
7861+
style={
7862+
Object {
7863+
"padding": "1rem",
7864+
}
7865+
}
7866+
>
7867+
<span
7868+
aria-busy={true}
7869+
aria-live="polite"
7870+
>
7871+
<span
7872+
className="react-loading-skeleton LoadingSkeleton"
7873+
style={
7874+
Object {
7875+
"--base-color": "#E1E1E1",
7876+
"borderRadius": "0.25rem",
7877+
"height": "44px",
7878+
"width": "200px",
7879+
}
7880+
}
7881+
>
7882+
‌
7883+
</span>
7884+
<br />
7885+
</span>
7886+
</div>
7887+
`;
7888+
7889+
exports[`Storyshots Components/LoadingSkeleton Multi Line 1`] = `
7890+
<div
7891+
style={
7892+
Object {
7893+
"padding": "1rem",
7894+
}
7895+
}
7896+
>
7897+
<span
7898+
aria-busy={true}
7899+
aria-live="polite"
7900+
>
7901+
<span
7902+
className="react-loading-skeleton LoadingSkeleton"
7903+
style={
7904+
Object {
7905+
"--base-color": "#E1E1E1",
7906+
"borderRadius": "0.25rem",
7907+
"width": "100%",
7908+
}
7909+
}
7910+
>
7911+
‌
7912+
</span>
7913+
<br />
7914+
<span
7915+
className="react-loading-skeleton LoadingSkeleton"
7916+
style={
7917+
Object {
7918+
"--base-color": "#E1E1E1",
7919+
"borderRadius": "0.25rem",
7920+
"width": "100%",
7921+
}
7922+
}
7923+
>
7924+
‌
7925+
</span>
7926+
<br />
7927+
<span
7928+
className="react-loading-skeleton LoadingSkeleton"
7929+
style={
7930+
Object {
7931+
"--base-color": "#E1E1E1",
7932+
"borderRadius": "0.25rem",
7933+
"width": "100%",
7934+
}
7935+
}
7936+
>
7937+
‌
7938+
</span>
7939+
<br />
7940+
</span>
7941+
</div>
7942+
`;
7943+
76827944
exports[`Storyshots Components/Modal Danger Modal 1`] = `
76837945
<div
76847946
style={

‎src/LoadingSkeleton/LoadingSkeleton.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44

55
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
6-
import 'react-loading-skeleton/dist/skeleton.css';
76

87
import colors from '../Styles/colors/palette';
98

9+
import './LoadingSkeleton.scss';
10+
1011
const LoadingSkeleton = ({ className, ...props }) => (
1112
<SkeletonTheme baseColor={colors.UX_GRAY_300}>
1213
<Skeleton

‎src/LoadingSkeleton/LoadingSkeleton.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Keep these default styles below.
2+
// This is copied from https://github.com/dvtng/react-loading-skeleton/blob/master/src/skeleton.css
3+
// We have some conflicting order webpack issues when used on 'rails-server'
4+
5+
@keyframes react-loading-skeleton {
6+
100% {
7+
transform: translateX(100%);
8+
}
9+
}
10+
11+
.react-loading-skeleton {
12+
--base-color: #ebebeb;
13+
--highlight-color: #f5f5f5;
14+
--animation-duration: 1.5s;
15+
--animation-direction: normal;
16+
--pseudo-element-display: block; /* Enable animation */
17+
18+
background-color: var(--base-color);
19+
20+
width: 100%;
21+
border-radius: 0.25rem;
22+
display: inline-flex;
23+
line-height: 1;
24+
25+
position: relative;
26+
overflow: hidden;
27+
z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
28+
}
29+
30+
.react-loading-skeleton::after {
31+
content: ' ';
32+
display: var(--pseudo-element-display);
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
height: 100%;
38+
background-repeat: no-repeat;
39+
background-image: linear-gradient(
40+
90deg,
41+
var(--base-color),
42+
var(--highlight-color),
43+
var(--base-color)
44+
);
45+
transform: translateX(-100%);
46+
47+
animation-name: react-loading-skeleton;
48+
animation-direction: var(--animation-direction);
49+
animation-duration: var(--animation-duration);
50+
animation-timing-function: ease-in-out;
51+
animation-iteration-count: infinite;
52+
}

0 commit comments

Comments
 (0)