Skip to content

Add shadow token page to doc site #8604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Mar 15, 2023
Merged

Add shadow token page to doc site #8604

merged 3 commits into from
Mar 15, 2023

Conversation

lgriffee
Copy link
Contributor

@lgriffee lgriffee commented Mar 8, 2023 •
edited
Loading

WHY are these changes introduced?

As part of the depth migrations in #8601 we need to link to a shadow token page on polaris.shopify.com

WHAT is this pull request doing?

Adds a shadow token tab and page on polaris.shopify.com. This page will replace the depth token page (which will be removed in v11).

localhost_3000_tokens_shadow
localhost_3000_tokens_shadow (1)

How the tabs wrap on smaller screen sizes isn't the most beautiful thing but I don't want to refactor the code when we're going to remove the depth token group in the next few weeks.

@lgriffee lgriffee self-assigned this Mar 8, 2023
lgriffee
lgriffee commented Mar 8, 2023
View reviewed changes
polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
Comment on lines +40 to +41
// Temporality adding this style until v11 ships and we get rid of the depth token group
min-width: 125px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Temp code to account for an extra tab until we get rid of depth.

lgriffee
lgriffee commented Mar 8, 2023
View reviewed changes
polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
Comment on lines +84 to +89
// Temporality disabling these styles until v11 ships and we get rid of the depth token group
// li:nth-last-child(1),
// li:nth-last-child(2),
// li:nth-last-child(3),
// li:nth-last-child(4) {
li:nth-last-child(1) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Temp code to account for an extra tab until we get rid of depth.

@lgriffee lgriffee mentioned this pull request Mar 9, 2023
Merged
2 tasks
@lgriffee lgriffee requested a review from martenbjork March 14, 2023 23:11
@martenbjork martenbjork merged commit 65a678d into main Mar 15, 2023
@martenbjork martenbjork deleted the add-shadow-tokens-doc-site branch March 15, 2023 05:34
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Mar 15, 2023
Merged
alex-page pushed a commit that referenced this pull request Mar 16, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8612)
8542ddc 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@9.0.0

### Major Changes

- [#8657](#8657)
[`764f17d86`](764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [#8555](#8555)
[`696473b82`](696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [#8650](#8650)
[`078cf9aea`](078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [#8586](#8586)
[`83bde8690`](83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [#8288](#8288)
[`d27a361c2`](d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [#8600](#8600)
[`515a62f3b`](515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [#8655](#8655)
[`fb373c3e1`](fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [#8595](#8595)
[`437a3bbf1`](437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([#8595](#8595))


- [#8626](#8626)
[`ff70ab3d1`](ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [#8644](#8644)
[`62b712362`](62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [#8651](#8651)
[`446ba341c`](446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [#8659](#8659)
[`3e7e0837d`](3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [#8606](#8606)
[`230786ace`](230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [#8629](#8629)
[`6ee523a5f`](6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [#8604](#8604)
[`65a678d29`](65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [#8615](#8615)
[`4aacd1983`](4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [#8613](#8613)
[`1a36ed60c`](1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [#8621](#8621)
[`dca759b0b`](dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [#8622](#8622)
[`613f637c9`](613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [#8379](#8379)
[`c8207636c`](c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [#8614](#8614)
[`3526fc2fc`](3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [#8616](#8616)
[`74f0bc42a`](74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [#8602](#8602)
[`575b351d5`](575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](696473b),
[`437a3bbf1`](437a3bb),
[`078cf9aea`](078cf9a),
[`83bde8690`](83bde86),
[`ff70ab3d1`](ff70ab3),
[`62b712362`](62b7123),
[`446ba341c`](446ba34),
[`d27a361c2`](d27a361),
[`3e7e0837d`](3e7e083),
[`230786ace`](230786a),
[`6ee523a5f`](6ee523a),
[`515a62f3b`](515a62f),
[`fb373c3e1`](fb373c3)]:
    -   @shopify/polaris@10.36.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
lgriffee added a commit that referenced this pull request Mar 16, 2023
@lgriffee
Migrate depth custom properties from v10 to v11 (#8601)
243fd62 
### WHY are these changes introduced?

Part of #8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-depth`](#8272)
from `@shopify/polaris-migrator` to migrate `depth` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230308171859 v11-styles-replace-custom-property-depth './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
<hr>

🚨 Note: This PR will not merge until:
- [x] https://github.com/Shopify/web/pull/85942 is ready to merge (so
that we can release these changes in both polaris and web at the same
time)
- [x] #8604 is merged since one of the migrations in this PR will need
to access it
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@lgriffee @juzser
Add shadow token page to doc site (Shopify#8604)
dde0740 
### WHY are these changes introduced?

As part of the `depth` migrations in Shopify#8601 we need to [link to a
`shadow` token
page](https://github.com/Shopify/polaris/pull/8601/files#diff-0f4bc0b422fb2f3107067344db31d5b898341144512c01d842270e79dac23eabR34)
on polaris.shopify.com

### WHAT is this pull request doing?
Adds a `shadow` token tab and page on polaris.shopify.com. This page
will replace the `depth` token page (which will be removed in v11).


![localhost_3000_tokens_shadow](https://user-images.githubusercontent.com/21976492/223870427-ee3d0eb2-cf9b-45e5-b220-0a1272918471.png)
![localhost_3000_tokens_shadow
(1)](https://user-images.githubusercontent.com/21976492/223870437-f1195d27-fa94-4c04-aed2-3abd2c542eff.png)

How the tabs wrap on smaller screen sizes isn't the most beautiful thing
but I don't want to refactor the code when we're going to remove the
`depth` token group in the next few weeks.
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8612)
706563f 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@9.0.0

### Major Changes

- [Shopify#8657](Shopify#8657)
[`764f17d86`](Shopify@764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](Shopify@764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [Shopify#8555](Shopify#8555)
[`696473b82`](Shopify@696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [Shopify#8650](Shopify#8650)
[`078cf9aea`](Shopify@078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [Shopify#8586](Shopify#8586)
[`83bde8690`](Shopify@83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [Shopify#8288](Shopify#8288)
[`d27a361c2`](Shopify@d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [Shopify#8600](Shopify#8600)
[`515a62f3b`](Shopify@515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [Shopify#8655](Shopify#8655)
[`fb373c3e1`](Shopify@fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [Shopify#8595](Shopify#8595)
[`437a3bbf1`](Shopify@437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([Shopify#8595](Shopify#8595))


- [Shopify#8626](Shopify#8626)
[`ff70ab3d1`](Shopify@ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [Shopify#8644](Shopify#8644)
[`62b712362`](Shopify@62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [Shopify#8651](Shopify#8651)
[`446ba341c`](Shopify@446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [Shopify#8659](Shopify#8659)
[`3e7e0837d`](Shopify@3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [Shopify#8606](Shopify#8606)
[`230786ace`](Shopify@230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [Shopify#8629](Shopify#8629)
[`6ee523a5f`](Shopify@6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](Shopify@cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [Shopify#8604](Shopify#8604)
[`65a678d29`](Shopify@65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [Shopify#8615](Shopify#8615)
[`4aacd1983`](Shopify@4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [Shopify#8613](Shopify#8613)
[`1a36ed60c`](Shopify@1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [Shopify#8621](Shopify#8621)
[`dca759b0b`](Shopify@dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [Shopify#8622](Shopify#8622)
[`613f637c9`](Shopify@613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [Shopify#8379](Shopify#8379)
[`c8207636c`](Shopify@c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [Shopify#8614](Shopify#8614)
[`3526fc2fc`](Shopify@3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [Shopify#8616](Shopify#8616)
[`74f0bc42a`](Shopify@74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [Shopify#8602](Shopify#8602)
[`575b351d5`](Shopify@575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](Shopify@696473b),
[`437a3bbf1`](Shopify@437a3bb),
[`078cf9aea`](Shopify@078cf9a),
[`83bde8690`](Shopify@83bde86),
[`ff70ab3d1`](Shopify@ff70ab3),
[`62b712362`](Shopify@62b7123),
[`446ba341c`](Shopify@446ba34),
[`d27a361c2`](Shopify@d27a361),
[`3e7e0837d`](Shopify@3e7e083),
[`230786ace`](Shopify@230786a),
[`6ee523a5f`](Shopify@6ee523a),
[`515a62f3b`](Shopify@515a62f),
[`fb373c3e1`](Shopify@fb373c3)]:
    -   @shopify/polaris@10.36.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@lgriffee @juzser
Migrate depth custom properties from v10 to v11 (Shopify#8601)
e46a4f2 
### WHY are these changes introduced?

Part of Shopify#8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-depth`](Shopify#8272)
from `@shopify/polaris-migrator` to migrate `depth` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230308171859 v11-styles-replace-custom-property-depth './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
<hr>

🚨 Note: This PR will not merge until:
- [x] https://github.com/Shopify/web/pull/85942 is ready to merge (so
that we can release these changes in both polaris and web at the same
time)
- [x] Shopify#8604 is merged since one of the migrations in this PR will need
to access it
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aaronccasanova aaronccasanova aaronccasanova approved these changes

@alex-page alex-page Awaiting requested review from alex-page

+1 more reviewer

@martenbjork martenbjork martenbjork approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@lgriffee lgriffee

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@lgriffee @martenbjork @aaronccasanova