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

Merged
merged 3 commits into from
Mar 15, 2023
Merged

Add shadow token page to doc site #8604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a62571
Add shadow token page on doc site
lgriffee Mar 8, 2023
b66f839
Fix tab wrapping issue
lgriffee Mar 8, 2023
b67ac66
Add changeset
lgriffee Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lucky-mugs-fold.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': minor
---

Added a `shadow` token page
16 changes: 16 additions & 0 deletions polaris.shopify.com/pages/tokens/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type {NextPage} from 'next';
import React from 'react';
import TokensPage from '../../src/components/TokensPage';
import PageMeta from '../../src/components/PageMeta';

const Components: NextPage = () => {
return (
<>
<PageMeta title="Shadow tokens" />

<TokensPage tokenGroup={'shadow'} />
</>
);
};

export default Components;
12 changes: 8 additions & 4 deletions polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@

li {
flex: 1;
// Temporality adding this style until v11 ships and we get rid of the depth token group
min-width: 125px;
Comment on lines +40 to +41
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.

}

a {
Expand Down Expand Up @@ -79,10 +81,12 @@
padding: 0.66rem 0;
}

li:nth-last-child(1),
li:nth-last-child(2),
li:nth-last-child(3),
li:nth-last-child(4) {
// 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) {
Comment on lines +84 to +89
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.

a {
border-bottom: none;
}
Expand Down
6 changes: 6 additions & 0 deletions polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface Props {
| 'depth'
| 'font'
| 'motion'
| 'shadow'
| 'shape'
| 'spacing'
| 'zIndex';
Expand Down Expand Up @@ -47,6 +48,10 @@ const navItems: NavItem[] = [
title: 'Depth',
url: `/tokens/depth`,
},
{
title: 'Shadow',
url: `/tokens/shadow`,
},
{
title: 'Motion',
url: `/tokens/motion`,
Expand Down Expand Up @@ -84,6 +89,7 @@ function TokensPage({tokenGroup}: Props) {
depth: tokensToFilteredArray(filter, allTokens.depth),
font: tokensToFilteredArray(filter, allTokens.font),
motion: tokensToFilteredArray(filter, allTokens.motion),
shadow: tokensToFilteredArray(filter, allTokens.shadow),
shape: tokensToFilteredArray(filter, allTokens.shape),
spacing: tokensToFilteredArray(filter, allTokens.spacing),
zIndex: tokensToFilteredArray(filter, allTokens.zIndex),
Expand Down