refactor(Coachmark): implement popover and floating ui (carbon-design…

…-system#5574) * refactor(Coachmark): implement popover and floating ui * chore: cleanup * fix: focus issue and tests * chore: cleanup * fix: merge conflicts * fix: build ts issue * fix: positioning when this is used beside any element * fix: positionTune, and few position issues * chore: removed unwanted comments
lee-chase · Jul 17, 2024 · da04d23 · da04d23
1 parent 7f4f39a
commit da04d23
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 110 deletions.
diff --git a/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss b/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss
@@ -45,6 +45,11 @@ $draghandle-btn-class: #{$block-class}__handle;
 
   visibility: hidden;
 
+  &--tooltip {
+    position: initial;
+    transform: none !important;
+  }
+
   &--fixed {
     position: fixed;
     right: $spacing-05;
@@ -68,45 +73,19 @@ $draghandle-btn-class: #{$block-class}__handle;
     visibility: visible;
   }
 
-  // CARET STYLING
-  &__caret {
-    // background-color: this property is set in _coachmark-overlay-theme.scss
-    position: absolute;
-    z-index: 5902;
-    width: 0;
-    height: 0;
-    // border-bottom-color: this property is set in _coachmark-overlay-theme.scss
-    border-right: $caret-center solid transparent;
-    border-bottom: solid $caret-center $background-inverse;
-    border-left: $caret-center solid transparent;
-  }
-
-  // OVERLAY AND CARET POSITIONING
+  // OVERLAY POSITIONING
   &--top {
     $horizontal-push: calc($distance-offset - $caret-center);
     $translate-y: calc(-1 * (100% + $distance-offset + $caret-height));
 
     transform: translate(-50%, $translate-y);
 
-    .#{$block-class}__caret {
-      left: calc(50% - $caret-center);
-      transform: rotate(180deg);
-    }
-
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        left: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-      .#{$block-class}__caret {
-        right: $horizontal-push;
-        transform: rotate(180deg);
-      }
     }
   }
 
@@ -116,26 +95,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $translate-y: calc($distance-offset + $caret-height);
 
     transform: translate(-50%, $translate-y);
-    .#{$block-class}__caret {
-      top: $top;
-      left: calc(50% - $caret-center);
-    }
 
     &-left {
       transform: translate(calc(-1 * $distance-offset), $translate-y);
-      .#{$block-class}__caret {
-        top: $top;
-        left: $horizontal-push;
-      }
     }
 
     &-right {
       transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
-
-      .#{$block-class}__caret {
-        top: $top;
-        right: $horizontal-push;
-      }
     }
   }
 
@@ -145,28 +111,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      right: $right;
-      transform: rotate(90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        right: $right;
-        transform: rotate(90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        right: $right;
-        bottom: $vertical-push;
-        transform: rotate(90deg);
-      }
     }
   }
 
@@ -176,28 +127,13 @@ $draghandle-btn-class: #{$block-class}__handle;
     $vertical-push: calc($distance-offset - ($caret-height * 0.5));
 
     transform: translate($translate-x, -50%);
-    .#{$block-class}__caret {
-      top: calc(50% - ($caret-height * 0.5));
-      left: $left;
-      transform: rotate(-90deg);
-    }
 
     &-top {
       transform: translate($translate-x, calc(-1 * $distance-offset));
-      .#{$block-class}__caret {
-        top: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
 
     &-bottom {
       transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
-      .#{$block-class}__caret {
-        bottom: $vertical-push;
-        left: $left;
-        transform: rotate(-90deg);
-      }
     }
   }
 

diff --git a/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss b/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss
@@ -8,6 +8,7 @@
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
+@use '@carbon/styles/scss/config';
 
 @use './coachmark-dragbar';
 @use './coachmark-header';
@@ -23,8 +24,8 @@
 // TODO: @use(s) of IBM Products component styles used by Coachmark
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-//$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
 
-// .#{$block-class} {
-//   // TODO: Styles.
-// }
+.#{$block-class} {
+  position: relative;
+}
diff --git a/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss b/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss
@@ -69,9 +69,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
   }
   .#{$block-class}__target {
     // the hit area
-    position: absolute;
-    top: calc(-1 * $spacing-05);
-    left: calc(-1 * $spacing-05);
+    display: flex;
     width: $spacing-07;
     height: $spacing-07;
     padding: 0;

diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.stories.jsx b/packages/ibm-products/src/components/Coachmark/Coachmark.stories.jsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 // TODO: import action to handle events if required.
 // import { action } from '@storybook/addon-actions';
 import { Crossroads } from '@carbon/react/icons';
@@ -87,8 +87,13 @@ export default {
  * TODO: Declare template(s) for one or more scenarios.
  */
 const Template = (args) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
+  });
   const theme = getSelectedCarbonTheme();
-  return (
+  const content = (
     <Coachmark {...args} theme={theme}>
       <CoachmarkOverlayElements closeButtonLabel="Done">
         <CoachmarkOverlayElement
@@ -98,6 +103,23 @@ const Template = (args) => {
       </CoachmarkOverlayElements>
     </Coachmark>
   );
+
+  return !['fixed', 'floating', 'stacked'].includes(args.overlayKind) ? (
+    <div style={{ width: '4000px', height: '2000px' }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: '1000px',
+          left: '2000px',
+        }}
+        ref={ref}
+      >
+        {content}
+      </div>
+    </div>
+  ) : (
+    content
+  );
 };
 
 /**