diff --git a/.changeset/lucky-mugs-fold.md b/.changeset/lucky-mugs-fold.md new file mode 100644 index 00000000000..da4410d6d62 --- /dev/null +++ b/.changeset/lucky-mugs-fold.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': minor +--- + +Added a `shadow` token page diff --git a/polaris.shopify.com/pages/tokens/shadow.tsx b/polaris.shopify.com/pages/tokens/shadow.tsx new file mode 100644 index 00000000000..ed3a9564fb6 --- /dev/null +++ b/polaris.shopify.com/pages/tokens/shadow.tsx @@ -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 ( + <> + + + + + ); +}; + +export default Components; diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss b/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss index 9e59da96481..8ea9817fb30 100644 --- a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss +++ b/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss @@ -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; } a { @@ -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) { a { border-bottom: none; } diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx index 98fdb04639a..715f4b5b361 100644 --- a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx +++ b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx @@ -14,6 +14,7 @@ interface Props { | 'depth' | 'font' | 'motion' + | 'shadow' | 'shape' | 'spacing' | 'zIndex'; @@ -47,6 +48,10 @@ const navItems: NavItem[] = [ title: 'Depth', url: `/tokens/depth`, }, + { + title: 'Shadow', + url: `/tokens/shadow`, + }, { title: 'Motion', url: `/tokens/motion`, @@ -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),