From 021c9e9f79835e60685902e92e898bb9b5a50875 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Thu, 9 Dec 2021 09:10:24 -0600 Subject: [PATCH 1/4] feat(DefinitionTooltip): add DefinitionTooltip (#10197) * feat(DefinitionTooltip): add definition tooltip * feat(DefinitionTooltip): add DefinitionTooltip styles * Update packages/styles/scss/components/tooltip/_tooltip.scss Co-authored-by: Josh Black * fix(DefintionTooltip): fix blur trigger inconsitencies/adjust story copy * fix(Tooltip): format _tooltip.scss * Update packages/styles/scss/components/tooltip/_tooltip.scss Co-authored-by: Josh Black * Update packages/styles/scss/components/tooltip/_tooltip.scss Co-authored-by: Josh Black * fix(DefinitionTooltip): remove unneeded clickHandler * test(DefinitionTooltip): add DefinitionTooltip tests Co-authored-by: Josh Black --- .../Tooltip/next/DefinitionTooltip.js | 62 +++++++++++++++++++ .../Tooltip/next/Tooltip.stories.js | 17 +++++ .../Tooltip/next/__tests__/Tooltip-test.js | 41 ++++++++++++ .../scss/components/tooltip/_index.scss | 1 + .../scss/components/tooltip/_tooltip.scss | 24 +++++++ 5 files changed, 145 insertions(+) create mode 100644 packages/react/src/components/Tooltip/next/DefinitionTooltip.js diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js new file mode 100644 index 000000000000..ed45f9c67fbe --- /dev/null +++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js @@ -0,0 +1,62 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import PropTypes from 'prop-types'; +import React, { useState } from 'react'; +import { Popover, PopoverContent } from '../../Popover'; +import { match, keys } from '../../../internal/keyboard'; +import { usePrefix } from '../../../internal/usePrefix'; +import { useId } from '../../../internal/useId'; + +function DefinitionTooltip({ children, definition, ...rest }) { + const [isOpen, setOpen] = useState(false); + const prefix = usePrefix(); + const id = useId(); + + function handleKeyDown(event) { + if (match(event, keys.Escape) && isOpen) { + event.stopPropagation(); + setOpen(false); + } + } + + return ( + + + + {definition} + + + ); +} + +DefinitionTooltip.propTypes = { + /** + * Provide the content being defined + */ + children: PropTypes.node, + + /** + * Provide the content being defined + */ + definition: PropTypes.string.isRequired, +}; + +export { DefinitionTooltip }; diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js index ff23db16a297..e0abfcda687d 100644 --- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js @@ -10,6 +10,7 @@ import './story.scss'; import { Checkbox16 } from '@carbon/icons-react'; import React from 'react'; import { Tooltip } from '../next'; +import { DefinitionTooltip } from './DefinitionTooltip.js'; export default { title: 'Experimental/unstable_Tooltip', @@ -68,6 +69,22 @@ export const Duration = () => { ); }; +export const Definition = () => { + const definition = + 'Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.'; + return ( +
+

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a{' '} + URL that + you own. A custom domain can be a shared domain, a shared subdomain, or + a shared domain and host. +

+
+ ); +}; + const PlaygroundStory = (props) => { const { align, diff --git a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js index b0930979448b..e91c2746ae81 100644 --- a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js +++ b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js @@ -6,8 +6,10 @@ */ import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import { Tooltip } from '../../next'; +import { DefinitionTooltip } from '../../next/DefinitionTooltip'; describe('Tooltip', () => { it('should support a custom className with the `className` prop', () => { @@ -55,3 +57,42 @@ describe('Tooltip', () => { expect(screen.getByText('test')).toHaveAttribute('aria-describedby'); }); }); + +describe('DefintiionTooltip', () => { + it('should support a custom className with the `className` prop', () => { + const definition = 'Uniform Resource Locator'; + render( + + URL + + ); + expect(screen.getByText('URL')).toHaveClass('tooltip-class'); + }); + + it('should apply additional props to the outermost element', () => { + const definition = 'Uniform Resource Locator'; + render( + + URL + + ); + expect(screen.getByText('URL')).toHaveAttribute('data-testid', 'test'); + }); + + it('should display onClick a defintion provided via prop', () => { + const definition = 'Uniform Resource Locator'; + render( + + URL + + ); + userEvent.click(screen.getByText('URL')); + expect(screen.getByText(definition)).toHaveTextContent(definition); + }); +}); diff --git a/packages/styles/scss/components/tooltip/_index.scss b/packages/styles/scss/components/tooltip/_index.scss index a8d2eef640b9..3f06a3a645f8 100644 --- a/packages/styles/scss/components/tooltip/_index.scss +++ b/packages/styles/scss/components/tooltip/_index.scss @@ -10,3 +10,4 @@ @include tooltip.tooltip; @include tooltip.icon-tooltip; +@include tooltip.definition-tooltip; diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss index 1b9154810811..cd39f69dcc5f 100644 --- a/packages/styles/scss/components/tooltip/_tooltip.scss +++ b/packages/styles/scss/components/tooltip/_tooltip.scss @@ -11,6 +11,8 @@ @use '../../type'; @use '../../utilities/custom-property'; @use '../../utilities/convert'; +@use '../../utilities/button-reset'; +@use '../../utilities/focus-outline'; $tooltip-padding-block: custom-property.get-var( 'tooltip-padding-block', @@ -37,6 +39,28 @@ $tooltip-padding-inline: custom-property.get-var( } } +@mixin definition-tooltip { + .#{$prefix}--definition-term { + @include button-reset.reset; + + border-bottom: 1px dotted theme.$border-strong; + border-radius: 0; + } + + .#{$prefix}--definition-term:focus { + @include focus-outline.focus-outline; + + border-bottom-color: theme.$border-interactive; + } + + .#{$prefix}--definition-tooltip { + @include type.type-style('body-long-01'); + + max-width: convert.rem(176px); + padding: convert.rem(8px) convert.rem(16px); + } +} + @mixin icon-tooltip { .#{$prefix}--icon-tooltip { @include custom-property.declaration( From 0a25bcb13a5876b3b1601c2cd346d347c5688d06 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Thu, 9 Dec 2021 09:11:06 -0600 Subject: [PATCH 2/4] Revert "feat(DefinitionTooltip): add DefinitionTooltip (#10197)" (#10261) This reverts commit 021c9e9f79835e60685902e92e898bb9b5a50875. --- .../Tooltip/next/DefinitionTooltip.js | 62 ------------------- .../Tooltip/next/Tooltip.stories.js | 17 ----- .../Tooltip/next/__tests__/Tooltip-test.js | 41 ------------ .../scss/components/tooltip/_index.scss | 1 - .../scss/components/tooltip/_tooltip.scss | 24 ------- 5 files changed, 145 deletions(-) delete mode 100644 packages/react/src/components/Tooltip/next/DefinitionTooltip.js diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js deleted file mode 100644 index ed45f9c67fbe..000000000000 --- a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import PropTypes from 'prop-types'; -import React, { useState } from 'react'; -import { Popover, PopoverContent } from '../../Popover'; -import { match, keys } from '../../../internal/keyboard'; -import { usePrefix } from '../../../internal/usePrefix'; -import { useId } from '../../../internal/useId'; - -function DefinitionTooltip({ children, definition, ...rest }) { - const [isOpen, setOpen] = useState(false); - const prefix = usePrefix(); - const id = useId(); - - function handleKeyDown(event) { - if (match(event, keys.Escape) && isOpen) { - event.stopPropagation(); - setOpen(false); - } - } - - return ( - - - - {definition} - - - ); -} - -DefinitionTooltip.propTypes = { - /** - * Provide the content being defined - */ - children: PropTypes.node, - - /** - * Provide the content being defined - */ - definition: PropTypes.string.isRequired, -}; - -export { DefinitionTooltip }; diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js index e0abfcda687d..ff23db16a297 100644 --- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js @@ -10,7 +10,6 @@ import './story.scss'; import { Checkbox16 } from '@carbon/icons-react'; import React from 'react'; import { Tooltip } from '../next'; -import { DefinitionTooltip } from './DefinitionTooltip.js'; export default { title: 'Experimental/unstable_Tooltip', @@ -69,22 +68,6 @@ export const Duration = () => { ); }; -export const Definition = () => { - const definition = - 'Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.'; - return ( -
-

- Custom domains direct requests for your apps in this Cloud Foundry - organization to a{' '} - URL that - you own. A custom domain can be a shared domain, a shared subdomain, or - a shared domain and host. -

-
- ); -}; - const PlaygroundStory = (props) => { const { align, diff --git a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js index e91c2746ae81..b0930979448b 100644 --- a/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js +++ b/packages/react/src/components/Tooltip/next/__tests__/Tooltip-test.js @@ -6,10 +6,8 @@ */ import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import React from 'react'; import { Tooltip } from '../../next'; -import { DefinitionTooltip } from '../../next/DefinitionTooltip'; describe('Tooltip', () => { it('should support a custom className with the `className` prop', () => { @@ -57,42 +55,3 @@ describe('Tooltip', () => { expect(screen.getByText('test')).toHaveAttribute('aria-describedby'); }); }); - -describe('DefintiionTooltip', () => { - it('should support a custom className with the `className` prop', () => { - const definition = 'Uniform Resource Locator'; - render( - - URL - - ); - expect(screen.getByText('URL')).toHaveClass('tooltip-class'); - }); - - it('should apply additional props to the outermost element', () => { - const definition = 'Uniform Resource Locator'; - render( - - URL - - ); - expect(screen.getByText('URL')).toHaveAttribute('data-testid', 'test'); - }); - - it('should display onClick a defintion provided via prop', () => { - const definition = 'Uniform Resource Locator'; - render( - - URL - - ); - userEvent.click(screen.getByText('URL')); - expect(screen.getByText(definition)).toHaveTextContent(definition); - }); -}); diff --git a/packages/styles/scss/components/tooltip/_index.scss b/packages/styles/scss/components/tooltip/_index.scss index 3f06a3a645f8..a8d2eef640b9 100644 --- a/packages/styles/scss/components/tooltip/_index.scss +++ b/packages/styles/scss/components/tooltip/_index.scss @@ -10,4 +10,3 @@ @include tooltip.tooltip; @include tooltip.icon-tooltip; -@include tooltip.definition-tooltip; diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss index cd39f69dcc5f..1b9154810811 100644 --- a/packages/styles/scss/components/tooltip/_tooltip.scss +++ b/packages/styles/scss/components/tooltip/_tooltip.scss @@ -11,8 +11,6 @@ @use '../../type'; @use '../../utilities/custom-property'; @use '../../utilities/convert'; -@use '../../utilities/button-reset'; -@use '../../utilities/focus-outline'; $tooltip-padding-block: custom-property.get-var( 'tooltip-padding-block', @@ -39,28 +37,6 @@ $tooltip-padding-inline: custom-property.get-var( } } -@mixin definition-tooltip { - .#{$prefix}--definition-term { - @include button-reset.reset; - - border-bottom: 1px dotted theme.$border-strong; - border-radius: 0; - } - - .#{$prefix}--definition-term:focus { - @include focus-outline.focus-outline; - - border-bottom-color: theme.$border-interactive; - } - - .#{$prefix}--definition-tooltip { - @include type.type-style('body-long-01'); - - max-width: convert.rem(176px); - padding: convert.rem(8px) convert.rem(16px); - } -} - @mixin icon-tooltip { .#{$prefix}--icon-tooltip { @include custom-property.declaration( From 085a45dbdab9a94756d7a36a483d84666c02994a Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 9 Dec 2021 10:47:28 -0600 Subject: [PATCH 3/4] fix(tooltip): ensure aria-describedby is always present for JAWS (#10237) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/react/src/components/Tooltip/Tooltip-story.js | 4 ++-- packages/react/src/components/Tooltip/Tooltip.js | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index 3160bbb811fa..cbf66023cb35 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -161,8 +161,8 @@ export default { export const DefaultBottom = () => (
- -

+ +

This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead. diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index f87d5a21d6ed..cb9cfde02c73 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/packages/react/src/components/Tooltip/Tooltip.js @@ -671,7 +671,9 @@ class Tooltip extends Component { className={`${prefix}--tooltip__trigger`} {...properties} ref={refProp} - aria-describedby={tooltipBodyId}> + aria-describedby={ + tooltipBodyId || properties['aria-describedby'] + }>

@@ -681,7 +683,9 @@ class Tooltip extends Component { className={triggerClasses} ref={refProp} {...properties} - aria-describedby={tooltipBodyId}> + aria-describedby={ + tooltipBodyId || properties['aria-describedby'] + }> {triggerText} )} From 82039e4af2b077eb20ceb0624dc51e2d1433e32c Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 9 Dec 2021 12:14:47 -0600 Subject: [PATCH 4/4] fix(theme): update tokens with opacity/alpha for improved visibility (#10256) * fix(theme): update tokens with opacity/alpha for improved visibility * fix(theme): correct adjustAlpha syntax error * docs(search): add disabled story * docs(theme): adjustAlpha comment improvements Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/Search/next/Search.stories.js | 13 +++++++++++++ packages/styles/scss/components/button/_tokens.scss | 4 ++-- packages/themes/src/next/g10.js | 8 ++++---- packages/themes/src/next/g100.js | 12 ++++++------ packages/themes/src/next/g90.js | 12 ++++++------ packages/themes/src/next/white.js | 8 ++++---- packages/themes/src/tools.js | 12 ++++++++++++ 7 files changed, 47 insertions(+), 22 deletions(-) diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/next/Search.stories.js index 7d8dcb722ded..f7f5f2b72214 100644 --- a/packages/react/src/components/Search/next/Search.stories.js +++ b/packages/react/src/components/Search/next/Search.stories.js @@ -23,6 +23,19 @@ export const Default = () => ( /> ); +export const Disabled = () => ( + {}} + onKeyDown={() => {}} + /> +); + export const Expandable = () => (