diff --git a/.storybook/components/Docs/Guidelines/Theming.stories.mdx b/.storybook/components/Docs/Guidelines/Theming.stories.mdx index c420bcebb..5c97b43d3 100644 --- a/.storybook/components/Docs/Guidelines/Theming.stories.mdx +++ b/.storybook/components/Docs/Guidelines/Theming.stories.mdx @@ -15,7 +15,7 @@ Below are instructions on how to use the tooling and tokens to define custom the EDS comes with some tooling to allow easy transfer of theme data from Figma (or some style-dictionary compatible format) into code. * `eds-init-theme` - This command sets up the initial file(s) for theming your application -* `eds-apply-theme` - This command parses the style dictionary files to generate the tokens (CSS Variables) used by EDS +* `eds-apply-theme` - This command parses the style dictionary files to generate the tokens used by EDS (and tailwind, or other tools) Each of these tools reads config to figure out where to read/write files. This can be defined in several ways, e.g., a top-level file `.edsrc.json`, or as a key-value set in package.json. Example: @@ -23,8 +23,8 @@ Each of these tools reads config to figure out where to read/write files. This c ```json "eds": { - "json": "src/components/", - "css": "src/components/" + "src": "src/components/", + "dest": "src/components/" }, ``` @@ -32,12 +32,12 @@ Each of these tools reads config to figure out where to read/write files. This c ```json { - "json": "src/components/", - "css": "src/components/" + "src": "src/components/", + "dest": "src/components/" } ``` -`json` determines where the core theme file will be copied to OR read from, and `css` determines where the resulting css token file will be stored. +`src` determines where the core theme file will be copied to (upon init) OR read from (upon apply), and `dest` determines where the processed files will be written to. ### eds-init-theme @@ -79,9 +79,9 @@ EDS comes pre-packaged with many tokens that define the base style and character ### eds-apply-theme -After making changes to the `app-theme.json` to reflect what has been defined by design, update the CSS token file by running `npx eds-apply-theme`. +After making changes to the `app-theme.json` to reflect what has been defined by design, update the project's theme files by running `npx eds-apply-theme`. -Once run, you will have a CSS file `app-theme.css` that includes a set of token values that can be used in the app as appropriate. +Once run, you will have a CSS file `app-theme.css` that includes a set of token values as CSS variables, which can be used in the app as appropriate. ```css /** @@ -101,7 +101,17 @@ Once run, you will have a CSS file `app-theme.css` that includes a set of token } ``` -Add this file to your core app root file. That's it! Now, the theme will be applied to the tokens used by EDS components. To make other changes, edit `app-theme.json`, then re-run `npx eds-apply-theme`. +Add this file to your core app root file. + +This also generates an additional file `app-tailwind-theme.config.json` which contains [useful tailwind configuration](https://github.com/chanzuckerberg/edu-design-system?tab=readme-ov-file#tailwind-setup) for EDS-specific utility classes +This will also show a preview of the tokens in your IDE of choice. To use this config, replace the import from the package with a link to this files location: + +```diff +-const edsConfig = require('@chanzuckerberg/eds/tailwind.config'); ++const edsConfig = require('./src/components/app-tailwind-theme.config'); +``` + +That's it! Now, the theme will be applied to the tokens used by EDS components. To make other changes, edit `app-theme.json`, then re-run `npx eds-apply-theme`. **NOTE**: do not edit this file directly. Instead, follow the instructions at the top of the file! diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bf4ed8e1..64d6b3dd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,22 @@ 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. +## [13.9.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.8.1...v13.9.0) (2024-01-19) + + +### Features + +* **Avatar:** adjust typography usages and sizing for icons ([#1830](https://github.com/chanzuckerberg/edu-design-system/issues/1830)) ([7da31e6](https://github.com/chanzuckerberg/edu-design-system/commit/7da31e6d8f9dc973ae03b9337c33bbe00bf7a666)) +* **InlineNotification:** remove deprecated variants ([#1833](https://github.com/chanzuckerberg/edu-design-system/issues/1833)) ([cfcf1fa](https://github.com/chanzuckerberg/edu-design-system/commit/cfcf1fae674215cac8fb3ca2101ef77758ecb3c8)) +* **Label:** mark optional as deprecated ([#1832](https://github.com/chanzuckerberg/edu-design-system/issues/1832)) ([8067082](https://github.com/chanzuckerberg/edu-design-system/commit/806708291d9dc8733eee3b782c29cb1409f1cb95)) +* **tokens:** output token literal values in a new tailwind config file ([#1828](https://github.com/chanzuckerberg/edu-design-system/issues/1828)) ([08fa1c4](https://github.com/chanzuckerberg/edu-design-system/commit/08fa1c4783651d815939f735d4ed55d360b473aa)) + + +### Bug Fixes + +* **InputField:** mark unused prop as deprecated ([#1831](https://github.com/chanzuckerberg/edu-design-system/issues/1831)) ([622abfb](https://github.com/chanzuckerberg/edu-design-system/commit/622abfb0e5a29ab5aaf38a8f9ea08c1bf76308b1)) +* **Select:** update incorrect documentation ([#1825](https://github.com/chanzuckerberg/edu-design-system/issues/1825)) ([94aace5](https://github.com/chanzuckerberg/edu-design-system/commit/94aace5ecda613600de23566c85304bb415b3765)) + ### [13.8.1](https://github.com/chanzuckerberg/edu-design-system/compare/v13.8.0...v13.8.1) (2024-01-04) ## [13.8.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.7.1...v13.8.0) (2023-12-06) diff --git a/README.md b/README.md index 38841ea56..e2ab16abf 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ module.exports = { }; ``` -This will replace the default color tokens that come [with Tailwind](https://tailwindcss.com/docs/customizing-colors) with those defined by EDS. **NOTE**: this might cause regressions in your project, if you have been using the default colors from tailwind. +This will replace the default color tokens that come [with Tailwind](https://tailwindcss.com/docs/customizing-colors) with those defined by EDS. **NOTE**: this might cause regressions in your project, if you have been using the default colors provided by tailwind. #### Applying the EDS tailwind extensions piecemeal @@ -63,7 +63,7 @@ If you want a gentler transition to using EDS tailwind config, you can instead i const edsConfig = require('@chanzuckerberg/eds/tailwind.config'); module.exports = { - content: ['./app/**/*.{ts,tsx,jsx,js}'], + // ... theme: { extend: { ...edsConfig.theme.extend @@ -74,9 +74,7 @@ module.exports = { This will add in the utility classes for properties like background color `bg-*`, border `border-*`, and text color `text-*`. These match the styles and variables defined in Figma designs. -You can spread each of the sub-objects in `theme` as desired, e.g., `fontSize`, `fontWeight`, etc. - -Refer to the [tokens tailwind section][tokens] for usage guidelines. +Refer to the [tokens tailwind section][tokens] for usage guidelines if your project uses the theming tooling. [tokens]: https://chanzuckerberg.github.io/edu-design-system/?path=/docs/documentation-guidelines-tokens--docs @@ -102,7 +100,6 @@ EDS also provides the tokens used in the internal styles, to use in any custom c Refer to the "EDS Token and Theme Tools" in [the tokens documentation](https://chanzuckerberg.github.io/edu-design-system/?path=/docs/documentation-theming--docs) to learn about the optional tooling setup. - ## Usage Import any of the components from the top-level package: diff --git a/bin/_util.js b/bin/_util.js index 3a86ba35a..6b9654d4d 100644 --- a/bin/_util.js +++ b/bin/_util.js @@ -15,10 +15,129 @@ module.exports = { // If no config exists, fail if (!settings) { throw new Error( - 'Please add EDS config to your project before continuing (specify "json" and "css" target paths)', + 'Please add EDS config to your project before continuing (specify "src" and "dest" target paths)', + ); + } + + /** + * TODO: Remove the old names for the input/output keys in the config at a future major version + * json => src + * css => dest + */ + if (settings.config.json) { + settings.config.src = settings.config.json; + console.warn( + 'WARNING: You are using "json" in your config. Please replace with "src".', + ); + } + + if (settings.config.css) { + settings.config.dest = settings.config.css; + console.warn( + 'WARNING: You are using "css" in your config. Please replace with "dest".', ); } return settings.config; }, + /** + * Utilities for handling generation of tokens in various formats. + * + * These will be used when preparing files upon publish, and are used with tooling provided by EDS to + * consumers. + */ + /** + * Function to handle various minimizing tasks on style-dictionary rows, where a value to transform exists + * + * @param {StyleObject} obj Metadata object produced from style-dictionary + * @param {Function} formatFunc function containing all the metadata for a given token + * @returns object representing the full transformed token object + */ + minifyDictionaryUsingFormat: function (obj, formatFunc) { + if (typeof obj !== 'object' || Array.isArray(obj)) { + return obj; + } + + const toRet = {}; + + if (obj.hasOwnProperty('value')) { + return formatFunc(obj); + } else { + for (const name in obj) { + toRet[name] = module.exports.minifyDictionaryUsingFormat( + obj[name], + formatFunc, + ); + } + } + return toRet; + }, + /** + * Determine if the given theme file is a subset of what's in the base theme file. + * If it isnt, throw an error: + * - If keys are in base that are missing in the theme file, that's OK (no need to override everything) + * - If keys are in theme that aren't in base, throw (you can't theme tokens that don't exist in EDS) + * @param {object} base The tokens theme file stored in the EDS project + * @param {object} theme The project theme file stored in the app code (same format as bas) + * @param {Array} path The base path, stored as an array of object key names (default []) + * @throws Error when there are tokens in theme that aren't in base + */ + isStrictSubset: function (base, theme, path = []) { + for (const name in theme) { + if (typeof theme[name] === 'object') { + if (base[name] === undefined) { + throw new Error( + `Local themeable value does not exist in base theme: --${path.join( + '-', + )}.${name}"`, + ); + } + module.exports.isStrictSubset( + base[name], + theme[name], + path.concat(name), + ); + } + } + }, + /** + * Flatten token names such that any "root-tokens" do not include `@` in the resulting token name. + * + * Example: + * "neutral": { + * "default": { + * "@": "var(--eds-theme-color-border-neutral-default)", + * "hover": "var(--eds-theme-color-border-neutral-default-hover)" + * }, + * }, + * + * will be changed to + * + * "neutral": { + * "default": { + * "hover": "var(--eds-theme-color-border-neutral-default-hover)" + * }, + * }, + * "neutral-default": "var(--eds-theme-color-border-neutral-default)", + */ + formatEdsTokens: function (obj) { + for (const name in obj) { + if (typeof obj[name] === 'object') { + for (const nestedName in obj[name]) { + if (obj[name][nestedName]['@']) { + obj[name + '-' + nestedName] = obj[name][nestedName]['@']; + delete obj[name][nestedName]['@']; + if (Object.keys(obj[name][nestedName]).length === 0) { + delete obj[name][nestedName]; + } + if (Object.keys(obj[name]).length === 0) { + delete obj[name]; + } + } else if (typeof obj[name][nestedName] === 'object') { + module.exports.formatEdsTokens(obj[name]); + } + } + } + } + }, }; diff --git a/bin/eds-apply-theme.js b/bin/eds-apply-theme.js index 3e5a191f6..ad0b6cfc9 100755 --- a/bin/eds-apply-theme.js +++ b/bin/eds-apply-theme.js @@ -3,16 +3,21 @@ const StyleDictionary = require('style-dictionary'); const path = require('path'); const fs = require('fs'); - const { getConfig } = require('./_util'); + const { + formatEdsTokens, + getConfig, + isStrictSubset, + minifyDictionaryUsingFormat, + } = require('./_util'); let packageRootPath; try { packageRootPath = path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/json/'; } catch (e) { + // used for working on theming within EDS console.error('EDS package not installed. Using local path...'); - packageRootPath = - path.dirname(require.main.path) + '/src/tokens-dist/json/'; + packageRootPath = path.dirname(require.main.path) + '/lib/tokens/json/'; } // Read the config to sort out where to read JSON from and where to write the CSS file @@ -20,7 +25,7 @@ // read and parse JSON files on disk const localTheme = JSON.parse( - fs.readFileSync(`${config.json}app-theme.json`, 'utf8'), + fs.readFileSync(`${config.src}app-theme.json`, 'utf8'), ); const baseTheme = JSON.parse( fs.readFileSync(`${packageRootPath}theme-base.json`, 'utf8'), @@ -35,12 +40,24 @@ ], }); + StyleDictionary.registerFormat({ + name: 'json/tailwind-utility-config', + formatter: function (dictionary) { + const minifiedCssDictionary = minifyDictionaryUsingFormat( + dictionary.properties, + (obj) => `${obj.value}`, + ); + formatEdsTokens(minifiedCssDictionary); + return JSON.stringify(minifiedCssDictionary, null, 2); + }, + }); + const EDSStyleDictionary = StyleDictionary.extend({ - source: [config.json + 'app-theme.json'], + source: [config.src + 'app-theme.json'], platforms: { css: { transforms: [...StyleDictionary.transformGroup.css, 'name/cti/kebab'], - buildPath: config.css, + buildPath: config.dest, files: [ { format: 'css/variables', @@ -54,36 +71,19 @@ return token.attributes.category !== 'legacy'; }, }, + { + format: 'json/tailwind-utility-config', + destination: 'app-tailwind-theme.config.json', + options: { + outputReferences: true, + fileHeader: 'cssOverrideHeader', + }, + }, ], }, }, }); - /** - * Determine if the given theme file is a subset of what's in the base theme file. - * If it isnt, throw an error: - * - If keys are in base that are missing in the theme file, that's OK (no need to override everything) - * - If keys are in theme that aren't in base, throw (you can't theme tokens that don't exist in EDS) - * @param {object} base The tokens theme file stored in the EDS project - * @param {object} theme The project theme file stored in the app code (same format as bas) - * @param {Array} path The base path, stored as an array of object key names (default []) - * @throws Error when there are tokens in theme that aren't in base - */ - function isStrictSubset(base, theme, path = []) { - for (const name in theme) { - if (typeof theme[name] === 'object') { - if (base[name] === undefined) { - throw new Error( - `Local themeable value does not exist in base theme: --${path.join( - '-', - )}.${name}"`, - ); - } - isStrictSubset(base[name], theme[name], path.concat(name)); - } - } - } - try { // Keys in the theme file must be a strict subset of those in the base file isStrictSubset(baseTheme, localTheme); diff --git a/bin/eds-init.js b/bin/eds-init.js index 33da4f57b..e011dcfcf 100755 --- a/bin/eds-init.js +++ b/bin/eds-init.js @@ -9,9 +9,9 @@ packageRootPath = path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/json/'; } catch (e) { + // used for working on theming within EDS console.error('EDS package not installed. Using local path...'); - packageRootPath = - path.dirname(require.main.path) + '/src/tokens-dist/json/'; + packageRootPath = path.dirname(require.main.path) + '/lib/tokens/json/'; } // read in the config from config file, package json "eds", etc. @@ -22,16 +22,19 @@ try { fs.copyFileSync( packageRootPath + 'theme-base.json', - `${config.json}app-theme.json`, + `${config.src}app-theme.json`, fs.constants.COPYFILE_EXCL, ); } catch (error) { - console.error('The local theme file already exists. Exiting.'); + console.error( + 'The local theme file already exists. Exiting. Details: \n', + error, + ); return 1; } console.log( - 'File copy completed! Please use `npx eds-apply-theme` to generate theme tokens (CSS Variables).', + 'File copy completed! Please use `npx eds-apply-theme` to generate theme token file(s).', ); } })(); diff --git a/package.json b/package.json index b9467f34b..0162b6782 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@chanzuckerberg/eds", - "version": "13.8.1", + "version": "13.9.0", "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications", "author": "CZI ", "homepage": "https://github.com/chanzuckerberg/edu-design-system", @@ -88,11 +88,11 @@ "react-dom": ">= 17" }, "dependencies": { - "@headlessui/react": "^1.7.17", + "@headlessui/react": "^1.7.18", "@popperjs/core": "^2.11.8", "@tippyjs/react": "^4.2.6", "@types/lodash": "^4.14.202", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "graphemer": "^1.4.0", "lilconfig": "^2.1.0", "lodash": "^4.17.21", @@ -106,7 +106,7 @@ "svg4everybody": "^2.1.9" }, "devDependencies": { - "@babel/preset-env": "^7.23.6", + "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@chanzuckerberg/axe-storybook-testing": "^7.1.3", @@ -115,29 +115,29 @@ "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9", "@chanzuckerberg/eslint-plugin-stories": "^3.2.14", "@chanzuckerberg/story-utils": "^4.0.0", - "@commitlint/cli": "^18.4.3", - "@commitlint/config-conventional": "^18.4.3", + "@commitlint/cli": "^18.4.4", + "@commitlint/config-conventional": "^18.4.4", "@geometricpanda/storybook-addon-badges": "^2.0.0", - "@omlet/cli": "^1.1.2", + "@omlet/cli": "^1.2.2", "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.5", + "@rollup/plugin-typescript": "^11.1.6", "@size-limit/file": "^8.2.6", - "@storybook/addon-a11y": "^7.6.6", - "@storybook/addon-essentials": "^7.6.6", - "@storybook/addon-interactions": "^7.6.6", - "@storybook/addon-links": "^7.6.6", + "@storybook/addon-a11y": "^7.6.7", + "@storybook/addon-essentials": "^7.6.7", + "@storybook/addon-interactions": "^7.6.7", + "@storybook/addon-links": "^7.6.7", "@storybook/addon-styling": "^1.3.7", - "@storybook/react": "^7.6.6", - "@storybook/react-webpack5": "^7.6.6", + "@storybook/react": "^7.6.7", + "@storybook/react-webpack5": "^7.6.7", "@storybook/testing-library": "^0.2.2", "@storybook/testing-react": "^2.0.1", - "@testing-library/jest-dom": "^6.1.5", + "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", - "@testing-library/user-event": "^14.5.1", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.11", - "@types/node": "^20.10.5", - "@types/react": "^18.2.45", - "@types/react-beautiful-dnd": "^13.1.7", + "@types/node": "^20.11.0", + "@types/react": "^18.2.47", + "@types/react-beautiful-dnd": "^13.1.8", "@types/react-dom": "^18.2.18", "@types/react-portal": "^4.0.7", "axe-core": "4.8.3", @@ -146,7 +146,7 @@ "copyfiles": "^2.4.1", "eslint": "^8.56.0", "eslint-config-prettier": "^9.0.0", - "eslint-plugin-jest": "^27.6.0", + "eslint-plugin-jest": "^27.6.2", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-testing-library": "^6.2.0", @@ -156,8 +156,8 @@ "jest-environment-jsdom": "^29.7.0", "jest-preset-stylelint": "^6.3.2", "lint-staged": "^13.3.0", - "plop": "^4.0.0", - "postcss": "^8.4.32", + "plop": "^4.0.1", + "postcss": "^8.4.33", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-mixins": "^9.0.4", @@ -167,15 +167,15 @@ "prettier-plugin-tailwindcss": "^0.5.7", "react": "^18.2.0", "react-dom": "^18.2.0", - "rollup": "^4.9.1", + "rollup": "^4.9.5", "rollup-plugin-postcss": "^4.0.2", "size-limit": "^8.2.6", "standard-version": "^9.5.0", - "storybook": "^7.6.6", + "storybook": "^7.6.7", "style-dictionary": "^3.9.1", "stylelint": "^15.11.0", "stylelint-config-recommended": "^13.0.0", - "tailwindcss": "^3.4.0", + "tailwindcss": "^3.4.1", "ts-jest": "^29.1.1", "typescript": "^5.2.2" }, diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css index d9dbb8bdf..318456891 100644 --- a/src/components/Avatar/Avatar.module.css +++ b/src/components/Avatar/Avatar.module.css @@ -31,49 +31,49 @@ } .avatar--xs { - font: var(--eds-theme-typography-title-xs); + font: var(--eds-theme-typography-tag); height: var(--eds-size-3); width: var(--eds-size-3); } .avatar--sm { - font: var(--eds-theme-typography-title-sm); + font: var(--eds-theme-typography-title-sm-bold); height: var(--eds-size-4); width: var(--eds-size-4); } .avatar--md { - font: var(--eds-theme-typography-title-md); + font: var(--eds-theme-typography-title-md-bold); height: var(--eds-size-5); width: var(--eds-size-5); } .avatar--lg { - font: var(--eds-theme-typography-title-md); + font: var(--eds-theme-typography-title-md-bold); height: var(--eds-size-6); width: var(--eds-size-6); } .avatar--xl { - font: var(--eds-theme-typography-title-lg); + font: var(--eds-theme-typography-headline-md-bold); height: var(--eds-size-8); width: var(--eds-size-8); } .avatar--xxl { - font: var(--eds-theme-typography-title-lg); + font: var(--eds-theme-typography-headline-lg-bold); height: var(--eds-size-12); width: var(--eds-size-12); } .avatar--xxxl { - font: var(--eds-theme-typography-title-lg); + font: var(--eds-theme-typography-headline-lg-bold); height: calc(var(--eds-size-base-unit) * 20); width: calc(var(--eds-size-base-unit) * 20); @@ -83,6 +83,10 @@ border-radius: var(--eds-border-radius-full); } +.avatar--square { + border-radius: var(--eds-border-radius-none); +} + .avatar__image { width: 100%; } diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index df8a3ea11..fa20b8a1c 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -131,7 +131,9 @@ export const Avatar = ({ {...other} > {variant === 'initials' && avatarDisplayName} - {variant === 'icon' && } + {variant === 'icon' && ( + + )} {variant === 'image' && src && ( user )} diff --git a/src/components/Avatar/__snapshots__/Avatar.test.ts.snap b/src/components/Avatar/__snapshots__/Avatar.test.ts.snap index 8caed63a6..5c3253c2b 100644 --- a/src/components/Avatar/__snapshots__/Avatar.test.ts.snap +++ b/src/components/Avatar/__snapshots__/Avatar.test.ts.snap @@ -20,7 +20,10 @@ exports[` ExtraExtraExtraLarge story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > ExtraExtraLarge story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > ExtraLarge story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > ExtraSmall story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > Large story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > Medium story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > Small story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > Square story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > WithCustomIcon story renders snapshot 1`] = ` aria-hidden="true" class="icon" fill="currentColor" + height="80%" + style="--icon-size: 80%;" viewBox="0 0 24 24" + width="80%" xmlns="http://www.w3.org/2000/svg" > ( -
- {Story()} -
- ), - ], + decorators: [(Story) =>
{Story()}
], } as Meta; type Args = ComponentProps; diff --git a/src/components/DragDrop/DragDrop.tsx b/src/components/DragDrop/DragDrop.tsx index 949ccbb9f..66253e624 100644 --- a/src/components/DragDrop/DragDrop.tsx +++ b/src/components/DragDrop/DragDrop.tsx @@ -138,6 +138,8 @@ type DragDropContainerProps = { /** * Container for draggable components to be dropped within the container. + * + * @deprecated */ const DragDropContainer = ({ container, @@ -198,8 +200,9 @@ const DragDropContainer = ({ /** * Component that contains header section for the container which consists of drag and drop components. + * + * @deprecated */ - const DragDropContainerHeader = ({ className, children, @@ -214,6 +217,8 @@ const DragDropContainerHeader = ({ /** * Item to be dragged and dropped in containers. + * + * @deprecated */ const DragDropItem = ({ className, @@ -270,8 +275,10 @@ const DragDropItem = ({ * `import {DragDrop} from "@chanzuckerberg/eds"` * * A flexible Drag and Drop component that allows items to be dragged and dropped in containers. + * + * @deprecated */ -export const DragDrop = ({ +const DragDrop = ({ className, items, containers, @@ -554,3 +561,5 @@ export const DragDrop = ({ }; DragDrop.ContainerHeader = DragDropContainerHeader; + +export { DragDrop }; diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap index 241a97398..30842dd51 100644 --- a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap +++ b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap @@ -2,7 +2,7 @@ exports[` Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` exports[` HoveredHandle story renders snapshot 1`] = `
HoveredHandle story renders snapshot 1`] = ` exports[` Interactive story renders snapshot 1`] = `
item !== 'yield'), }, }, } as Meta; @@ -33,7 +33,7 @@ export const LongText: StoryObj = { }; const getVariants = (optionalArgs: Omit = {}) => - VARIANTS.map((variant) => { + VARIANTS.filter((item) => item !== 'yield').map((variant) => { return ( = { }} > {getVariants({ isFullWidth: true })} -
), }; @@ -115,13 +109,6 @@ export const FullWidthStrongVariants: StoryObj = { }} > {getVariants({ isFullWidth: true, isStrong: true })} -
), }; diff --git a/src/components/InlineNotification/InlineNotification.tsx b/src/components/InlineNotification/InlineNotification.tsx index efd89b873..eeb79c1f7 100644 --- a/src/components/InlineNotification/InlineNotification.tsx +++ b/src/components/InlineNotification/InlineNotification.tsx @@ -45,6 +45,9 @@ type Props = { * will be hidden and the text will be lighter. * Overrides variant prop and isStrong prop as a result. * Only to be used with isFullWidth. + * + * **Deprecated**. This will be removed in the next major version. + * @deprecated */ inactive?: boolean; /** @@ -60,8 +63,9 @@ type Props = { */ text: React.ReactNode; /** - * The color variant of the tag. New variants should be supported - * in the VARIANTS array and by its separate style in CSS file. + * The color variant of the tag. + * + * **Deprecated**. "Yield" will be removed in the next major version. */ variant: Variant; }; diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap index c12478fd7..4d403cff3 100644 --- a/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap +++ b/src/components/InlineNotification/__snapshots__/InlineNotification.test.ts.snap @@ -111,64 +111,6 @@ exports[` FullWidthStrongVariants story renders snapshot 1 warning inline notification lorem ipsum
-
- - - yield - - - - - - yield inline notification lorem ipsum - -
-
- - - success - - - - - inactive inline notification lorem ipsum - -
`; @@ -283,64 +225,6 @@ exports[` FullWidthVariants story renders snapshot 1`] = ` warning inline notification lorem ipsum -
- - - yield - - - - - - yield inline notification lorem ipsum - -
-
- - - success - - - - - inactive inline notification lorem ipsum - -
`; @@ -455,38 +339,6 @@ exports[` StrongVariants story renders snapshot 1`] = ` warning inline notification lorem ipsum -
- - - yield - - - - - - yield inline notification lorem ipsum - -
`; @@ -572,38 +424,6 @@ exports[` SubtleVariants story renders snapshot 1`] = ` warning inline notification lorem ipsum -
- - - yield - - - - - - yield inline notification lorem ipsum - -
`; diff --git a/src/components/InputField/InputField.tsx b/src/components/InputField/InputField.tsx index 2c2de69da..537d34223 100644 --- a/src/components/InputField/InputField.tsx +++ b/src/components/InputField/InputField.tsx @@ -78,7 +78,10 @@ export type InputFieldProps = React.InputHTMLAttributes & { */ required?: boolean; /** - * String for the required label to add additional information if needed. + * String for the required label to add additional information if needed. Currently not being used. + * + * **Deprecated**. This will be removed in the next major version. + * @deprecated */ requiredLabel?: string; /** diff --git a/src/components/InputLabel/InputLabel.stories.ts b/src/components/InputLabel/InputLabel.stories.ts index 1dc3d1d6a..5b712c46f 100644 --- a/src/components/InputLabel/InputLabel.stories.ts +++ b/src/components/InputLabel/InputLabel.stories.ts @@ -1,4 +1,3 @@ -import { BADGE } from '@geometricpanda/storybook-addon-badges'; import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; @@ -11,7 +10,7 @@ export default { children: 'Label', }, parameters: { - badges: ['1.0', BADGE.BETA], + badges: ['1.0'], }, } as Meta; diff --git a/src/components/Label/Label.stories.ts b/src/components/Label/Label.stories.ts index e8dd75d02..f83f1d533 100644 --- a/src/components/Label/Label.stories.ts +++ b/src/components/Label/Label.stories.ts @@ -19,10 +19,3 @@ export const Default: StoryObj = { required: true, }, }; - -export const Optional: StoryObj = { - args: { - text: 'Label', - required: false, - }, -}; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index ba9d63a30..8e1d842c3 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -25,15 +25,23 @@ export interface Props { */ labelAfter?: ReactNode; /** - * String for the optional label. By default it is '(optional)' + * String for the optional label. + * + * **Default is `"(optional)"`** + * + * **Deprecated**. This will be removed in the next major version. + * @deprecated */ optionalLabel?: string; /** - * Indicates that field is required for form to be successfully submitted. Non-required fields will display a text "(optional)" beside the label text + * Indicates that field is required for form to be successfully submitted. */ required?: boolean; /** * String for the required label to add additional information if needed. + * + * **Deprecated**. This will be removed in the next major version. + * @deprecated */ requiredLabel?: string; /** diff --git a/src/components/Label/__snapshots__/Label.test.ts.snap b/src/components/Label/__snapshots__/Label.test.ts.snap index 5560a63a6..92a3428c6 100644 --- a/src/components/Label/__snapshots__/Label.test.ts.snap +++ b/src/components/Label/__snapshots__/Label.test.ts.snap @@ -8,17 +8,3 @@ exports[` `; - -exports[`