diff --git a/.yarn/offline-mirror/arch-2.1.1.tgz b/.yarn/offline-mirror/arch-2.1.1.tgz new file mode 100644 index 000000000000..9afa9eb7b208 Binary files /dev/null and b/.yarn/offline-mirror/arch-2.1.1.tgz differ diff --git a/.yarn/offline-mirror/clipboardy-2.1.0.tgz b/.yarn/offline-mirror/clipboardy-2.1.0.tgz new file mode 100644 index 000000000000..1c27c6b4a790 Binary files /dev/null and b/.yarn/offline-mirror/clipboardy-2.1.0.tgz differ diff --git a/docs/guides/sass.md b/docs/guides/sass.md new file mode 100644 index 000000000000..4f9042cc5f6e --- /dev/null +++ b/docs/guides/sass.md @@ -0,0 +1,126 @@ +# Sass + + + + +## Table of Contents + +- [Overview](#overview) +- [Global flags](#global-flags) +- [Feature flags](#feature-flags) +- [Optimizing your Sass builds](#optimizing-your-sass-builds) +- [FAQ](#faq) + + + + +## Overview + +The `carbon-components` package ships all of the styles for the Carbon Design +System as Sass files in the `scss` folder. You can import this file directly +through either of the following paths: + +```scss +# Specifying node_modules directly +@import 'node_modules/carbon-components/scss/'; + +# With webpack +@import '~carbon-components/scss/'; + +# With sass config setup to include `node_modules` in paths +@import 'carbon-components/scss/'; +``` + +There are two folders in this `scss` folder: + +- `components`: which contain component-specific styles and mixins +- `globals`: which contain files that effect global settings like color, type, + grid, and more + +To quickly get started, you can import `styles.scss` which contains all of the +styles for the Carbon Design System. You can import this using the following +path: + +```scss +@import 'carbon-components/scss/globals/scss/styles.scss'; +``` + +_Note: the `styles.scss` will include all styles for the Carbon Design System, +even if you are not using all of its components, to learn how to optimize this +import check out [Optimizing your Sass builds](#optimizing-your-sass-builds)._ + +If you would like to a see a full overview of the functionality we ship in Sass, +in particular our public API, you should checkout our published +[SassDoc](../../packages/components/docs/sass.md). + +## Global flags + +The Carbon Design System sass setup specifies a number of global flags that you +can configure before importing Carbon's sass files to enable or disable +different behaviors. To enable these flags, you will need to set them before +importing any styles from Carbon. For example: + +```scss +$css--reset: false; +@import 'carbon-components/scss/globals/scss/styles.scss'; +``` + +For a full reference of flags, see the table below. + +| Global flag | Description | Default value | +| ----------------- | -------------------------------------------------------------------- | ------------- | +| `$css--font-face` | Includes the font-face mixins for the current font family (IBM Plex) | `true` | +| `$css--helpers` | Includes classes and utilities that are commonly used by components | `true` | +| `$css--body` | Sets a top-level reset, type style, and color for the `` tag | `true` | +| `$css--use-layer` | Enables use of box-shadow in `layer()` helpers | `true` | +| `$css--reset` | Includes a top-level CSS Reset | `true` | + +## Feature flags + +The Carbon Design System takes advantage of feature flags to conditionally +enable or disable new features that are being introduced to the system. To +configure feature flags, you will need to update the `$feature-flags` map before +importing any sass files from Carbon. For example: + +```scss +$feature-flags: ( + grid-columns-16: true, +); +@import 'carbon-components/scss/globals/scss/styles.scss'; +``` + +## Optimizing your Sass builds + +If you are looking to optimize the CSS that is output by including the Carbon +Design System, you can take advantage of the fact that every partial in Carbon's +package can be compiled independently. Using this feature, you can mirror the +structure of the default `styles.scss` file to include only the component styles +that you need. + +At a high-level, this would look like: + +```scss +// Your entrypoint for including sass files from Carbon +$css--font-face: true; +$css--helpers: true; +$css--body: true; +$css--use-layer: true; +$css--reset: true; +$css--default-type: true; +$css--plex: true; + +// Include defaults typically provided through the `styles.scss` entrypoint +@import 'carbon-components/scss/globals/scss/_css--reset.scss'; +@import 'carbon-components/scss/globals/scss/_css--font-face.scss'; +@import 'carbon-components/scss/globals/scss/_css--helpers.scss'; +@import 'carbon-components/scss/globals/scss/_css--body.scss'; + +// Optionally include the grid +@import 'carbon-components/scss/globals/grid/_grid.scss'; + +// Optionally include components that you need +@import 'carbon-components/scss/components/button/button'; +@import 'carbon-components/scss/components/file-uploader/file-uploader'; +``` + +## FAQ diff --git a/packages/cli/package.json b/packages/cli/package.json index 1650d93d4beb..f7f71fb9c589 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -25,6 +25,7 @@ "@octokit/rest": "^16.28.1", "chalk": "^2.4.2", "child-process-promise": "^2.2.1", + "clipboardy": "^2.1.0", "fs-extra": "^8.0.1", "inquirer": "^6.4.1", "prettier": "^1.18.2", diff --git a/packages/cli/src/commands/changelog.js b/packages/cli/src/commands/changelog.js new file mode 100644 index 000000000000..884d51491022 --- /dev/null +++ b/packages/cli/src/commands/changelog.js @@ -0,0 +1,70 @@ +/** + * Copyright IBM Corp. 2019, 2019 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const clipboard = require('clipboardy'); +const { prompt } = require('inquirer'); +const { generate } = require('../changelog'); +const { fetchLatestFromUpstream } = require('../git'); +const { createLogger, displayBanner } = require('../logger'); +const { getPackages } = require('../workspace'); + +const logger = createLogger('changelog'); + +/** + * Outputs a changelog for the list of packages in a lerna/yarn workspace for + * the given tag range. You can specify the range of commits to get the + * changelog for by using git tags, or the name of a branch. For example: + * v10.5.1..master or v10.5.0..v10.5.1 + * @returns {void} + */ +async function changelog({ range }) { + displayBanner(); + + logger.start('Fetching latest git information from upstream'); + await fetchLatestFromUpstream(); + logger.stop(); + + logger.start('Getting a list of all packages in the project'); + const packages = await getPackages(); + logger.stop(); + + const [lastTag, tag] = range.split('..'); + logger.start(`Generating a changelog for range: ${range}`); + const changelog = await generate(packages, lastTag, tag); + logger.stop(); + + const { copy } = await prompt([ + { + type: 'confirm', + name: 'copy', + message: 'Would you like to copy the changelog to your clipboard?', + }, + ]); + + if (copy) { + clipboard.writeSync(changelog); + // eslint-disable-next-line no-console + console.log('Done!'); + } else { + // eslint-disable-next-line no-console + console.log(changelog); + } +} + +module.exports = { + command: 'changelog ', + desc: 'generate the changelog for the given git tag range', + builder(yargs) { + yargs.positional('range', { + describe: 'the git tag range to generate a changelog for', + type: 'string', + }); + }, + handler: changelog, +}; diff --git a/packages/cli/src/commands/publish.js b/packages/cli/src/commands/publish.js index 2e16dffb6975..917f918e30b1 100644 --- a/packages/cli/src/commands/publish.js +++ b/packages/cli/src/commands/publish.js @@ -13,6 +13,7 @@ const semver = require('semver'); const { generate } = require('../changelog'); const { fetchLatestFromUpstream } = require('../git'); const { createLogger, displayBanner } = require('../logger'); +const { getPackages } = require('../workspace'); const logger = createLogger('publish'); // Enqueue tasks to run at the end of the command where we want to "clean-up" @@ -217,26 +218,6 @@ async function getLastGitTag() { return tags[0]; } -/** - * Lists the packages for the current project using the `lerna list` command - * @returns {Array} - */ -async function getPackages() { - const { stdout: lernaListOutput } = await execa('yarn', [ - 'lerna', - 'list', - '--json', - ]); - return JSON.parse( - // Clean-up output by stripping out `yarn` information related to the - // command and how long it took to run - lernaListOutput - .split('\n') - .slice(2, -1) - .join('\n') - ).filter(pkg => !pkg.private); -} - module.exports = { command: 'publish ', desc: diff --git a/packages/cli/src/workspace.js b/packages/cli/src/workspace.js index e8fe6ed9ba16..f0f4a393fa02 100644 --- a/packages/cli/src/workspace.js +++ b/packages/cli/src/workspace.js @@ -7,6 +7,7 @@ 'use strict'; +const execa = require('execa'); const fs = require('fs-extra'); const path = require('path'); const packageJson = require('../../../package.json'); @@ -35,6 +36,27 @@ function workspace(fn) { return (...args) => fn(...args, env); } +/** + * Lists the packages for the current project using the `lerna list` command + * @returns {Array} + */ +async function getPackages() { + const { stdout: lernaListOutput } = await execa('yarn', [ + 'lerna', + 'list', + '--json', + ]); + return JSON.parse( + // Clean-up output by stripping out `yarn` information related to the + // command and how long it took to run + lernaListOutput + .split('\n') + .slice(2, -1) + .join('\n') + ).filter(pkg => !pkg.private); +} + module.exports = { workspace, + getPackages, }; diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss index 53a026db944e..65933cd510d8 100644 --- a/packages/components/src/globals/scss/_css--reset.scss +++ b/packages/components/src/globals/scss/_css--reset.scss @@ -22,9 +22,9 @@ font-family: inherit; vertical-align: baseline; - & > *, - & > *:before, - & > *:after { + *, + *:before, + *:after { box-sizing: inherit; } } diff --git a/packages/icon-build-helpers/src/check.js b/packages/icon-build-helpers/src/check.js index a4ff025d2ac8..4b34e023e35f 100644 --- a/packages/icon-build-helpers/src/check.js +++ b/packages/icon-build-helpers/src/check.js @@ -18,7 +18,10 @@ const search = require('../src/search'); // 1) That all icons are present in metadata // 2) That all icons have a category // 3) If an icon has a size in source, make sure it exists in metadata -async function check({ categoriesPath, metadataPath, iconsPath }) { +async function check( + { categoriesPath, metadataPath, iconsPath }, + { shouldCheckSizes = true } = {} +) { const categoriesConfig = yaml.safeLoad( await fs.readFile(categoriesPath, 'utf8') ); @@ -60,7 +63,10 @@ async function check({ categoriesPath, metadataPath, iconsPath }) { // If we're dealing with an icon at the root level if (variants.length === 0) { - if (!Array.isArray(entry.sizes) || !entry.sizes.includes(icon.size)) { + if ( + shouldCheckSizes && + (!Array.isArray(entry.sizes) || !entry.sizes.includes(icon.size)) + ) { missingSizesFromMetadata.push(icon.basename); continue; } @@ -108,8 +114,17 @@ async function check({ categoriesPath, metadataPath, iconsPath }) { const members = []; for (const category of categories) { - for (const subcategory of category.subcategories) { - for (const member of subcategory.members) { + if (Array.isArray(category.subcategories)) { + for (const subcategory of category.subcategories) { + for (const member of subcategory.members) { + if (!index.has(member)) { + miscategorizedOrMissingIcons.push(member); + } + members.push(member); + } + } + } else { + for (const member of category.members) { if (!index.has(member)) { miscategorizedOrMissingIcons.push(member); } @@ -146,7 +161,7 @@ const aliasesSchema = Joi.array().items(Joi.string()); const categorySchema = Joi.array().items( Joi.object().keys({ name: Joi.string().required(), - subcategory: Joi.string().required(), + subcategory: Joi.string(), }) ); @@ -159,7 +174,7 @@ const baseIconSchema = Joi.object().keys({ Joi.string().only('glyph') ), aliases: aliasesSchema, - categories: categorySchema.required(), + categories: categorySchema, }); const iconSchema = baseIconSchema.keys({ @@ -173,12 +188,10 @@ const categoriesSchema = Joi.array().items( Joi.object().keys({ name: Joi.string().required(), subcategories: Joi.array().items( - Joi.object() - .keys({ - name: Joi.string().required(), - members: Joi.array().items(Joi.string()), - }) - .required() + Joi.object().keys({ + name: Joi.string().required(), + members: Joi.array().items(Joi.string()), + }) ), }) ); diff --git a/packages/icons/svg/32/fog.svg b/packages/icons/svg/32/fog.svg deleted file mode 100644 index aece5ace3d3c..000000000000 --- a/packages/icons/svg/32/fog.svg +++ /dev/null @@ -1 +0,0 @@ -fog \ No newline at end of file diff --git a/packages/icons/svg/32/watson-health/iCA-3D.svg b/packages/icons/svg/32/watson-health/iCA-3D.svg deleted file mode 100644 index daf851e20f01..000000000000 --- a/packages/icons/svg/32/watson-health/iCA-3D.svg +++ /dev/null @@ -1 +0,0 @@ -watson-health--iCA-3D \ No newline at end of file diff --git a/packages/icons/tasks/ci-check.js b/packages/icons/tasks/ci-check.js index 122dd6b90354..6d2c23a00f48 100644 --- a/packages/icons/tasks/ci-check.js +++ b/packages/icons/tasks/ci-check.js @@ -16,4 +16,5 @@ check({ iconsPath: path.resolve(__dirname, '../svg'), }).catch(error => { console.error(error); + process.exit(1); }); diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml index a40dd4c03c42..f34ef1069689 100644 --- a/packages/pictograms/categories.yml +++ b/packages/pictograms/categories.yml @@ -91,7 +91,7 @@ categories: members: - active--server - api - - automated--modular--management + - automate--modular--management - cloud--analytics - cloud--assets - cloud--builder--professional--services @@ -209,7 +209,7 @@ categories: - chip--credit - chip--debit - console - - console wireless + - console--wireless - desktop - electric - headphones @@ -333,7 +333,7 @@ categories: - name: Location members: - americas - - asia-australia + - asia--australia - europe-africa - globe - globe--locations @@ -458,12 +458,12 @@ categories: - engine - fuel - spaceship - - steering-wheel + - steering--wheel - train - name: Watson members: - - alchemy--language--alphabet--expanded - - alchemy--data-news + - alchemy--language--alphabet--a--expanded + - alchemy--data--news - alchemy--language - alchemy--vision - analyzes--data diff --git a/packages/pictograms/metadata.yml b/packages/pictograms/metadata.yml index 941af7bb2702..c3ba66a9e042 100644 --- a/packages/pictograms/metadata.yml +++ b/packages/pictograms/metadata.yml @@ -260,7 +260,7 @@ icons: aliases: - berlin variants: - - name: berlin--brandenberg + - name: berlin--brandenburg friendly_name: Berlin brandenberg usage: This is a description for usage - name: berlin--cathedral @@ -280,16 +280,12 @@ icons: - name: Transportation aliases: - bicycle - - name: block - friendly_name: Block + - name: blockchain + friendly_name: Blockchain usage: This is a description for usage categories: [] aliases: - block - variants: - - name: block--chain - friendly_name: Block chain - usage: This is a description for usage - name: build friendly_name: Build usage: This is a description for usage @@ -647,16 +643,6 @@ icons: - name: Watson aliases: - conversation - - name: copenhagan - friendly_name: Copenhagan - usage: This is a description for usage - categories: [] - aliases: - - copenhagan - variants: - - name: copenhagan--planetarium - friendly_name: Copenhagan planetarium - usage: This is a description for usage - name: copenhagen friendly_name: Copenhagen usage: This is a description for usage @@ -664,6 +650,9 @@ icons: aliases: - copenhagen variants: + - name: copenhagen--planetarium + friendly_name: Copenhagan planetarium + usage: This is a description for usage - name: copenhagen--snekkja friendly_name: Copenhagen snekkja usage: This is a description for usage @@ -1020,16 +1009,13 @@ icons: usage: This is a description for usage categories: - name: Building Structure - - name: europe - friendly_name: Europe + - name: europe-africa + friendly_name: Europe Africa usage: This is a description for usage categories: [] aliases: - europe - variants: - - name: europe--africa - friendly_name: Europe africa - usage: This is a description for usage + - africa - name: expand friendly_name: Expand usage: This is a description for usage @@ -2181,7 +2167,7 @@ icons: aliases: - petri variants: - - name: petri--cultures + - name: petri--culture friendly_name: Petri cultures usage: This is a description for usage - name: pill @@ -2480,7 +2466,7 @@ icons: usage: This is a description for usage categories: - name: Cities - - name: san--franciso--fog + - name: san--francisco--fog friendly_name: San franciso fog usage: This is a description for usage - name: sao @@ -2616,7 +2602,7 @@ icons: aliases: - single variants: - - name: single--sign--on + - name: single--sign-on friendly_name: Single sign on usage: This is a description for usage - name: slider @@ -2931,10 +2917,13 @@ icons: - name: Time aliases: - time - variants: - - name: time--lapse - friendly_name: Time lapse - usage: This is a description for usage + - name: time-lapse + friendly_name: Time lapse + usage: This is a description for usage + categories: + - name: Time + aliases: + - time - name: toggle friendly_name: Toggle usage: This is a description for usage @@ -3223,16 +3212,11 @@ icons: usage: This is a description for usage categories: - name: Cities - - name: wasington - friendly_name: Wasington - usage: This is a description for usage - categories: [] - aliases: - - wasington - variants: - - name: wasington--dc--capitol - friendly_name: Wasington dc capitol + - name: washington--dc--capitol + friendly_name: Washington D.C. capitol usage: This is a description for usage + categories: + - name: Cities - name: watson friendly_name: Watson usage: This is a description for usage diff --git a/packages/pictograms/svg/berlin--brandenberg.svg b/packages/pictograms/svg/berlin--brandenburg.svg similarity index 100% rename from packages/pictograms/svg/berlin--brandenberg.svg rename to packages/pictograms/svg/berlin--brandenburg.svg diff --git a/packages/pictograms/svg/block--chain.svg b/packages/pictograms/svg/blockchain.svg similarity index 100% rename from packages/pictograms/svg/block--chain.svg rename to packages/pictograms/svg/blockchain.svg diff --git a/packages/pictograms/svg/copenhagan--planetarium.svg b/packages/pictograms/svg/copenhagen--planetarium.svg similarity index 100% rename from packages/pictograms/svg/copenhagan--planetarium.svg rename to packages/pictograms/svg/copenhagen--planetarium.svg diff --git a/packages/pictograms/svg/europe--africa.svg b/packages/pictograms/svg/europe-africa.svg similarity index 100% rename from packages/pictograms/svg/europe--africa.svg rename to packages/pictograms/svg/europe-africa.svg diff --git a/packages/pictograms/svg/petri--cultures.svg b/packages/pictograms/svg/petri--culture.svg similarity index 100% rename from packages/pictograms/svg/petri--cultures.svg rename to packages/pictograms/svg/petri--culture.svg diff --git a/packages/pictograms/svg/san--franciso--fog.svg b/packages/pictograms/svg/san--francisco--fog.svg similarity index 100% rename from packages/pictograms/svg/san--franciso--fog.svg rename to packages/pictograms/svg/san--francisco--fog.svg diff --git a/packages/pictograms/svg/single--sign--on.svg b/packages/pictograms/svg/single--sign-on.svg similarity index 100% rename from packages/pictograms/svg/single--sign--on.svg rename to packages/pictograms/svg/single--sign-on.svg diff --git a/packages/pictograms/svg/time--lapse.svg b/packages/pictograms/svg/time-lapse.svg similarity index 100% rename from packages/pictograms/svg/time--lapse.svg rename to packages/pictograms/svg/time-lapse.svg diff --git a/packages/pictograms/svg/wasington--dc--capitol.svg b/packages/pictograms/svg/washington--dc--capitol.svg similarity index 100% rename from packages/pictograms/svg/wasington--dc--capitol.svg rename to packages/pictograms/svg/washington--dc--capitol.svg diff --git a/packages/pictograms/tasks/ci-check.js b/packages/pictograms/tasks/ci-check.js index 122dd6b90354..00f6297be43c 100644 --- a/packages/pictograms/tasks/ci-check.js +++ b/packages/pictograms/tasks/ci-check.js @@ -10,10 +10,16 @@ const { check } = require('@carbon/icon-build-helpers'); const path = require('path'); -check({ - categoriesPath: path.resolve(__dirname, '../categories.yml'), - metadataPath: path.resolve(__dirname, '../metadata.yml'), - iconsPath: path.resolve(__dirname, '../svg'), -}).catch(error => { +check( + { + categoriesPath: path.resolve(__dirname, '../categories.yml'), + metadataPath: path.resolve(__dirname, '../metadata.yml'), + iconsPath: path.resolve(__dirname, '../svg'), + }, + { + shouldCheckSizes: false, + } +).catch(error => { console.error(error); + process.exit(1); }); diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js index d049a278a0ae..7d4d82bfa886 100644 --- a/packages/react/src/components/ComboBox/ComboBox.js +++ b/packages/react/src/components/ComboBox/ComboBox.js @@ -12,6 +12,7 @@ import React from 'react'; import { settings } from 'carbon-components'; import { WarningFilled16 } from '@carbon/icons-react'; import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; +import { match, keys } from '../../internal/keyboard'; const { prefix } = settings; @@ -200,10 +201,6 @@ export default class ComboBox extends React.Component { } }; - handleOnInputKeyDown = event => { - event.stopPropagation(); - }; - handleOnStateChange = (newState, { setHighlightedIndex }) => { if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) { const { inputValue } = newState; @@ -293,6 +290,7 @@ export default class ComboBox extends React.Component { selectedItem, highlightedIndex, clearSelection, + toggleMenu, }) => ( { + event.stopPropagation(); + + if (match(event, keys.Enter)) { + toggleMenu(); + } + }, })} /> {invalid && ( diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index 82bf774a36e7..b294ed303555 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -12,6 +12,7 @@ import React from 'react'; import { settings } from 'carbon-components'; import { WarningFilled16 } from '@carbon/icons-react'; import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; +import { match, keys } from '../../internal/keyboard'; const { prefix } = settings; @@ -225,6 +226,7 @@ export default class Dropdown extends React.Component { getButtonProps, getItemProps, getLabelProps, + toggleMenu, }) => ( + {...getButtonProps({ + onKeyDown: event => { + if (match(event, keys.Enter)) { + toggleMenu(); + } + }, + disabled, + })}> diff --git a/packages/react/src/components/Tooltip/Tooltip-test.js b/packages/react/src/components/Tooltip/Tooltip-test.js index adaf8518bc59..8f3337197f2f 100644 --- a/packages/react/src/components/Tooltip/Tooltip-test.js +++ b/packages/react/src/components/Tooltip/Tooltip-test.js @@ -131,98 +131,8 @@ describe('Tooltip', () => { }); describe('events', () => { - it('click changes state when clickToOpen is set', () => { - const wrapper = mount(); - const icon = wrapper.find(Information); - icon.simulate('click'); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('click'); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - - it('click changes state when clickToOpen and custom icon are set', () => { - const wrapper = mount( - ( -
- ))} - clickToOpen - triggerText="Tooltip" - /> - ); - const icon = wrapper.find('.custom-icon'); - icon.simulate('click'); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('click'); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - - it('Enter key press changes state when clickToOpen is set', () => { - const wrapper = mount(); - const icon = wrapper.find(Information); - icon.simulate('keyDown', { key: 'Enter', which: 13 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('keyDown', { which: 13 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - - it('Enter key press changes state when clickToOpen and custom icon are set', () => { - const wrapper = mount( - ( -
- ))} - clickToOpen - triggerText="Tooltip" - /> - ); - const icon = wrapper.find('.custom-icon'); - icon.simulate('keyDown', { key: 'Enter', which: 13 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('keyDown', { which: 13 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - - it('Space key press changes state when clickToOpen is set', () => { - const wrapper = mount(); - const icon = wrapper.find(Information); - icon.simulate('keyDown', { key: ' ', which: 32 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('keyDown', { which: 32 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - - it('Space key press changes state when clickToOpen and custom icon are set', () => { - const wrapper = mount( - ( -
- ))} - clickToOpen - triggerText="Tooltip" - /> - ); - const icon = wrapper.find('.custom-icon'); - icon.simulate('keyDown', { key: ' ', which: 32 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(true); - icon.simulate('keyDown', { which: 32 }); - // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component - expect(wrapper.find('Tooltip').instance().state.open).toEqual(false); - }); - it('A different key press does not change state', () => { - const wrapper = mount(); + const wrapper = mount(); const icon = wrapper.find(Information); icon.simulate('keyDown', { which: 'x' }); // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component @@ -235,7 +145,6 @@ describe('Tooltip', () => { renderIcon={React.forwardRef((props, ref) => (
))} - clickToOpen triggerText="Tooltip" /> ); @@ -246,7 +155,7 @@ describe('Tooltip', () => { }); it('should be in a closed state after handleOutsideClick() is invoked', () => { - const rootWrapper = mount(); + const rootWrapper = mount(); // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component expect(rootWrapper.find('Tooltip').instance().state.open).toBeFalsy(); // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component @@ -292,7 +201,7 @@ describe('Tooltip', () => { describe('getTriggerPosition', () => { it('sets triggerPosition when triggerEl is set', () => { - const rootWrapper = mount(); + const rootWrapper = mount(); // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component rootWrapper .find('Tooltip') @@ -314,7 +223,7 @@ describe('Tooltip', () => { }); }); it('does not set triggerPosition when triggerEl is not set', () => { - const rootWrapper = mount(); + const rootWrapper = mount(); // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component rootWrapper .find('Tooltip') diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js index 22002242a350..1a648e61ec63 100644 --- a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js +++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js @@ -23,9 +23,14 @@ const TooltipDefinition = ({ ...rest }) => { const tooltipId = id || `definition-tooltip-${getInstanceId()}`; - const tooltipClassName = cx(`${prefix}--tooltip--definition`, className); + const tooltipClassName = cx( + `${prefix}--tooltip--definition`, + `${prefix}--tooltip--a11y`, + className + ); const tooltipTriggerClasses = cx( `${prefix}--tooltip__trigger`, + `${prefix}--tooltip--a11y`, `${prefix}--tooltip__trigger--definition`, { [`${prefix}--tooltip--${direction}`]: direction, @@ -34,12 +39,15 @@ const TooltipDefinition = ({ ); return (
- +
); }; @@ -70,8 +78,9 @@ TooltipDefinition.propTypes = { /** * Provide the text that will be displayed in the tooltip when it is rendered. + * TODO: rename this prop (will be a breaking change) */ - tooltipText: PropTypes.string.isRequired, + tooltipText: PropTypes.node.isRequired, }; TooltipDefinition.defaultProps = { diff --git a/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap b/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap index 6faece41932f..033098695cb8 100644 --- a/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap +++ b/packages/react/src/components/TooltipDefinition/__snapshots__/TooltipDefinition-test.js.snap @@ -8,15 +8,21 @@ exports[`TooltipDefinition should allow the user to specify the direction 1`] = tooltipText="tooltip text" >
+
`; @@ -29,15 +35,21 @@ exports[`TooltipDefinition should render 1`] = ` tooltipText="tooltip text" >
+
`; diff --git a/yarn.lock b/yarn.lock index 5d05aeadd55f..2af68104ed16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3981,6 +3981,11 @@ aproba@^2.0.0: resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc" integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ== +arch@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e" + integrity sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg== + archy@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40" @@ -6161,6 +6166,14 @@ clipboard@^2.0.0: select "^1.1.2" tiny-emitter "^2.0.0" +clipboardy@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.1.0.tgz#0123a0c8fac92f256dc56335e0bb8be97a4909a5" + integrity sha512-2pzOUxWcLlXWtn+Jd6js3o12TysNOOVes/aQfg+MT/35vrxWzedHlLwyoJpXjsFKWm95BTNEcMGD9+a7mKzZkQ== + dependencies: + arch "^2.1.1" + execa "^1.0.0" + cliui@^3.0.3, cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"