feat: Adds new tokens to `Skeleton` #171

lucasfp13 · 2022-07-12T13:28:29Z

What's the purpose of this pull request?

This PR intends to apply new tokens to Skeleton and its related components, based on the new Theming structure: new scoped tokens linked to global ones.

It also uses FastStore UI's Skeleton component and renames SkeletonElement to Skeleton for a better code understanding/legibility.

How does it work?

This PR uses local variables to parameterize the Skeleton and its related components' properties, then connects these scoped tokens to the global ones.

How to test it?

These changes should not affect the skeletons' behavior. It can be tested through browser developer tools, applying a network throttling to simulate, for instance, a slow 3g connection.

skeleton.mov

Checklist

Changelog

Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#4)

PR Description

Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

PR description

vercel · 2022-07-12T13:28:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nextjs-store-storybook	✅ Ready (Inspect)	Visit Preview	Jul 25, 2022 at 1:09PM (UTC)

vtex-sites · 2022-07-15T21:42:52Z

Preview is ready

This pull request generated a Preview

👀 Preview: https://preview-171--nextjs.preview.vtex.app
🔬 Go deeper by inspecting the Build Logs
📝 based on commit 2cfbe7a

vtex-sites · 2022-07-15T22:18:41Z

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 2cfbe7a

Lighthouse Report by page
📎 /
📎 /apple-magic-mouse/p
📎 /office

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

ArthurTriis1

Good! I left just one comment. But we won't add a story for Skeleton?

lucasfp13 · 2022-07-19T15:19:49Z

Good! I left just one comment. But we won't add a story for Skeleton?

We will, I'm already working on them 🔛

eduardoformiga

Amazing Job, @lucasfp13!
You also included ProductShelf 🎉

Sometimes I'm in doubt if we need some tokens, especially the ones with width or height with 100% or 0 values.

src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss

src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

...ponents/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss

src/components/skeletons/Shimmer/shimmer.module.scss

src/components/skeletons/Skeletons.stories.mdx

hellofanny · 2022-07-20T08:32:49Z

src/components/skeletons/Skeletons.stories.mdx

+
+# Skeletons
+
+This feature improves the store's experience and perceived performance through loading placeholders.


Why are we classifying skeletons components as a feature?

Nice question! I also wonder about it.

I discussed this with @renatamottam, and it makes sense to be a feature for her, also I agree that it is ok so then we group all skeletons

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss

renatamottam

LGTM!

lucasfp13 self-assigned this Jul 12, 2022

vercel bot had a problem deploying to Preview July 12, 2022 13:31 Failure

vercel bot had a problem deploying to Preview July 12, 2022 17:15 Failure

vercel bot had a problem deploying to Preview July 12, 2022 20:17 Failure

lucasfp13 added Chore General tasks. Features New feature or request and removed Chore General tasks. labels Jul 15, 2022

lucasfp13 force-pushed the feat/FS-269-add-new-tokens-to-skeleton branch from 6e2d583 to 4002844 Compare July 15, 2022 21:40

vercel bot temporarily deployed to Preview July 15, 2022 21:41 Inactive

lucasfp13 marked this pull request as ready for review July 15, 2022 22:15

ArthurTriis1 reviewed Jul 18, 2022

View reviewed changes

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss Outdated Show resolved Hide resolved

ArthurTriis1 reviewed Jul 18, 2022

View reviewed changes

lucasfp13 force-pushed the feat/FS-269-add-new-tokens-to-skeleton branch from 4002844 to 3fbd4f9 Compare July 19, 2022 18:00

vercel bot temporarily deployed to Preview July 19, 2022 18:01 Inactive

eduardoformiga reviewed Jul 19, 2022

View reviewed changes

hellofanny reviewed Jul 20, 2022

View reviewed changes

src/components/skeletons/Skeletons.stories.mdx Outdated Show resolved Hide resolved

hellofanny reviewed Jul 20, 2022

View reviewed changes

lucasfp13 force-pushed the feat/FS-269-add-new-tokens-to-skeleton branch from 4ea3489 to f80fcdb Compare July 21, 2022 03:09

vercel bot temporarily deployed to Preview July 21, 2022 03:11 Inactive

lucasfp13 force-pushed the feat/FS-269-add-new-tokens-to-skeleton branch from 0da3e8c to bb90f0e Compare July 21, 2022 17:32

vercel bot temporarily deployed to Preview July 21, 2022 17:34 Inactive

renatamottam reviewed Jul 21, 2022

View reviewed changes

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss Outdated Show resolved Hide resolved

src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss Outdated Show resolved Hide resolved

vercel bot temporarily deployed to Preview July 21, 2022 19:38 Inactive

eduardoformiga reviewed Jul 21, 2022

View reviewed changes

vercel bot temporarily deployed to Preview July 22, 2022 00:06 Inactive

vercel bot temporarily deployed to Preview July 22, 2022 00:18 Inactive

lucasfp13 added 20 commits July 23, 2022 21:27

Adds support to Skeleton for custom data attributes

163c726

Fixes Shimmer tokens and data attributes

6e55732

Fixes ProductCardSkeleton tokens

0b105a5

Applies CSS modules for ProductShelf

0a459ce

Minor fixes at FilterSkeleton's tokens and data attributes

f17cb37

Minor improvements at ProductGridSkeleton and ProductShelfSkeleton

65c1ee4

Adds new tokens to ProductTileSkeleton

48003e3

Exports ProductTileSkeleton as child of ProductTilesSkeleton

8ca53dd

Removes unused SCSS imports

b5495e2

Adds changelog entry

7249a51

Improvements to the main skeletons components for Storybook purposes

d339403

Adds main skeletons components' stories

5dd85ff

Removes unnecessary tokens and minor fixes

8402ee1

Trigger CI with an empty commit

be682da

Fixes some tokens

2bcc78b

Fixes some tokens

de891e3

Move Skeleton story to the Skeletons's Overview page

132ca7c

Minor story fixes

89f1fb2

Removes no-code class

353c988

Minor fixes

914fd26

lucasfp13 force-pushed the feat/FS-269-add-new-tokens-to-skeleton branch from afb3dc7 to 914fd26 Compare July 24, 2022 00:28

vercel bot temporarily deployed to Preview July 24, 2022 00:32 Inactive

Adds missing import

2cfbe7a

vercel bot temporarily deployed to Preview July 25, 2022 13:09 Inactive

renatamottam approved these changes Jul 25, 2022

View reviewed changes

lucasfp13 merged commit 81b2cbc into main Jul 25, 2022

lucasfp13 deleted the feat/FS-269-add-new-tokens-to-skeleton branch July 25, 2022 13:58

lucasfp13 mentioned this pull request Jul 29, 2022

feat: Adds new tokens to Skeleton [FS-269] vtex-sites/gatsby.store#162

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Adds new tokens to `Skeleton` #171

feat: Adds new tokens to `Skeleton` #171

lucasfp13 commented Jul 12, 2022 •

edited

Loading

vercel bot commented Jul 12, 2022 •

edited

Loading

vtex-sites bot commented Jul 15, 2022 •

edited

Loading

vtex-sites bot commented Jul 15, 2022 •

edited

Loading

ArthurTriis1 left a comment

lucasfp13 commented Jul 19, 2022 •

edited

Loading

eduardoformiga left a comment

hellofanny Jul 20, 2022

eduardoformiga Jul 20, 2022

lucasfp13 Jul 20, 2022

renatamottam left a comment


		# Skeletons

		This feature improves the store's experience and perceived performance through loading placeholders.

feat: Adds new tokens to Skeleton #171

feat: Adds new tokens to Skeleton #171

Conversation

lucasfp13 commented Jul 12, 2022 • edited Loading

What's the purpose of this pull request?

How does it work?

How to test it?

Checklist

vercel bot commented Jul 12, 2022 • edited Loading

vtex-sites bot commented Jul 15, 2022 • edited Loading

Preview is ready

This pull request generated a Preview

vtex-sites bot commented Jul 15, 2022 • edited Loading

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

ArthurTriis1 left a comment

Choose a reason for hiding this comment

lucasfp13 commented Jul 19, 2022 • edited Loading

eduardoformiga left a comment

Choose a reason for hiding this comment

hellofanny Jul 20, 2022

Choose a reason for hiding this comment

eduardoformiga Jul 20, 2022

Choose a reason for hiding this comment

lucasfp13 Jul 20, 2022

Choose a reason for hiding this comment

renatamottam left a comment

Choose a reason for hiding this comment

feat: Adds new tokens to `Skeleton` #171

feat: Adds new tokens to `Skeleton` #171

lucasfp13 commented Jul 12, 2022 •

edited

Loading

vercel bot commented Jul 12, 2022 •

edited

Loading

vtex-sites bot commented Jul 15, 2022 •

edited

Loading

vtex-sites bot commented Jul 15, 2022 •

edited

Loading

lucasfp13 commented Jul 19, 2022 •

edited

Loading