refactor(Slug): rename callout to ai-popover (#15892)

carbon-design-system · Mar 6, 2024 · 5ab7952 · 5ab7952
1 parent 7a9e2e6
commit 5ab7952
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 296 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -12,11 +12,14 @@ Array [
   "aiBorderStart",
   "aiBorderStrong",
   "aiDropShadow",
-  "aiGradientEnd",
-  "aiGradientStart01",
-  "aiGradientStart02",
   "aiInnerShadow",
   "aiOverlay",
+  "aiPopoverCaretBottom",
+  "aiPopoverCaretBottomBackground",
+  "aiPopoverCaretBottomBackgroundActions",
+  "aiPopoverCaretCenter",
+  "aiPopoverShadowOuter01",
+  "aiPopoverShadowOuter02",
   "aiSkeletonBackground",
   "aiSkeletonElementBackground",
   "background",
@@ -301,26 +304,6 @@ Array [
   "slow02",
   "slugBackground",
   "slugBackgroundHover",
-  "slugCalloutAuraEnd",
-  "slugCalloutAuraEndHover01",
-  "slugCalloutAuraEndHover02",
-  "slugCalloutAuraEndSelected",
-  "slugCalloutAuraStart",
-  "slugCalloutAuraStartHover01",
-  "slugCalloutAuraStartHover02",
-  "slugCalloutAuraStartSelected",
-  "slugCalloutCaretBottom",
-  "slugCalloutCaretBottomBackground",
-  "slugCalloutCaretBottomBackgroundActions",
-  "slugCalloutCaretCenter",
-  "slugCalloutGradientBottom",
-  "slugCalloutGradientBottomHover",
-  "slugCalloutGradientBottomSelected",
-  "slugCalloutGradientTop",
-  "slugCalloutGradientTopHover",
-  "slugCalloutGradientTopSelected",
-  "slugCalloutShadowOuter01",
-  "slugCalloutShadowOuter02",
   "slugGradient",
   "slugGradientHover",
   "slugHollowHover",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -132,25 +132,8 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-background-hover",
         "slug-gradient-hover",
         "slug-hollow-hover",
-        "slug-callout-gradient-top",
-        "slug-callout-gradient-bottom",
-        "slug-callout-aura-start",
-        "slug-callout-aura-end",
-        "slug-callout-gradient-top-hover",
-        "slug-callout-gradient-bottom-hover",
-        "slug-callout-aura-start-hover-01",
-        "slug-callout-aura-start-hover-02",
-        "slug-callout-aura-end-hover-01",
-        "slug-callout-aura-end-hover-02",
-        "slug-callout-gradient-top-selected",
-        "slug-callout-gradient-bottom-selected",
-        "slug-callout-aura-start-selected",
-        "slug-callout-aura-end-selected",
-        "ai-gradient-start-01",
-        "ai-gradient-start-02",
-        "ai-gradient-end",
-        "slug-callout-shadow-outer-01",
-        "slug-callout-shadow-outer-02",
+        "ai-popover-shadow-outer-01",
+        "ai-popover-shadow-outer-02",
         "ai-inner-shadow",
         "ai-aura-start",
         "ai-aura-start-table",
@@ -165,10 +148,10 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-skeleton-background",
         "ai-skeleton-element-background",
         "ai-overlay",
-        "slug-callout-caret-center",
-        "slug-callout-caret-bottom",
-        "slug-callout-caret-bottom-background",
-        "slug-callout-caret-bottom-background-actions",
+        "ai-popover-caret-center",
+        "ai-popover-caret-bottom",
+        "ai-popover-caret-bottom-background",
+        "ai-popover-caret-bottom-background-actions",
         "chat-prompt-background",
         "chat-prompt-border-start",
         "chat-prompt-border-end",

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -456,7 +456,7 @@
   }
 
   .#{$prefix}--modal--slug .#{$prefix}--modal-container {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
     background-color: $layer;
@@ -466,7 +466,7 @@
 
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
-    @include callout-gradient('default', 64px, 'layer');
+    @include ai-popover-gradient('default', 64px, 'layer');
 
     box-shadow: inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;

diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
@@ -327,14 +327,14 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
-    @include callout-gradient();
+    @include ai-popover-gradient();
 
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      -40px 30px 100px -25px $slug-callout-shadow-outer-01,
-      -60px 80px 60px -45px $slug-callout-shadow-outer-02;
+      -40px 30px 100px -25px $ai-popover-shadow-outer-01,
+      -60px 80px 60px -45px $ai-popover-shadow-outer-02;
     color: $text-primary;
     min-inline-size: convert.to-rem(280px);
   }
@@ -417,7 +417,7 @@ $sizes: (
     }
 
     &::after {
-      background: $slug-callout-caret-bottom-background;
+      background: $ai-popover-caret-bottom-background;
       block-size: convert.to-rem(2px);
       border-end-end-radius: 50%;
       border-end-start-radius: 50%;
@@ -530,8 +530,8 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::before {
-      border-color: $slug-callout-caret-bottom;
-      background: $slug-callout-caret-bottom-background;
+      border-color: $ai-popover-caret-bottom;
+      background: $ai-popover-caret-bottom-background;
     }
   }
 
@@ -547,7 +547,7 @@ $sizes: (
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-caret {
     &::before {
-      background: $slug-callout-caret-bottom-background-actions;
+      background: $ai-popover-caret-bottom-background-actions;
     }
   }
 
@@ -560,7 +560,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::before {
-      border-color: $slug-callout-caret-center;
+      border-color: $ai-popover-caret-center;
     }
   }
 

diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
@@ -394,15 +394,15 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
@@ -421,7 +421,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
-    @include callout-gradient('hover', 0, 'layer');
+    @include ai-popover-gradient('hover', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }
@@ -432,7 +432,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
-    @include callout-gradient('selected', 0, 'layer');
+    @include ai-popover-gradient('selected', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }

diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -68,12 +68,12 @@
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds callout gradient styles to a component
 /// @access private
-/// @example @include callout-gradient();
+/// @example @include ai-popover-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
 /// @param {String} $background  - specify the token to be used as the background
 /// @group utilities
-@mixin callout-gradient(
+@mixin ai-popover-gradient(
   $type: 'default',
   $offset: 0,
   $background: 'background'

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -16,9 +16,6 @@ import {
   blue70,
   blue100,
 
-  // CoolGray
-  coolGray10,
-
   // Gray
   gray10,
   gray10Hover,
@@ -230,9 +227,9 @@ export const aiAuraHoverBackground = blue10;
 export const aiAuraHoverStart = rgba(blue50, 0.4);
 export const aiAuraHoverEnd = rgba(white, 0);
 
-// Callout
-export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
-export const slugCalloutShadowOuter02 = rgba(black, 0.1);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue70, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.1);
 
 // AI skeleton
 export const aiSkeletonBackground = blue20Hover;
@@ -241,30 +238,11 @@ export const aiSkeletonElementBackground = blue100;
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-export const slugCalloutGradientTop = rgba(gray10, 0.85);
-export const slugCalloutGradientBottom = rgba(gray20, 0.85);
-export const aiGradientStart01 = rgba(coolGray10, 0.5);
-export const aiGradientStart02 = rgba(blue10, 0.5);
-export const aiGradientEnd = rgba(white, 0);
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
-export const slugCalloutAuraEndHover01 = rgba(white, 0);
-export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
-export const slugCalloutAuraEndHover02 = rgba(white, 0);
-export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
-export const slugCalloutAuraEndSelected = rgba(white, 0);
-
 // One off tokens for caret
-export const slugCalloutCaretCenter = '#A7C7FF';
-export const slugCalloutCaretBottom = blue20;
-export const slugCalloutCaretBottomBackgroundActions = '#D2DCEE';
-export const slugCalloutCaretBottomBackground = '#CCDBF8';
+export const aiPopoverCaretCenter = '#A7C7FF';
+export const aiPopoverCaretBottom = blue20;
+export const aiPopoverCaretBottomBackgroundActions = '#D2DCEE';
+export const aiPopoverCaretBottomBackground = '#CCDBF8';
 
 // Chat tokens
 export const chatPromptBackground = white;

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -7,8 +7,6 @@
 
 import {
   // Blue
-  blue20,
-  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -235,9 +233,9 @@ export const aiAuraHoverBackground = layerHover01;
 export const aiAuraHoverStart = rgba(blue50, 0.4);
 export const aiAuraHoverEnd = rgba(black, 0);
 
-// Callout
-export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
-export const slugCalloutShadowOuter02 = rgba(black, 0.65);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.65);
 
 // AI skeleton
 export const aiSkeletonBackground = blue70Hover;
@@ -246,30 +244,11 @@ export const aiSkeletonElementBackground = blue100;
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-export const slugCalloutGradientTop = rgba(gray100, 0.85);
-export const slugCalloutGradientBottom = rgba(gray90, 0.85);
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
-export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-
 // One off tokens for caret
-export const slugCalloutCaretCenter = '#3F68AF';
-export const slugCalloutCaretBottom = '#3D4655';
-export const slugCalloutCaretBottomBackgroundActions = '#192436';
-export const slugCalloutCaretBottomBackground = '#213250';
+export const aiPopoverCaretCenter = '#3F68AF';
+export const aiPopoverCaretBottom = '#3D4655';
+export const aiPopoverCaretBottomBackgroundActions = '#192436';
+export const aiPopoverCaretBottomBackground = '#213250';
 
 // Chat tokens
 export const chatPromptBackground = gray100;

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -7,8 +7,6 @@
 
 import {
   // Blue
-  blue20,
-  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -236,9 +234,9 @@ export const aiAuraHoverBackground = layerHover01;
 export const aiAuraHoverStart = rgba(blue50, 0.4);
 export const aiAuraHoverEnd = rgba(black, 0);
 
-// Callout
-export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
-export const slugCalloutShadowOuter02 = rgba(black, 0.65);
+// AI Popover
+export const aiPopoverShadowOuter01 = rgba(blue80, 0.25);
+export const aiPopoverShadowOuter02 = rgba(black, 0.65);
 
 // AI skeleton
 export const aiSkeletonBackground = blue70Hover;
@@ -247,30 +245,11 @@ export const aiSkeletonElementBackground = blue100;
 // AI Modal tokens
 export const aiOverlay = rgba(blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-export const slugCalloutGradientTop = rgba(gray100, 0.85);
-export const slugCalloutGradientBottom = rgba(gray90, 0.85);
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
-export const slugCalloutAuraStart = aiAuraStart;
-export const slugCalloutAuraEnd = aiAuraEnd;
-export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
-export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
-export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
-export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
-export const slugCalloutAuraStartHover02 = 'transparent';
-export const slugCalloutAuraEndHover02 = 'transparent';
-export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
-export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
-export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
-export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-
 // One off tokens for caret
-export const slugCalloutCaretCenter = '#456FB5';
-export const slugCalloutCaretBottom = '#465060';
-export const slugCalloutCaretBottomBackgroundActions = '#253042';
-export const slugCalloutCaretBottomBackground = '#2D3F5C';
+export const aiPopoverCaretCenter = '#456FB5';
+export const aiPopoverCaretBottom = '#465060';
+export const aiPopoverCaretBottomBackgroundActions = '#253042';
+export const aiPopoverCaretBottomBackground = '#2D3F5C';
 
 // Chat tokens
 export const chatPromptBackground = gray100;