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

Jump to bottom

fix(Tooltip): v11 (next) accessibility refactor #8324

Merged
merged 13 commits into from
May 21, 2021
Merged

fix(Tooltip): v11 (next) accessibility refactor #8324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
12dce0d
fix(Tooltip): add newTooltip
dakahn Apr 7, 2021
0bed659
chore: check-in work
joshblack Apr 8, 2021
6bf7b81
Merge branch 'main' of github.com:carbon-design-system/carbon into 83…
joshblack Apr 13, 2021
b0150f1
chore: check-in work
joshblack Apr 14, 2021
944d7a3
Merge branch 'main' of github.com:carbon-design-system/carbon into 83…
joshblack Apr 14, 2021
1fd6e0f
Merge branch 'main' of github.com:carbon-design-system/carbon into 83…
joshblack Apr 21, 2021
678ca4e
feat(tooltip): add delay ms props to tooltip
joshblack Apr 21, 2021
92b4d31
chore: check-in work
joshblack May 6, 2021
f7b8b82
Merge branch 'main' of github.com:carbon-design-system/carbon into 83…
joshblack May 6, 2021
176d9b6
feat(react): add useDelayedState hook
joshblack May 7, 2021
ab46569
chore(popover): update popover styles to work with tooltip
joshblack May 7, 2021
a01c57b
chore(popover): revert story includeStories change
joshblack May 7, 2021
7482562
Merge branch 'main' into 8305-tooltip-a11y-overhaul
dakahn May 20, 2021
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
272 changes: 180 additions & 92 deletions packages/components/src/components/popover/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,34 @@

/// Popover component
/// @access private
/// @group popover
/// @group components
@mixin popover {
$popover-text-color: $text-primary;
$popover-caret-offset: 1rem;
$popover-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
$popover-offset: 8px;

.#{$prefix}--popover {
// Specify the distance between the popover and the trigger. This value must
// have a unit otherwise the `calc()` expression will not work
// stylelint-disable-next-line length-zero-no-unit
--cds-popover-offset: 0rem;

// Specify the distance that the caret should be offset from the side of the
// popover when not centered
--cds-popover-caret-offset: 1rem;

position: absolute;
z-index: z('floating');
display: none;
}

.#{$prefix}--popover--relative {
position: relative;
// We use a pseudo element inside of the popover to create a space between the
// target and the popover. This helps in situations like tooltips where you do
// not want the tooltip to disappear when the user moves from the target to
// the popover.
.#{$prefix}--popover::before {
position: absolute;
display: block;
content: '';
}

.#{$prefix}--popover--open {
Expand All @@ -40,7 +53,7 @@
max-width: rem(368px);
background-color: $layer;
border-radius: 2px;
color: $popover-text-color;
color: $text-primary;
}

.#{$prefix}--popover--light .#{$prefix}--popover-contents {
Expand All @@ -52,6 +65,10 @@
color: $text-inverse;
}

.#{$prefix}--popover--caret {
--cds-popover-offset: 0.5rem;
}

.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
position: absolute;
Expand All @@ -64,167 +81,238 @@

.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
z-index: -1;
box-shadow: $popover-box-shadow;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
}

// The popover's tooltip is created by drawing two 8px x 8px boxes, one for
// rendering the box-shadow that the popover content uses and another for
// layering on top of this box to create an effect of a popover caret with a
// box-shadow. The layer with the box-shadow is rendered behind the popover
// content, while the other is rendered oabove of the popover content.
// content, while the other is rendered above of the popover content.

//-----------------------------------------------------------------------------
// Top
//-----------------------------------------------------------------------------
.#{$prefix}--popover--top,
.#{$prefix}--popover--top-left,
.#{$prefix}--popover--top-right {
.#{$prefix}--popover--top {
bottom: 0;
transform: translateY(calc(100% + #{$popover-offset}));
left: 50%;
transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
}

.#{$prefix}--popover--caret.#{$prefix}--popover--top
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--top
.#{$prefix}--popover-contents::after {
@include place-caret(top) {
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

.#{$prefix}--popover--top-left .#{$prefix}--popover-contents {
margin-left: 0;
// Top-left
.#{$prefix}--popover--top-left {
bottom: 0;
left: 0;
transform: translateY(calc(100% + var(--cds-popover-offset)));
}

.#{$prefix}--popover--caret.#{$prefix}--popover--top-left
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--top-left
.#{$prefix}--popover-contents::after {
@include place-caret(top-left) {
top: 0;
left: $popover-caret-offset;
transform: translateY(-50%) rotate(45deg);
left: 0;
transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
}

.#{$prefix}--popover--top-right .#{$prefix}--popover-contents {
margin-right: 0;
// Top-right
.#{$prefix}--popover--top-right {
right: 0;
bottom: 0;
transform: translateY(calc(100% + var(--cds-popover-offset)));
}

.#{$prefix}--popover--caret.#{$prefix}--popover--top-right
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--top-right
.#{$prefix}--popover-contents::after {
@include place-caret(top-right) {
top: 0;
right: $popover-caret-offset;
transform: translateY(-50%) rotate(45deg);
right: 0;
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
rotate(45deg);
}

// Hover area
.#{$prefix}--popover--top.#{$prefix}--popover::before,
.#{$prefix}--popover--top-left.#{$prefix}--popover::before,
.#{$prefix}--popover--top-right.#{$prefix}--popover::before {
top: 0;
right: 0;
left: 0;
height: var(--cds-popover-offset);
transform: translateY(-100%);
}

//-----------------------------------------------------------------------------
// Bottom
//-----------------------------------------------------------------------------
.#{$prefix}--popover--bottom,
.#{$prefix}--popover--bottom-left,
.#{$prefix}--popover--bottom-right {
top: 0;
transform: translateY(calc(-100% - #{$popover-offset}));
.#{$prefix}--popover--bottom {
bottom: 100%;
left: 50%;
transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
}

.#{$prefix}--popover--caret.#{$prefix}--popover--bottom
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--bottom
.#{$prefix}--popover-contents::after {
@include place-caret(bottom) {
bottom: 0;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--bottom-left
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--bottom-left
.#{$prefix}--popover-contents::after {
// Bottom left
.#{$prefix}--popover--bottom-left {
bottom: 100%;
left: 0;
transform: translateY(calc(-1 * var(--cds-popover-offset)));
}

@include place-caret(bottom-left) {
bottom: 0;
left: $popover-caret-offset;
transform: translateY(50%) rotate(45deg);
left: 0;
transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--bottom-right
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--bottom-right
.#{$prefix}--popover-contents::after {
right: $popover-caret-offset;
// Bottom right
.#{$prefix}--popover--bottom-right {
right: 0;
bottom: 100%;
transform: translateY(calc(-1 * var(--cds-popover-offset)));
}

@include place-caret(bottom-right) {
right: 0;
bottom: 0;
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
rotate(45deg);
}

// Hover area
.#{$prefix}--popover--bottom.#{$prefix}--popover::before,
.#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
.#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
right: 0;
bottom: 0;
transform: translateY(50%) rotate(45deg);
left: 0;
height: var(--cds-popover-offset);
transform: translateY(100%);
}

//-----------------------------------------------------------------------------
// Left
//-----------------------------------------------------------------------------
.#{$prefix}--popover--left,
.#{$prefix}--popover--left-top,
.#{$prefix}--popover--left-bottom {
margin-left: $popover-offset;
.#{$prefix}--popover--left {
top: 50%;
left: 100%;
transform: translate(var(--cds-popover-offset), -50%);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--left
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--left
.#{$prefix}--popover-contents::after {
@include place-caret(left) {
top: 50%;
left: 0;
transform: translate(-50%, -50%) rotate(45deg);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--left-bottom
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--left-bottom
.#{$prefix}--popover-contents::after {
bottom: $popover-caret-offset;
// Left top
.#{$prefix}--popover--left-top {
top: 0;
left: 100%;
transform: translateX($popover-offset);
}

@include place-caret(left-top) {
top: 0;
left: 0;
transform: translateX(-50%) rotate(45deg);
transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--left-top
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--left-top
.#{$prefix}--popover-contents::after {
top: $popover-caret-offset;
// Left bottom
.#{$prefix}--popover--left-bottom {
bottom: 0;
left: 100%;
transform: translateX(var(--cds-popover-offset));
}

@include place-caret(left-bottom) {
bottom: 0;
left: 0;
transform: translateX(-50%) rotate(45deg);
transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
rotate(45deg);
}

// Hover area
.#{$prefix}--popover--left.#{$prefix}--popover::before,
.#{$prefix}--popover--left-top.#{$prefix}--popover::before,
.#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
top: 0;
bottom: 0;
left: 0;
width: var(--cds-popover-offset);
transform: translateX(-100%);
}

//-----------------------------------------------------------------------------
// Right
//-----------------------------------------------------------------------------
.#{$prefix}--popover--right,
.#{$prefix}--popover--right-top,
.#{$prefix}--popover--right-bottom {
margin-right: $popover-offset;
.#{$prefix}--popover--right {
top: 50%;
right: 100%;
transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--right
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--right
.#{$prefix}--popover-contents::after {
@include place-caret(right) {
top: 50%;
right: 0;
transform: translate(50%, -50%) rotate(45deg);
}

.#{$prefix}--popover--caret.#{$prefix}--popover--right-bottom
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--right-bottom
.#{$prefix}--popover-contents::after {
// Right top
.#{$prefix}--popover--right-top {
top: 0;
right: 100%;
transform: translateX(calc(-1 * var(--cds-popover-offset)));
}

@include place-caret(right-top) {
top: 0;
right: 0;
transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
}

// Right bottom
.#{$prefix}--popover--right-bottom {
right: 100%;
bottom: 0;
transform: translateX(calc(-1 * var(--cds-popover-offset)));
}

@include place-caret(right-bottom) {
right: 0;
bottom: 0;
transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
rotate(45deg);
}

// Hover area
.#{$prefix}--popover--right.#{$prefix}--popover::before,
.#{$prefix}--popover--right-top.#{$prefix}--popover::before,
.#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
top: 0;
right: 0;
bottom: $popover-caret-offset;
transform: translateX(50%) rotate(45deg);
bottom: 0;
width: var(--cds-popover-offset);
transform: translateX(100%);
}
}

.#{$prefix}--popover--caret.#{$prefix}--popover--right-top
/// Helper for placing the caret inside a popover. The selectors here can get
/// distracting in the main stylesheet, but ultimately they target the ::before
/// and ::after pseudo-elements for the given direction. The @content block
/// passed in should appropriately position the caret for the given direction.
@mixin place-caret($direction) {
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
.#{$prefix}--popover-contents::before,
.#{$prefix}--popover--caret.#{$prefix}--popover--right-top
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
.#{$prefix}--popover-contents::after {
top: $popover-caret-offset;
right: 0;
transform: translateX(50%) rotate(45deg);
@content;
}
}

Expand Down
Loading