From 603642d3cb34d27dfd86ee93865b04c4ac008234 Mon Sep 17 00:00:00 2001 From: Neele Barthel Date: Thu, 14 Feb 2019 14:10:23 -0500 Subject: [PATCH 1/4] [Skeleton] Add skeleton for thumbnails --- UNRELEASED.md | 2 + src/components/SkeletonThumbnail/README.md | 70 +++++++++++++++++++ .../SkeletonThumbnail/SkeletonThumbnail.scss | 21 ++++++ .../SkeletonThumbnail/SkeletonThumbnail.tsx | 22 ++++++ src/components/SkeletonThumbnail/index.ts | 4 ++ .../tests/SkeletonThumbnail.test.tsx | 10 +++ src/components/index.ts | 5 ++ 7 files changed, 134 insertions(+) create mode 100644 src/components/SkeletonThumbnail/README.md create mode 100644 src/components/SkeletonThumbnail/SkeletonThumbnail.scss create mode 100644 src/components/SkeletonThumbnail/SkeletonThumbnail.tsx create mode 100644 src/components/SkeletonThumbnail/index.ts create mode 100644 src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx diff --git a/UNRELEASED.md b/UNRELEASED.md index 35dcf24e3c1..7407d8f67c8 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### New components +- `SkeletonThumbnail` for representing thumbnails in loading state + ### Enhancements - Updates `TopBar.UserMenu` interaction states styling ([#1006](https://github.com/Shopify/polaris-react/pull/1006)) diff --git a/src/components/SkeletonThumbnail/README.md b/src/components/SkeletonThumbnail/README.md new file mode 100644 index 00000000000..fde4eae77ef --- /dev/null +++ b/src/components/SkeletonThumbnail/README.md @@ -0,0 +1,70 @@ +--- +name: Skeleton thumbnail +category: Feedback indicators +? releasedIn +keywords: + - SkeletonThumbnail + - skeleton + - loading + - page +--- + +# Skeleton image + +Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Can be used for thumbnails in or outside of a card. + +--- + +## Best practices + +Skeleton thumbnail component should: + +- Try to match the size of the thumbnail to the content being loaded so it gives an accurate representation. + +--- + +## Content guidelines + +### Skeleton body text + + + +#### Do + +#### Don’t + + + +--- + +## Examples + +### Medium thumbnail + +Use this component to represent medium thumbnails. + +```jsx + +``` + +### Large thumbnail + +Use this component to represent large thumbnails. + +```jsx + +``` + +### Small thumbnail + +Use this component to represent small thumbnails. + +```jsx + +``` + +--- + +## Related components + +- Use this component with [Skeleton display text](/components/feedback-indicators/skeleton-display-text) to represent the content of a card while it’s loading. diff --git a/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/src/components/SkeletonThumbnail/SkeletonThumbnail.scss new file mode 100644 index 00000000000..d5feaccbe63 --- /dev/null +++ b/src/components/SkeletonThumbnail/SkeletonThumbnail.scss @@ -0,0 +1,21 @@ +@mixin skeleton-thumbnail-size($size) { + height: $size; + width: $size; +} + +.SkeletonThumbnail { + @include skeleton-shimmer; + @include skeleton-content; +} + +.sizeSmall { + @include skeleton-thumbnail-size(rem(30px)); +} + +.sizeMedium { + @include skeleton-thumbnail-size(rem(40px)); +} + +.sizeLarge { + @include skeleton-thumbnail-size(rem(50px)); +} diff --git a/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx b/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx new file mode 100644 index 00000000000..0f5dbb74309 --- /dev/null +++ b/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import {classNames, variationName} from '@shopify/react-utilities/styles'; +import styles from './SkeletonThumbnail.scss'; + +export type Size = 'small' | 'medium' | 'large'; + +export interface Props { + /** + * Size of the thumbnail + * @default 'medium' + */ + size?: Size; +} + +export default function SkeletonThumbnail({size = 'medium'}: Props) { + const className = classNames( + styles.SkeletonThumbnail, + size && styles[variationName('size', size)], + ); + + return
; +} diff --git a/src/components/SkeletonThumbnail/index.ts b/src/components/SkeletonThumbnail/index.ts new file mode 100644 index 00000000000..f638a10b69a --- /dev/null +++ b/src/components/SkeletonThumbnail/index.ts @@ -0,0 +1,4 @@ +import SkeletonThumbnail from './SkeletonThumbnail'; + +export {Props} from './SkeletonThumbnail'; +export default SkeletonThumbnail; diff --git a/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx b/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx new file mode 100644 index 00000000000..cf618a41d44 --- /dev/null +++ b/src/components/SkeletonThumbnail/tests/SkeletonThumbnail.test.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import {mountWithAppProvider} from 'test-utilities'; +import SkeletonThumbnail from '../SkeletonThumbnail'; + +describe('', () => { + it('renders', () => { + const skeletonThumbnail = mountWithAppProvider(); + expect(skeletonThumbnail.exists()).toBe(true); + }); +}); diff --git a/src/components/index.ts b/src/components/index.ts index 0429461eca7..d1475f93140 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -294,6 +294,11 @@ export { Props as SkeletonDisplayTextProps, } from './SkeletonDisplayText'; +export { + default as SkeletonThumbnail, + Props as SkeletonThumbnailProps, +} from './SkeletonThumbnail'; + export {default as ProgressBar, Props as ProgressBarProps} from './ProgressBar'; export {default as Indicator, Props as IndicatorProps} from './Indicator'; From 677393e9ec309d73e1af408548468f8b840164bf Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Fri, 15 Feb 2019 09:15:49 -0500 Subject: [PATCH 2/4] Update src/components/SkeletonThumbnail/README.md Co-Authored-By: helloneele --- src/components/SkeletonThumbnail/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SkeletonThumbnail/README.md b/src/components/SkeletonThumbnail/README.md index fde4eae77ef..b10d40608de 100644 --- a/src/components/SkeletonThumbnail/README.md +++ b/src/components/SkeletonThumbnail/README.md @@ -11,7 +11,7 @@ keywords: # Skeleton image -Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Can be used for thumbnails in or outside of a card. +Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card. --- From d33391049aa1898c0e5bc722c432dbef9a20da3c Mon Sep 17 00:00:00 2001 From: Neele Barthel Date: Fri, 15 Feb 2019 09:36:06 -0500 Subject: [PATCH 3/4] update version in README.md --- src/components/SkeletonThumbnail/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SkeletonThumbnail/README.md b/src/components/SkeletonThumbnail/README.md index b10d40608de..2f4aeef852b 100644 --- a/src/components/SkeletonThumbnail/README.md +++ b/src/components/SkeletonThumbnail/README.md @@ -1,7 +1,7 @@ --- name: Skeleton thumbnail category: Feedback indicators -? releasedIn +releasedIn: 3.7.2 keywords: - SkeletonThumbnail - skeleton From 34833ef49cb1414353468f5dfadbefb25561f88d Mon Sep 17 00:00:00 2001 From: Neele Barthel Date: Tue, 19 Feb 2019 12:14:02 -0500 Subject: [PATCH 4/4] update README.md --- src/components/SkeletonThumbnail/README.md | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/SkeletonThumbnail/README.md b/src/components/SkeletonThumbnail/README.md index 2f4aeef852b..f30bba5a7fb 100644 --- a/src/components/SkeletonThumbnail/README.md +++ b/src/components/SkeletonThumbnail/README.md @@ -23,20 +23,6 @@ Skeleton thumbnail component should: --- -## Content guidelines - -### Skeleton body text - - - -#### Do - -#### Don’t - - - ---- - ## Examples ### Medium thumbnail