Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add align to tooltip #7309

Merged
merged 10 commits into from
Dec 2, 2020
+115 −6
Merged

feat: add align to tooltip #7309

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ae0d27d
feat: add align to tooltip
lee-chase Nov 18, 2020
af93614
chore: remove comments
lee-chase Nov 18, 2020
8710f52
fix: tooltip-test after adding alignment
lee-chase Nov 18, 2020
8fe50c9
Merge branch 'master' into addAlignOptionsToTooltip
lee-chase Nov 18, 2020
46ba93c
Merge branch 'master' into addAlignOptionsToTooltip
lee-chase Nov 18, 2020
67e8f99
Merge branch 'addAlignOptionsToTooltip' of https://github.com/lee-cha…
lee-chase Nov 18, 2020
79bbc3d
Merge branch 'master' into addAlignOptionsToTooltip
tw15egan Nov 23, 2020
0b246eb
fix: review comment regarding caret position
lee-chase Nov 24, 2020
f8a123f
fix: review caret pos top n bottom - start n end
lee-chase Dec 1, 2020
0c628f6
Merge branch 'master' into addAlignOptionsToTooltip
kodiakhq[bot] Dec 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 45 additions & 2 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -26984,7 +26985,6 @@ Tooltip styles
}

.#{$prefix}--tooltip {
@include box-shadow;
@include reset;

position: absolute;
Expand All @@ -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
Expand Down Expand Up @@ -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)
Expand All @@ -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;
Expand Down Expand Up @@ -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)

Expand Down
46 changes: 44 additions & 2 deletions packages/components/src/components/tooltip/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,6 @@
}

.#{$prefix}--tooltip {
@include box-shadow;
@include reset;

position: absolute;
Expand All @@ -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
Expand Down Expand Up @@ -429,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)
Expand All @@ -450,6 +454,44 @@
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-03}));
}
}

&.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
.#{$prefix}--tooltip__content {
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-03}));
}
}

&.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
.#{$prefix}--tooltip__content {
transform: translate(0, calc(-3px - 50% + #{$spacing-03}));
}
}

.#{$prefix}--tooltip__footer {
display: flex;
align-items: center;
Expand Down
10 changes: 10 additions & 0 deletions packages/react/src/components/Tooltip/Tooltip-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,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),
Expand All @@ -39,6 +46,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),
Expand All @@ -49,6 +57,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),
Expand All @@ -67,6 +76,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),
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/Tooltip/Tooltip-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
14 changes: 13 additions & 1 deletion packages/react/src/components/Tooltip/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -207,6 +213,7 @@ class Tooltip extends Component {
};

static defaultProps = {
align: 'center',
direction: DIRECTION_BOTTOM,
focusTrap: true,
renderIcon: Information,
Expand Down Expand Up @@ -405,6 +412,7 @@ class Tooltip extends Component {
className,
triggerClassName,
direction,
align,
focusTrap,
triggerText,
showIcon,
Expand All @@ -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
);

Expand Down