Skip to content

Commit

Permalink
Merge pull request #2044 from chanzuckerberg/release-v15.3.0
Browse files Browse the repository at this point in the history
## [15.3.0](v15.2.1...v15.3.0) (2024-08-23)

[Storybook](https://61313967cde49b003ae2a860-vuzmfnjuoj.chromatic.com/)

Figma Components Library:
🟢  No breaking changes
- EDS-toastNotification:
  - deleted the dissmissType property
  - Added Toast Pattern documentation to handle multiple toasts
- EDS-popover: added EDS-popover 2.0 component

### Features

* **config:** add transition durations for tailwind ([#2036](#2036)) ([aed0f09](aed0f09))
* **Popover:** update theming to 2.0 ([#2031](#2031)) ([c5ab351](c5ab351))
* **tokens:** add in additional table tokens ([#2035](#2035)) ([a698a5b](a698a5b))
* **tokens:** update visited tokens ([#2034](#2034)) ([df84c87](df84c87))


### Bug Fixes

* **Card:** add spacing between eyebrow and title ([#2040](#2040)) ([d6ee15d](d6ee15d))
* **Link:** handle inverse variant for standalone links ([#2042](#2042)) ([351d7fd](351d7fd))
* **Popover:** update component version number ([#2038](#2038)) ([9940d76](9940d76))
  • Loading branch information
booc0mtaco authored Aug 23, 2024
2 parents cbe3b68 + ba6fc3b commit 4c6fe11
Show file tree
Hide file tree
Showing 31 changed files with 1,653 additions and 1,567 deletions.
16 changes: 0 additions & 16 deletions .storybook/components/DesignTokens/Tier2/Colors.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,6 @@ export const TextUtility: StoryObj = {
),
};

export const IconUtility: StoryObj = {
render: () => (
<div>
<Section title="Icon Colors (utility)">
<ColorList
listItems={getListItems({
filterTerm: 'eds-theme-color-icon-utility',
figmaTokenHeader: 'icon',
tailwindClassHeader: 'text-icon-utility',
})}
/>
</Section>
</div>
),
};

export const BackgroundUtility: StoryObj = {
render: () => (
<div>
Expand Down
72 changes: 72 additions & 0 deletions .storybook/components/DesignTokens/Tier3/Colors.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import type { StoryObj } from '@storybook/react';
import React from 'react';
import filterTokens from '../../../util/filterTokens';
import { ColorList } from '../../ColorList/ColorList';
import Section from '../../Section';

export default {
title: 'Design Tokens/Tier 3: Component/Colors',
parameters: {
axe: {
// For documentation purposes only
skip: true,
},
},
};

const camelCaseWarning =
'NOTE: table tokens have a camelCase suffix for the emphasis (e.g., tableRow)';

const getListItems = ({
filterTerm,
figmaTokenHeader,
tailwindClassHeader,
}: {
filterTerm: string;
figmaTokenHeader: string;
tailwindClassHeader: string;
}) =>
filterTokens(filterTerm).map(({ name, value }) => {
const specifier = name.slice(
name.indexOf(filterTerm) + filterTerm.length + 1,
);
return {
name,
value,
figmaToken: figmaTokenHeader + '/' + specifier,
tailwindClass: tailwindClassHeader + '-' + specifier,
};
});

export const IconUtility: StoryObj = {
render: () => (
<div>
<Section title="Icon Colors (utility)">
<ColorList
listItems={getListItems({
filterTerm: 'eds-theme-color-icon-utility',
figmaTokenHeader: 'icon',
tailwindClassHeader: 'text-icon-utility',
})}
/>
</Section>
</div>
),
};

// TODO: handle name formatting for tableRow tokens in figma and tailwind
export const BackgroundTable: StoryObj = {
render: () => (
<div>
<Section description={camelCaseWarning} title="Background Colors (Table)">
<ColorList
listItems={getListItems({
filterTerm: 'eds-theme-color-background-table',
figmaTokenHeader: 'background',
tailwindClassHeader: 'bg-table',
})}
/>
</Section>
</div>
),
};
4 changes: 2 additions & 2 deletions .storybook/components/Docs/Guidelines/Theming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ for which utility classes to use when you need color tokens (in order of prefere
These map to the higher-tier token names, and are semantic- (or component-) based.

```tsx
<div className="text-utility-interactive-visited">Option 1</div>
<div className="text-utility-interactive-primary-visited">Option 1</div>
```

#### ✅ Token name referecnes as custom utility classes

If there is no existing utility class for the use case, you can reference the token directly in a class. While less preferable to the above, this still plugs into EDS.

```tsx
<div className="bg-[var(--eds-theme-color-text-utility-interactive-visited)]">Option 2</div>
<div className="bg-[var(--eds-theme-color-text-utility-interactive-primary-visited)]">Option 2</div>
```

Cons:
Expand Down
10 changes: 9 additions & 1 deletion .storybook/data/tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,9 @@
"eds-theme-color-background-brand-purple": "#C580E7",
"eds-theme-color-background-brand-purple-low-emphasis": "#FBF5FD",
"eds-theme-color-background-brand-pink": "#DB458D",
"eds-theme-color-background-table-row-stripe-1": "#F5FAFF",
"eds-theme-color-background-table-row-stripe-2": "rgb(var(--eds-color-white) / 1)",
"eds-theme-color-background-table-row-selected": "#CEE6FF",
"eds-theme-color-background-utility-base-1": "rgb(var(--eds-color-white) / 1)",
"eds-theme-color-background-utility-base-2": "#FDF9F8",
"eds-theme-color-background-utility-container": "rgb(var(--eds-color-white) / 1)",
Expand Down Expand Up @@ -492,9 +495,11 @@
"eds-theme-color-icon-utility-interactive-primary": "#0F2163",
"eds-theme-color-icon-utility-interactive-primary-hover": "#0A164C",
"eds-theme-color-icon-utility-interactive-primary-active": "#060E30",
"eds-theme-color-icon-utility-interactive-primary-visited": "#0F2163",
"eds-theme-color-icon-utility-interactive-secondary": "#3165D2",
"eds-theme-color-icon-utility-interactive-secondary-hover": "#254EAC",
"eds-theme-color-icon-utility-interactive-secondary-active": "#1B3889",
"eds-theme-color-icon-utility-interactive-secondary-visited": "#3165D2",
"eds-theme-color-icon-utility-interactive-visited": "#8A50A7",
"eds-theme-color-icon-utility-critical": "#A51115",
"eds-theme-color-icon-utility-critical-hover": "#7D0A16",
Expand Down Expand Up @@ -555,9 +560,11 @@
"eds-theme-color-text-utility-interactive-primary": "#0F2163",
"eds-theme-color-text-utility-interactive-primary-hover": "#0A164C",
"eds-theme-color-text-utility-interactive-primary-active": "#060E30",
"eds-theme-color-text-utility-interactive-primary-visited": "#0F2163",
"eds-theme-color-text-utility-interactive-secondary": "#3165D2",
"eds-theme-color-text-utility-interactive-secondary-hover": "#254EAC",
"eds-theme-color-text-utility-interactive-secondary-active": "#1B3889",
"eds-theme-color-text-utility-interactive-secondary-visited": "#3165D2",
"eds-theme-color-text-utility-interactive-visited": "#8A50A7",
"eds-theme-color-text-utility-critical": "#A51115",
"eds-theme-color-text-utility-critical-hover": "#7D0A16",
Expand All @@ -575,7 +582,7 @@
"eds-theme-color-text-utility-disabled-secondary": "#CFC9C7",
"eds-theme-color-text-utility-inverse": "rgb(var(--eds-color-white) / 1)",
"eds-theme-color-text-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)",
"eds-theme-color-text-utility-inverse-interactive-visited": "#C580E7",
"eds-theme-color-text-utility-inverse-interactive-visited": "rgb(var(--eds-color-white) / 1)",
"eds-theme-color-text-utility-placeholder": "#6C6967",
"eds-theme-color-text-utility-success": "#007249",
"eds-theme-color-text-utility-error": "#BD0044",
Expand Down Expand Up @@ -718,6 +725,7 @@
"eds-color-blue-850": "#0F2163",
"eds-color-blue-900": "#0A164C",
"eds-color-blue-950": "#060E30",
"eds-color-blue-025": "#F5FAFF",
"eds-color-blue-050": "#EAF4FF",
"eds-color-pink-350": "#E67EB0",
"eds-color-pink-450": "#DB458D",
Expand Down
894 changes: 0 additions & 894 deletions .yarn/releases/yarn-4.3.1.cjs

This file was deleted.

925 changes: 925 additions & 0 deletions .yarn/releases/yarn-4.4.0.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ enableGlobalCache: false

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-4.3.1.cjs
yarnPath: .yarn/releases/yarn-4.4.0.cjs
17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,23 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [15.3.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.2.1...v15.3.0) (2024-08-23)


### Features

* **config:** add transition durations for tailwind ([#2036](https://github.com/chanzuckerberg/edu-design-system/issues/2036)) ([aed0f09](https://github.com/chanzuckerberg/edu-design-system/commit/aed0f0941d9d09f8a7b96f2219f6801eefa4ee50))
* **Popover:** update theming to 2.0 ([#2031](https://github.com/chanzuckerberg/edu-design-system/issues/2031)) ([c5ab351](https://github.com/chanzuckerberg/edu-design-system/commit/c5ab3515e1bfe8eafde89ec308547b6d34e0b44d))
* **tokens:** add in additional table tokens ([#2035](https://github.com/chanzuckerberg/edu-design-system/issues/2035)) ([a698a5b](https://github.com/chanzuckerberg/edu-design-system/commit/a698a5b4a65af8a7dffa7da908be9d7e05ffc570))
* **tokens:** update visited tokens ([#2034](https://github.com/chanzuckerberg/edu-design-system/issues/2034)) ([df84c87](https://github.com/chanzuckerberg/edu-design-system/commit/df84c87ecd2ad34b37b90d6774bea284da50d045))


### Bug Fixes

* **Card:** add spacing between eyebrow and title ([#2040](https://github.com/chanzuckerberg/edu-design-system/issues/2040)) ([d6ee15d](https://github.com/chanzuckerberg/edu-design-system/commit/d6ee15d71d9f3df76fe68f1639ac1e442e6cd686))
* **Link:** handle inverse variant for standalone links ([#2042](https://github.com/chanzuckerberg/edu-design-system/issues/2042)) ([351d7fd](https://github.com/chanzuckerberg/edu-design-system/commit/351d7fd850196c44da17985b82d8f150fd37a62b))
* **Popover:** update component version number ([#2038](https://github.com/chanzuckerberg/edu-design-system/issues/2038)) ([9940d76](https://github.com/chanzuckerberg/edu-design-system/commit/9940d76d6ac60e112dee2e39d227bbb695057564))

### [15.2.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.2.0...v15.2.1) (2024-08-09)


Expand Down
18 changes: 9 additions & 9 deletions docs/PUBLISHING.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,22 +85,22 @@ Once merged, wait until the [builds complete on `main`](https://github.com/chanz

8. Pull down the most up-to-date version of main: `git checkout main && git pull && yarn install && yarn build`
9. Publish the package: `npm publish`
10. Create a [new release](https://github.com/chanzuckerberg/edu-design-system/releases) based on the new tag. Use the same text used for the pull request description above (from CHANGELOG.md). Also include the link for the built storybook in the description. This will automatically post to [relevant slack channels](https://slack.github.com/). **When doing a major version release, don't forget to include notes on each breaking change**. Also, enable the discussion feature to handle any question-answering should questions arise.
10. Create a [new release](https://github.com/chanzuckerberg/edu-design-system/releases) based on the newly-created tag.

When naming the release, include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds vX.X.X")
To prepare the message:

* Include the package name before the version number in the release name field (e.g., "@chanzuckerberg/eds@X.Y.Z")
* Use the same text used for the pull request description above (from CHANGELOG.md).
* Include any additional notes from the [System Designers](https://github.com/orgs/chanzuckerberg/teams/edu-systems-designers).
* Include the link for the built storybook in the description.

The latter will automatically post to [relevant slack channels](https://slack.github.com/). **When doing a major version release, don't forget to include notes on each breaking change**.

#### Finishing the release

11. Lastly, run the following to "back merge" release changes to `next`:
- `git checkout main && git pull origin main && git checkout next && git merge main && git push`

Once complete, you can update the package in the main apps that use it (for major versions):

- [edu-stack](https://github.com/chanzuckerberg/edu-stack) - in the package.json
- [edu-stack-service](https://github.com/chanzuckerberg/edu-stack-service) - in the package.json

Take note of the details here, which will also be mentioned in that month's newsletter, and updates to ZeroHeight (What's New).

#### Alpha release

For testing a release to build confidence.
Expand Down
42 changes: 21 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@chanzuckerberg/eds",
"version": "15.2.1",
"version": "15.3.0",
"description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
"author": "CZI <[email protected]>",
"homepage": "https://github.com/chanzuckerberg/edu-design-system",
Expand Down Expand Up @@ -125,53 +125,53 @@
"@commitlint/cli": "^18.6.1",
"@commitlint/config-conventional": "^18.6.3",
"@geometricpanda/storybook-addon-badges": "^2.0.2",
"@omlet/cli": "^1.10.1",
"@omlet/cli": "^1.10.2",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.6",
"@size-limit/file": "^8.2.6",
"@storybook/addon-a11y": "^8.2.7",
"@storybook/addon-essentials": "^8.2.7",
"@storybook/addon-interactions": "^8.2.7",
"@storybook/addon-links": "^8.2.7",
"@storybook/addon-mdx-gfm": "^8.2.7",
"@storybook/addon-a11y": "^8.2.9",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-mdx-gfm": "^8.2.9",
"@storybook/addon-styling": "^1.3.7",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/manager-api": "^8.2.7",
"@storybook/react": "^8.2.7",
"@storybook/react-webpack5": "^8.2.7",
"@storybook/test": "^8.2.7",
"@storybook/manager-api": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-webpack5": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^8.2.7",
"@storybook/theming": "^8.2.9",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/jsonfile": "^6",
"@types/lodash": "^4.17.7",
"@types/node": "^20.14.14",
"@types/node": "^20.14.15",
"@types/react": "^18.3.3",
"@types/react-beautiful-dnd": "^13.1.8",
"@types/react-dom": "^18.3.0",
"@types/react-portal": "^4.0.7",
"@types/yargs": "^17.0.32",
"@types/yargs": "^17.0.33",
"axe-core": "4.10.0",
"chromatic": "^11.7.0",
"chromatic": "^11.7.1",
"codecov": "^3.8.3",
"copyfiles": "^2.4.1",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-jest": "^27.9.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-storybook": "^0.8.0",
"eslint-plugin-testing-library": "^6.2.2",
"eslint-plugin-testing-library": "^6.3.0",
"husky": "^8.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-preset-stylelint": "^6.3.2",
"lint-staged": "^13.3.0",
"plop": "^4.0.1",
"postcss": "^8.4.40",
"postcss": "^8.4.41",
"postcss-cli": "^10.1.0",
"postcss-import": "^15.1.0",
"postcss-mixins": "^9.0.4",
Expand All @@ -181,15 +181,15 @@
"prettier-plugin-tailwindcss": "^0.5.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^4.19.2",
"rollup": "^4.20.0",
"rollup-plugin-postcss": "^4.0.2",
"size-limit": "^8.2.6",
"standard-version": "^9.5.0",
"storybook": "^8.2.7",
"storybook": "^8.2.9",
"style-dictionary": "^3.9.2",
"stylelint": "^15.11.0",
"stylelint-config-recommended": "^13.0.0",
"tailwindcss": "^3.4.7",
"tailwindcss": "^3.4.10",
"ts-jest": "^29.2.4",
"typescript": "^5.5.4"
},
Expand All @@ -202,5 +202,5 @@
"stylelint --fix --allow-empty-input"
]
},
"packageManager": "yarn@4.3.1"
"packageManager": "yarn@4.4.0"
}
3 changes: 1 addition & 2 deletions src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,7 @@ export type ButtonProps<ExtendedElement = unknown> = ButtonHTMLElementProps & {
* or other in-page activity.
*
* - If you need to style a navigation anchor, please use the `Link` component.
* - If you need to style a different element or component to
* look like a button or link, you can use the `ClickableStyle` component.
* - If you need the button to use some other tag or component, use the `as` prop.
*/
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
Expand Down
4 changes: 4 additions & 0 deletions src/components/Card/Card.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@

.card__header {
display: flex;

& .header__eyebrow {
margin-bottom: calc(var(--eds-size-1) / 16 * 1rem);
}

&.header--size-sm {
gap: calc(var(--eds-size-1) / 16 * 1rem)
Expand Down
6 changes: 5 additions & 1 deletion src/components/Link/Link.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@
text-decoration: none;
}

&.link--variant-inverse {
color: var(--eds-theme-color-text-utility-inverse);
}

/**
* Sizes - using the presets for type ramp matching body-*
*/
Expand Down Expand Up @@ -114,7 +118,7 @@
}

.link:visited {
color: var(--eds-theme-color-text-utility-interactive-visited);
color: var(--eds-theme-color-text-utility-interactive-primary-visited);
}

.link:focus-visible {
Expand Down
Loading

0 comments on commit 4c6fe11

Please sign in to comment.