@carbon/web-components 2.0.0-rc.4 → 2.0.0-rc.6

package/scss/components/popover/popover.scss

@@ -10,11 +10,27 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities/custom-property';
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/popover';
 
+// The distance between the popover container and the triggering element
+// 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
+$popover-offset: custom-property.get-var('popover-offset', 0rem);
+
+// Customize the dimensions of the caret by specifying its width or height.
+// These values will be flipped in left or right directions to have the
+// correct dimensions
+$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-height: custom-property.get-var(
+  'popover-caret-height',
+  rem(6px)
+);
+
 :host(#{$prefix}-tooltip),
 :host(#{$prefix}-popover) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
@@ -71,62 +87,181 @@ $css--plex: true !default;
   );
 }
 
+:host(#{$prefix}-tooltip-content[align^='bottom']),
+:host(#{$prefix}-popover-content[align^='bottom']) {
+  .#{$prefix}--popover-caret {
+    bottom: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+    transform: translate(-50%, $popover-offset);
+  }
+}
+
 :host(#{$prefix}-tooltip-content[align='bottom']),
 :host(#{$prefix}-popover-content[align='bottom']) {
-  @extend .#{$prefix}--popover--bottom;
+  .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, calc(100% + $popover-offset));
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='bottom-left']),
 :host(#{$prefix}-popover-content[align='bottom-left']) {
-  @extend .#{$prefix}--popover--bottom-left;
+  .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(100% + $popover-offset)
+    );
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='bottom-right']),
 :host(#{$prefix}-popover-content[align='bottom-right']) {
-  @extend .#{$prefix}--popover--bottom-right;
+  .#{$prefix}--popover-content {
+    right: 0;
+    bottom: 0;
+    transform: translate($popover-offset, calc(100% + $popover-offset));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='left']),
+:host(#{$prefix}-popover-content[align^='left']) {
+  .#{$prefix}--popover-caret {
+    top: 50%;
+    right: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    transform: translate(calc(-1 * $popover-offset + 100%), -50%);
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='left']),
 :host(#{$prefix}-popover-content[align='left']) {
-  @extend .#{$prefix}--popover--left;
+  .#{$prefix}--popover-content {
+    top: 50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='left-bottom']),
 :host(#{$prefix}-popover-content[align='left-bottom']) {
-  @extend .#{$prefix}--popover--left-bottom;
+  .#{$prefix}--popover-content {
+    right: 100%;
+    bottom: -50%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(0.5 * $popover-offset - 16px)
+    );
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='left-top']),
 :host(#{$prefix}-popover-content[align='left-top']) {
-  @extend .#{$prefix}--popover--left-top;
+  .#{$prefix}--popover-content {
+    top: -50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-1 * 0.5 * $popover-offset + 16px)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='right']),
+:host(#{$prefix}-popover-content[align^='right']) {
+  .#{$prefix}--popover-caret {
+    top: 50%;
+    left: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+    transform: translate(calc($popover-offset - 100%), -50%);
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='right']),
 :host(#{$prefix}-popover-content[align='right']) {
-  @extend .#{$prefix}--popover--right;
+  .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate($popover-offset, -50%);
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='right-bottom']),
 :host(#{$prefix}-popover-content[align='right-bottom']) {
-  @extend .#{$prefix}--popover--right-bottom;
+  .#{$prefix}--popover-content {
+    bottom: 50%;
+    left: 100%;
+    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='right-top']),
 :host(#{$prefix}-popover-content[align='right-top']) {
-  @extend .#{$prefix}--popover--right-top;
+  .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    transform: translate(
+      $popover-offset,
+      calc(0.5 * $popover-offset * -1 - 16px)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='top']),
+:host(#{$prefix}-popover-content[align^='top']) {
+  .#{$prefix}--popover-caret {
+    top: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+    transform: translate(-50%, calc(-1 * $popover-offset));
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='top']),
 :host(#{$prefix}-popover-content[align='top']) {
-  @extend .#{$prefix}--popover--top;
+  .#{$prefix}--popover-content {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, calc(-100% - $popover-offset));
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='top-left']),
 :host(#{$prefix}-popover-content[align='top-left']) {
-  @extend .#{$prefix}--popover--top-left;
+  .#{$prefix}--popover-content {
+    top: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-100% - $popover-offset)
+    );
+  }
 }
 
 :host(#{$prefix}-tooltip-content[align='top-right']),
 :host(#{$prefix}-popover-content[align='top-right']) {
-  @extend .#{$prefix}--popover--top-right;
+  .#{$prefix}--popover-content {
+    top: 0;
+    right: 0;
+    transform: translate($popover-offset, calc(-100% - $popover-offset));
+  }
 }

package/scss/components/slider/slider.scss

@@ -10,7 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/slider';
-@use '../../globals/mixins/temp-layout' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-slider) {
   outline: none;

package/scss/components/tag/tag.scss

@@ -11,7 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/tag/index' as *;
-@use '../../globals/mixins/temp-layout' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-tag) {
   @extend .#{$prefix}--tag;

package/scss/components/text-input/text-input.scss

@@ -11,7 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/text-input/index';
-@use '../../globals/mixins/temp-layout' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-text-input) {
   @include emit-layout-tokens();

package/scss/components/tile/tile.scss

@@ -15,7 +15,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/link/index' as *;
 @use '@carbon/styles/scss/components/form/index' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '../../globals/mixins/temp-layout' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-tile) {
   @extend .#{$prefix}--tile;

package/es/globals/mixins/temp-layout.css.js

@@ -1,12 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * 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 { css } from 'lit';
-export default css([
-  ':root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}',
-]);

package/es/globals/mixins/temp-layout.rtl.css.js

@@ -1,12 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * 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 { css } from 'lit';
-export default css([
-  ':root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}',
-]);

package/scss/globals/mixins/temp-layout.scss

@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// TODO: remove this file once https://github.com/carbon-design-system/carbon/pull/14336 is in
-@use '@carbon/styles/scss/layout' as *;
-@use '@carbon/styles/scss/utilities/custom-property';
-
-@mixin emit-layout-tokens {
-  @each $group, $properties in $layout-tokens {
-    @each $property, $steps in $properties {
-      @each $step, $value in $steps {
-        @include custom-property.declaration(
-          'layout-#{$group}-#{$property}-#{$step}',
-          $value
-        );
-      }
-
-      // CSS max() doesn't accept '0' as a value without a unit
-      // stylelint-disable length-zero-no-unit
-      @include custom-property.declaration(
-        'layout-#{$group}-#{$property}-min',
-        0px
-      );
-      // stylelint-enable length-zero-no-unit
-
-      @include custom-property.declaration(
-        'layout-#{$group}-#{$property}-max',
-        999999999px
-      );
-    }
-  }
-}