From ae0d27dc6ca7f5b53ec6c900d191b5d1b1ebf898 Mon Sep 17 00:00:00 2001 From: Lee Chase <lee.chase@uk.ibm.com> Date: Wed, 18 Nov 2020 10:13:24 +0000 Subject: [PATCH 1/5] feat: add align to tooltip --- .../src/components/tooltip/_tooltip.scss | 48 ++++++++++++++++++- .../src/components/Tooltip/Tooltip-story.js | 10 ++++ .../react/src/components/Tooltip/Tooltip.js | 14 +++++- 3 files changed, 69 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index ddb604499e8b..817e61d7e388 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -368,7 +368,7 @@ } .#{$prefix}--tooltip { - @include box-shadow; + // @include box-shadow; @include reset; position: absolute; @@ -380,7 +380,7 @@ padding: $carbon--spacing-05; color: $inverse-01; word-wrap: break-word; - background: $inverse-02; + // background: $inverse-02; border-radius: rem(2px); // Windows, Firefox HCM Fix @@ -427,6 +427,12 @@ } } + .#{$prefix}--tooltip__content { + background-color: $inverse-02; + box-shadow: 0 0 0 $spacing-05 $inverse-02, + 0 2px 6px $spacing-05 rgba(0, 0, 0, 0.2); + } + // Tooltips need to be click focusable but not sequentially focusable so the user can click within // the tooltip and not have it close. Because the element is not actionable it does not need // to have a visible focus indicator (OK'd by IBMa) @@ -448,6 +454,44 @@ content: ''; } + &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start, + &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(calc(50% - #{$spacing-05}), 0); + } + } + + &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end, + &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(calc(-50% + #{$spacing-05}), 0); + } + } + + &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(9px + 50% - #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(-3px + 50% - #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(9px - 50% + #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(-3px - 50% + #{$spacing-05})); + } + } + .#{$prefix}--tooltip__footer { display: flex; align-items: center; diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js index 7b071a6f5c5c..9aa4f7ff1521 100644 --- a/packages/react/src/components/Tooltip/Tooltip-story.js +++ b/packages/react/src/components/Tooltip/Tooltip-story.js @@ -26,8 +26,15 @@ const directions = { 'Top (top)': 'top', 'Right (right)': 'right', }; +const alignments = { + 'Start (start)': 'start', + 'Center (center)': 'center', + 'End (end)': 'end', +}; + const props = { withIcon: () => ({ + align: select('Tooltip alignment (align)', alignments, 'center'), direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0), @@ -38,6 +45,7 @@ const props = { }), withoutIcon: () => ({ showIcon: false, + align: select('Tooltip alignment (align)', alignments, 'center'), direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0), @@ -48,6 +56,7 @@ const props = { }), customIcon: () => ({ showIcon: true, + align: select('Tooltip alignment (align)', alignments, 'center'), direction: select('Tooltip direction (direction)', directions, 'bottom'), triggerText: text('Trigger text (triggerText)', 'Tooltip label'), tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0), @@ -66,6 +75,7 @@ const props = { }), customIconOnly: () => ({ showIcon: true, + align: select('Tooltip alignment (align)', alignments, 'center'), direction: select('Tooltip direction (direction)', directions, 'bottom'), iconDescription: 'Helpful Information', tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0), diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js index 11090edef5d1..10ffb210a06f 100644 --- a/packages/react/src/components/Tooltip/Tooltip.js +++ b/packages/react/src/components/Tooltip/Tooltip.js @@ -87,6 +87,12 @@ class Tooltip extends Component { } static propTypes = { + /** + * Specify the alignment (to the trigger button) of the tooltip. + * Can be one of: start, center, or end. + */ + align: PropTypes.oneOf(['start', 'center', 'end']), + /** * Contents to put into the tooltip. */ @@ -207,6 +213,7 @@ class Tooltip extends Component { }; static defaultProps = { + align: 'center', direction: DIRECTION_BOTTOM, focusTrap: true, renderIcon: Information, @@ -405,6 +412,7 @@ class Tooltip extends Component { className, triggerClassName, direction, + align, focusTrap, triggerText, showIcon, @@ -422,7 +430,11 @@ class Tooltip extends Component { const tooltipClasses = classNames( `${prefix}--tooltip`, - { [`${prefix}--tooltip--shown`]: open }, + { + [`${prefix}--tooltip--shown`]: open, + [`${prefix}--tooltip--${direction}`]: direction, + [`${prefix}--tooltip--align-${align}`]: align, + }, className ); From af93614e36dbb6b6a0128be2aa8e3088cd7caea8 Mon Sep 17 00:00:00 2001 From: Lee Chase <lee.chase@uk.ibm.com> Date: Wed, 18 Nov 2020 10:21:45 +0000 Subject: [PATCH 2/5] chore: remove comments --- packages/components/src/components/tooltip/_tooltip.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index 817e61d7e388..9518f70c9d37 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -368,7 +368,6 @@ } .#{$prefix}--tooltip { - // @include box-shadow; @include reset; position: absolute; @@ -380,7 +379,6 @@ padding: $carbon--spacing-05; color: $inverse-01; word-wrap: break-word; - // background: $inverse-02; border-radius: rem(2px); // Windows, Firefox HCM Fix From 8710f5241ec096c1a73d04362a2b05b96bdacb28 Mon Sep 17 00:00:00 2001 From: Lee Chase <lee.chase@uk.ibm.com> Date: Wed, 18 Nov 2020 12:24:10 +0000 Subject: [PATCH 3/5] fix: tooltip-test after adding alignment --- packages/react/src/components/Tooltip/Tooltip-test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Tooltip/Tooltip-test.js b/packages/react/src/components/Tooltip/Tooltip-test.js index dc7b093d3c19..08d2fab9615b 100644 --- a/packages/react/src/components/Tooltip/Tooltip-test.js +++ b/packages/react/src/components/Tooltip/Tooltip-test.js @@ -87,7 +87,9 @@ describe('Tooltip', () => { .find('[data-floating-menu-direction]') .first() .prop('className') - ).toBe(`${prefix}--tooltip ${prefix}--tooltip--shown tooltip--class`); + ).toBe( + `${prefix}--tooltip ${prefix}--tooltip--shown ${prefix}--tooltip--bottom ${prefix}--tooltip--align-center tooltip--class` + ); }); it('sets the trigger class', () => { expect(label.prop('className')).toBe( From 0b246ebc66cefd1e2fa511883bb71a27a9f9c5d7 Mon Sep 17 00:00:00 2001 From: Lee Chase <lee.chase@uk.ibm.com> Date: Tue, 24 Nov 2020 19:46:50 +0000 Subject: [PATCH 4/5] fix: review comment regarding caret position --- packages/components/docs/sass.md | 47 ++++++++++++++++++- .../src/components/tooltip/_tooltip.scss | 12 ++--- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 263c2454e4c7..954347956a53 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -3806,6 +3806,7 @@ $spacing-05: $carbon--spacing-05; - [search [mixin]](#search-mixin) - [select [mixin]](#select-mixin) - [tabs [mixin]](#tabs-mixin) + - [tooltip [mixin]](#tooltip-mixin) - [treeview [mixin]](#treeview-mixin) - [carbon-switcher [mixin]](#carbon-switcher-mixin) @@ -26984,7 +26985,6 @@ Tooltip styles } .#{$prefix}--tooltip { - @include box-shadow; @include reset; position: absolute; @@ -26996,7 +26996,6 @@ Tooltip styles padding: $carbon--spacing-05; color: $inverse-01; word-wrap: break-word; - background: $inverse-02; border-radius: rem(2px); // Windows, Firefox HCM Fix @@ -27045,6 +27044,11 @@ Tooltip styles } } + .#{$prefix}--tooltip__content { + background-color: $inverse-02; + box-shadow: 0 0 0 $spacing-05 $inverse-02, 0 2px 6px $spacing-05 rgba(0, 0, 0, 0.2); + } + // Tooltips need to be click focusable but not sequentially focusable so the user can click within // the tooltip and not have it close. Because the element is not actionable it does not need // to have a visible focus indicator (OK'd by IBMa) @@ -27066,6 +27070,44 @@ Tooltip styles content: ''; } + &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start, + &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(50%, 0); + } + } + + &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end, + &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(-50%, 0); + } + } + + &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(9px + 50% - #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(-3px + 50% - #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(9px - 50% + #{$spacing-05})); + } + } + + &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end { + .#{$prefix}--tooltip__content { + transform: translate(0, calc(-3px - 50% + #{$spacing-05})); + } + } + .#{$prefix}--tooltip__footer { display: flex; align-items: center; @@ -27287,6 +27329,7 @@ Tooltip styles - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable) - [inverse-focus-ui [variable]](#inverse-focus-ui-variable) - [inverse-link [variable]](#inverse-link-variable) + - [spacing-05 [variable]](#spacing-05-variable) - [spacing-03 [variable]](#spacing-03-variable) - [interactive-04 [variable]](#interactive-04-variable) diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index 74764d12979f..470b57c018c5 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -457,38 +457,38 @@ &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start, &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start { .#{$prefix}--tooltip__content { - transform: translate(calc(50% - #{$spacing-05}), 0); + transform: translate(50%, 0); } } &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end, &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end { .#{$prefix}--tooltip__content { - transform: translate(calc(-50% + #{$spacing-05}), 0); + transform: translate(-50%, 0); } } &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start { .#{$prefix}--tooltip__content { - transform: translate(0, calc(9px + 50% - #{$spacing-05})); + transform: translate(0, calc(9px + 50% - #{$spacing-03})); } } &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start { .#{$prefix}--tooltip__content { - transform: translate(0, calc(-3px + 50% - #{$spacing-05})); + transform: translate(0, calc(-3px + 50% - #{$spacing-03})); } } &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end { .#{$prefix}--tooltip__content { - transform: translate(0, calc(9px - 50% + #{$spacing-05})); + transform: translate(0, calc(9px - 50% + #{$spacing-03})); } } &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end { .#{$prefix}--tooltip__content { - transform: translate(0, calc(-3px - 50% + #{$spacing-05})); + transform: translate(0, calc(-3px - 50% + #{$spacing-03})); } } From f8a123ff8d75a2ad2257e2b91f4f2f5117edb980 Mon Sep 17 00:00:00 2001 From: Lee Chase <lee.chase@uk.ibm.com> Date: Tue, 1 Dec 2020 15:20:24 +0000 Subject: [PATCH 5/5] fix: review caret pos top n bottom - start n end --- packages/components/src/components/tooltip/_tooltip.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index 470b57c018c5..05d40e1c7ce5 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -457,14 +457,14 @@ &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start, &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start { .#{$prefix}--tooltip__content { - transform: translate(50%, 0); + transform: translate(calc(50% - 6px), 0); } } &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end, &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end { .#{$prefix}--tooltip__content { - transform: translate(-50%, 0); + transform: translate(calc(6px - 50%), 0); } }