@carbon/styles 0.8.0-rc.0 → 0.10.0-rc.0

package/scss/components/tooltip/_tooltip.scss

@@ -5,743 +5,56 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../theme' as *;
-@use '../../type';
-@use '../../motion' as *;
 @use '../../config' as *;
-@use '../../spacing' as *;
-@use '../button/tokens' as button;
-@use '../../utilities/focus-outline' as *;
-@use '../../utilities/component-reset' as *;
-@use '../../utilities/visually-hidden' as *;
-@use '../../utilities/tooltip' as *;
-@use '../../utilities/button-reset';
-@use '../../utilities/high-contrast-mode' as *;
-@use '../../utilities/skeleton' as *;
-@use '../../utilities/convert' as *;
-@use '../../utilities/box-shadow' as *;
-
-// TODO: deprecate legacy tooltip mixins
-// Tooltip Icon
-// Icon CSS only tooltip
-/// @access private
-/// @deprecated
-/// @group tooltip
-@mixin tooltip--icon {
-  @include reset;
-
-  position: relative;
-  display: inline-flex;
-  overflow: visible;
-  align-items: center;
-  cursor: pointer;
-
-  // Tooltip - renders as a combo of ::before and ::after elements
-  &::before,
-  &::after {
-    @include type.type-style('body-short-01');
-
-    position: absolute;
-    display: flex;
-    align-items: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity $duration-fast-01 motion(standard, productive);
-  }
-
-  &::before {
-    right: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-    border-width: 0 rem(4px) rem(5px) rem(4px);
-    border-style: solid;
-    border-color: transparent transparent $background-inverse transparent;
-    margin: 0 auto;
-    margin-top: 1px;
-    margin-left: 50%;
-    content: '';
-  }
-
-  &::after {
-    @include box-shadow;
-
-    min-width: rem(24px);
-    max-width: rem(208px);
-    height: rem(24px);
-    padding: 0 1rem;
-    margin-left: 50%;
-    background-color: $background-inverse;
-    border-radius: rem(2px);
-    color: $text-inverse;
-    content: attr(aria-label);
-    font-weight: 400;
-    pointer-events: none;
-    transform: translateX(-50%);
-    white-space: nowrap;
-  }
-
-  &:hover,
-  &:focus {
-    &::before,
-    &::after {
-      opacity: 1;
-    }
-  }
-}
-
-// Tooltip Icon caret - top position
-/// @param {String} $position ['bottom'] - The position, from: `top`, `bottom`
-/// @param {String} $align ['center'] - The alignment, from: `start`, `center`, `end`
-/// @access private
-/// @deprecated
-/// @group tooltip
-@mixin tooltip--icon-placement($position: 'bottom', $align: 'center') {
-  $translate-x: if($align == 'center', -50%, 0);
-  $translate-y-caret: if($position == 'top', calc(-100% - 9px), 10px);
-  $translate-y-body: if(
-    $position == 'top',
-    calc(-100% - 12px),
-    calc(100% + 10px)
-  );
-  $rotate-caret: if($position == 'top', 180deg, 0);
-
-  &::before {
-    transform: translate($translate-x, $translate-y-caret) rotate($rotate-caret);
-
-    @if ($position == 'top') {
-      top: 1px;
-    } @else {
-      bottom: 0;
-    }
-    @if ($align == 'start') {
-      margin-left: 4px;
-    } @else if ($align == 'end') {
-      right: 0;
-      left: auto;
-      margin-right: 4px;
-    }
-  }
-
-  &::after {
-    transform: translate($translate-x, $translate-y-body);
-
-    @if ($position == 'top') {
-      top: 0;
-    } @else {
-      bottom: 0;
-    }
-    @if ($align != 'center') {
-      margin-left: 0;
-    }
-    @if ($align == 'end') {
-      right: 0;
-    }
-  }
-}
-
-// legacy definition tooltip mixin
-/// @access private
-/// @deprecated
-/// @group tooltip
-// V11: possibly remove in V11
-@mixin tooltip--definition--legacy {
-  .#{$prefix}--tooltip--definition {
-    @include reset;
-
-    position: relative;
-
-    .#{$prefix}--tooltip__trigger {
-      @include type.type-style('label-01');
-
-      position: relative;
-      display: inline-flex;
-      border-bottom: 1px dotted $highlight;
-      color: $text-primary;
-
-      &:hover {
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-
-      &:focus {
-        @include focus-outline('border');
-
-        + .#{$prefix}--tooltip--definition__top,
-        + .#{$prefix}--tooltip--definition__bottom {
-          display: block;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip--definition__bottom,
-  .#{$prefix}--tooltip--definition__top {
-    @include box-shadow;
-
-    position: absolute;
-    z-index: 1;
-    display: none;
-    width: rem(208px);
-    padding: $spacing-03 $spacing-05;
-    margin-top: $spacing-04;
-    background: $background-inverse;
-    border-radius: rem(2px);
-    pointer-events: none;
-
-    p {
-      @include type.type-style('body-short-01');
-
-      color: $text-inverse;
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      right: 0;
-      left: 0;
-      width: 0.6rem;
-      height: 0.6rem;
-      margin-left: $spacing-05;
-      background: $background-inverse;
-    }
-  }
-
-  // Tooltip Definition caret - bottom position
-  .#{$prefix}--tooltip--definition__bottom .#{$prefix}--tooltip__caret {
-    top: -0.2rem;
-    transform: rotate(-135deg);
-  }
-
-  // Tooltip Definition caret - top position
-  .#{$prefix}--tooltip--definition__top {
-    margin-top: rem(-32px);
-    transform: translateY(-100%);
-
-    .#{$prefix}--tooltip__caret {
-      bottom: -0.2rem;
-      transform: rotate(45deg);
-    }
-  }
-
-  .#{$prefix}--tooltip--definition__align-end {
-    right: 0;
-  }
-
-  .#{$prefix}--tooltip--definition__align-center {
-    margin-left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .#{$prefix}--tooltip--definition__top.#{$prefix}--tooltip--definition__align-center {
-    margin-left: 50%;
-    transform: translate(-50%, -100%);
-  }
-
-  .#{$prefix}--tooltip--definition__align-center .#{$prefix}--tooltip__caret {
-    left: auto;
-    // Adjust by the half of the diagonal of the caret, which sizes 0.6rem
-    margin-right: calc(50% - 6px);
-    margin-left: auto;
-  }
-
-  .#{$prefix}--tooltip--definition__align-end .#{$prefix}--tooltip__caret {
-    left: auto;
-    margin-right: rem(16px);
-    margin-left: auto;
-  }
-}
-
-// legacy icon tooltip mixin
-/// @access private
-/// @deprecated
-/// @group tooltip
-// V11: possibly remove in V11
-@mixin tooltip--icon--legacy {
-  // Icon CSS only tooltip
-  .#{$prefix}--tooltip--icon {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--tooltip--icon__top,
-  .#{$prefix}--tooltip--icon__bottom {
-    @include tooltip--icon;
-
-    &:hover,
-    &:focus {
-      svg {
-        fill: $icon-secondary;
-      }
-    }
-
-    &:focus {
-      outline: 1px solid transparent;
-
-      svg {
-        @include focus-outline('border');
-      }
-    }
-  }
-
-  // Tooltip Icon caret - top position
-  .#{$prefix}--tooltip--icon__top {
-    @include tooltip--icon-placement('top');
-  }
-
-  // Tooltip Icon caret - bottom position
-  .#{$prefix}--tooltip--icon__bottom {
-    @include tooltip--icon-placement('bottom');
-  }
-
-  // Tooltip Icon caret - top position, left alignment
-  .#{$prefix}--tooltip--icon__top.#{$prefix}--tooltip--icon__align-start {
-    @include tooltip--icon-placement('top', 'start');
-  }
-
-  // Tooltip Icon caret - top position, right alignment
-  .#{$prefix}--tooltip--icon__top.#{$prefix}--tooltip--icon__align-end {
-    @include tooltip--icon-placement('top', 'end');
-  }
-
-  // Tooltip Icon caret - bottom position, left alignment
-  .#{$prefix}--tooltip--icon__bottom.#{$prefix}--tooltip--icon__align-start {
-    @include tooltip--icon-placement('bottom', 'start');
-  }
+@use '../../spacing';
+@use '../../theme';
+@use '../../type';
+@use '../../utilities/custom-property';
+@use '../../utilities/convert';
 
-  // Tooltip Icon caret - bottom position, right alignment
-  .#{$prefix}--tooltip--icon__bottom.#{$prefix}--tooltip--icon__align-end {
-    @include tooltip--icon-placement('bottom', 'end');
-  }
+$tooltip-padding-block: custom-property.get-var(
+  'tooltip-padding-block',
+  spacing.$spacing-05
+);
 
-  // Tooltip position - icon only
-  .#{$prefix}--tooltip--icon .#{$prefix}--tooltip__trigger svg {
-    margin-left: 0;
-  }
-}
+$tooltip-padding-inline: custom-property.get-var(
+  'tooltip-padding-inline',
+  spacing.$spacing-05
+);
 
-/// Tooltip styles
-/// @access private
-/// @group tooltip
 @mixin tooltip {
-  // Caret's original size was 13.75px square
-  $caret-size: rem(6.875px);
-
-  .#{$prefix}--tooltip__label {
-    @include type.type-style('label-01');
-
-    display: inline-flex;
-    align-items: center;
-    color: $text-secondary;
-
-    &:focus {
-      @include focus-outline('border');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger svg {
-    fill: $icon-secondary;
-  }
-
-  .#{$prefix}--tooltip__trigger:not(.#{$prefix}--btn--icon-only) {
-    @include button-reset.reset($width: false);
-
-    display: inline-flex;
-    align-items: center;
-    font-size: 1rem;
-
-    &:focus {
-      @include focus-outline('border');
-
-      fill: button.$button-primary-hover;
-    }
-  }
-
-  // Disabled styles
-  .#{$prefix}--tooltip__trigger:not(.#{$prefix}--btn--icon-only)[disabled] svg {
-    fill: $icon-disabled;
-  }
-
-  .#{$prefix}--tooltip__label .#{$prefix}--tooltip__trigger {
-    // Override `margin: 0` from button-reset mixin
-    margin-left: $spacing-03;
-  }
-
-  .#{$prefix}--tooltip__label--bold {
-    font-weight: 600;
-  }
-
   .#{$prefix}--tooltip {
-    @include box-shadow;
-    @include reset;
-
-    position: absolute;
-    z-index: z('floating');
-    display: none;
-    min-width: rem(208px);
-    max-width: rem(288px);
-    padding: $spacing-05;
-    margin-top: $spacing-02;
-    background: $background-inverse;
-    border-radius: rem(2px);
-    color: $text-inverse;
-    word-wrap: break-word;
-
-    // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip
-    // V11: remove in V11
-    &:focus {
-      box-shadow: inset 0 0 0 1px $background-inverse,
-        inset 0 0 0 2px $background;
-      outline: 0;
-    }
-
-    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
-    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
-      transform: translate(calc(50% - 22px), 0);
-
-      .#{$prefix}--tooltip__caret {
-        margin-left: 15px;
-      }
-    }
-
-    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
-    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
-      transform: translate(calc(22px - 50%), 0);
-
-      .#{$prefix}--tooltip__caret {
-        margin-right: 15px;
-      }
-    }
-
-    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
-      transform: translate(0, calc(-15px + 50%));
-
-      .#{$prefix}--tooltip__caret {
-        top: 14px;
-      }
-    }
-
-    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
-      transform: translate(0, calc(31px - 50%));
-
-      .#{$prefix}--tooltip__caret {
-        top: initial;
-        bottom: 25px;
-      }
-    }
-
-    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
-      transform: translate(0, calc(-26px + 50%));
-
-      .#{$prefix}--tooltip__caret {
-        top: 26px;
-      }
-    }
-
-    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
-      transform: translate(0, calc(20px - 50%));
-
-      .#{$prefix}--tooltip__caret {
-        top: initial;
-        bottom: 12px;
-      }
-    }
-
-    p {
-      @include type.type-style('body-short-01');
-    }
-
-    button {
-      padding-right: $spacing-07;
-    }
-
-    .#{$prefix}--btn:focus {
-      border-color: $focus-inverse;
-      outline-color: $background-inverse;
-    }
-
-    .#{$prefix}--link {
-      color: $link-inverse;
-      font-size: rem(14px);
-
-      &:focus {
-        outline: 1px solid $focus-inverse;
-        outline-offset: 2px;
-      }
-
-      &:active,
-      &:active:visited,
-      &:active:visited:hover {
-        color: $text-inverse;
-      }
-
-      &:visited {
-        color: $link-inverse;
-      }
-    }
-
-    // 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)
-    .#{$prefix}--tooltip__content[tabindex='-1']:focus {
-      outline: none;
-    }
-
-    .#{$prefix}--tooltip__caret {
-      position: absolute;
-      top: calc(#{$caret-size * (-1)} + 1px);
-      right: 0;
-      left: 0;
-      width: 0;
-      height: 0;
-      border-right: $caret-size solid transparent;
-      border-bottom: $caret-size solid $background-inverse;
-      border-left: $caret-size solid transparent;
-      margin: 0 auto;
-      content: '';
-    }
-
-    .#{$prefix}--tooltip__footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 1rem;
-    }
-
-    &[data-floating-menu-direction='left'] {
-      margin-left: calc(#{$spacing-03} * -1);
-
-      .#{$prefix}--tooltip__caret {
-        top: 50%;
-        // left position has an additional space between caret and tooltip
-        right: calc(#{$caret-size * (-1)} + 1px);
-        left: auto;
-        transform: rotate(90deg) translate(50%, -50%);
-      }
-    }
-
-    &[data-floating-menu-direction='top'] {
-      margin-top: calc(#{$spacing-03} * -1);
-
-      .#{$prefix}--tooltip__caret {
-        top: auto;
-        bottom: calc(#{$caret-size * (-1)} + 1px);
-        transform: rotate(180deg);
-      }
-    }
-
-    &[data-floating-menu-direction='right'] {
-      margin-left: $spacing-03;
-
-      .#{$prefix}--tooltip__caret {
-        top: 50%;
-        right: auto;
-        left: calc(#{$caret-size * (-1)} + 1px);
-        transform: rotate(270deg) translate(50%, -50%);
-      }
-    }
-
-    &[data-floating-menu-direction='bottom'] {
-      margin-top: $spacing-03;
-    }
-  }
-
-  .#{$prefix}--tooltip__heading {
-    @include type.type-style('productive-heading-01');
-
-    margin-bottom: $spacing-03;
-  }
-
-  .#{$prefix}--tooltip--shown {
-    display: block;
-    margin-top: 0;
-  }
-
-  // Tooltip Definition
-  /* begin legacy definition tooltip TODO: deprecate */
-  @include tooltip--definition--legacy;
-  /* end legacy definition tooltip */
-
-  .#{$prefix}--tooltip--definition.#{$prefix}--tooltip--a11y {
-    // Wrapping element set to inline since the tooltip isn't contained within the trigger (affects center and end alignments)
-    // Also allows for Definition Tooltip to be used within a paragraph of text as defined in the usage guidelines
-    display: inline-flex;
-  }
-
-  // default buttons in Safari are adding a small margin, affecting tooltip placement
-  .#{$prefix}--tooltip--definition button.#{$prefix}--tooltip--a11y {
-    margin: 0;
-  }
-
-  // Definition CSS only tooltip
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
-    @include type.type-style('label-01');
-
-    border-bottom: rem(1px) dotted $icon-secondary;
-    transition: border-color $duration-fast-02;
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:hover,
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:focus {
-    border-bottom-color: $interactive;
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--top {
-    @include tooltip--trigger('definition', 'top');
-    @include tooltip--placement('definition', 'top', 'start');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('definition', 'top', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('definition', 'top', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('definition', 'top', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--bottom {
-    @include tooltip--trigger('definition', 'bottom');
-    @include tooltip--placement('definition', 'bottom', 'start');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('definition', 'bottom', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('definition', 'bottom', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('definition', 'bottom', 'end');
-    }
-  }
-
-  // Tooltip Icon
-
-  /* begin tooltip icon (TODO: deprecate) */
-  @include tooltip--icon--legacy;
-  /* end legacy tooltip icon */
-
-  // Icon CSS only tooltip
-  .#{$prefix}--tooltip__trigger {
-    &:hover,
-    &:focus {
-      svg {
-        fill: $icon-secondary;
-      }
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--top {
-    @include tooltip--trigger('icon', 'top');
-    @include tooltip--placement('icon', 'top', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'top', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'top', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'top', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--right {
-    @include tooltip--trigger('icon', 'right');
-    @include tooltip--placement('icon', 'right', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'right', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'right', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'right', 'end');
-    }
+    @include custom-property.declaration('popover-offset', 12px);
   }
 
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--bottom {
-    @include tooltip--trigger('icon', 'bottom');
-    @include tooltip--placement('icon', 'bottom', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'bottom', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'bottom', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'bottom', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--left {
-    @include tooltip--trigger('icon', 'left');
-    @include tooltip--placement('icon', 'left', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'left', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'left', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'left', 'end');
-    }
-  }
-
-  // Allow pointer events on tooltip when tooltip is visible
-  .#{$prefix}--tooltip__trigger:not(.#{$prefix}--tooltip--hidden)
-    .#{$prefix}--assistive-text {
-    pointer-events: all;
-  }
-
-  // Windows HCM fix
-  /* stylelint-disable */
-  .#{$prefix}--tooltip__trigger svg,
-  .#{$prefix}--tooltip__trigger:hover svg,
-  .#{$prefix}--tooltip__trigger:focus svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
-  .#{$prefix}--tooltip__trigger:focus svg {
-    @include high-contrast-mode('focus');
-  }
+  .#{$prefix}--tooltip-content {
+    @include type.type-style('body-long-01');
 
-  .#{$prefix}--tooltip {
-    @include high-contrast-mode('outline');
-  }
+    max-width: convert.rem(288px);
+    padding: $tooltip-padding-block $tooltip-padding-inline;
 
-  .#{$prefix}--assistive-text {
-    @include high-contrast-mode('outline');
+    color: theme.$text-inverse;
   }
 }
 
-/// Tooltip styles for v11
-/// @access private
-/// @group tooltip
-@mixin tooltip-next {
-  .#{$prefix}--tooltip {
-    display: inline-block;
-    position: relative;
-  }
-
-  .#{$prefix}--tooltip-content {
-    padding: $spacing-05;
+@mixin icon-tooltip {
+  .#{$prefix}--icon-tooltip {
+    @include custom-property.declaration(
+      'tooltip-padding-block',
+      convert.rem(2px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-width',
+      convert.rem(8px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-height',
+      convert.rem(4px)
+    );
+    @include custom-property.declaration('popover-offset', convert.rem(8px));
+  }
+
+  .#{$prefix}--icon-tooltip .#{$prefix}--tooltip-content {
+    @include type.type-style('body-short-01');
   }
 }