feat(coachmark): Add default opening for not-stacked coachmarks (#6516)

* feat: add property isOpenByDefault to coachmark * feat: add tests * feat: add more comment and API documentation * feat: correct typo in doc * Update packages/ibm-products/src/components/Coachmark/Coachmark.tsx Co-authored-by: Nandan Devadula <[email protected]> * feat: refactor test * fix: isOpenByDefault should be optional * Update packages/ibm-products/src/components/Coachmark/Coachmark.tsx Co-authored-by: Alexander Melo <[email protected]> * test: remove unnecessary test * fix: remove leftover --------- Co-authored-by: Nandan Devadula <[email protected]> Co-authored-by: Alexander Melo <[email protected]>
carbon-design-system · Dec 4, 2024 · 73ee693 · 73ee693
1 parent 7005822
commit 73ee693
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js
@@ -61,6 +61,13 @@ const renderCoachmark = ({ ...rest } = {}, children = childrenContent) =>
     </Coachmark>
   );
 
+const isCoachmarkVisible = () => {
+  const coachmarkContainer = screen.getByTestId(dataTestId);
+  const coachmarkButton = coachmarkContainer.getElementsByTagName('button')[0];
+  const ariaExpanded = coachmarkButton.getAttribute('aria-expanded');
+  return ariaExpanded === 'true';
+};
+
 describe(componentName, () => {
   it('renders a component Coachmark', () => {
     renderCoachmark({ 'data-testid': dataTestId });
@@ -203,4 +210,12 @@ describe(componentName, () => {
       `${pkg.prefix}--coachmark__dark`
     );
   });
+
+  it('Check coachmark can be open by default', () => {
+    renderCoachmark({
+      'data-testid': dataTestId,
+      isOpenByDefault: true,
+    });
+    expect(isCoachmarkVisible()).toBeTruthy();
+  });
 });
diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.tsx b/packages/ibm-products/src/components/Coachmark/Coachmark.tsx
@@ -38,6 +38,7 @@ const defaults = {
   onClose: () => {},
   overlayKind: 'tooltip',
   theme: 'light',
+  isOpenByDefault: false,
 };
 
 export interface CoachmarkProps {
@@ -113,6 +114,11 @@ export interface CoachmarkProps {
    * Determines the theme of the component.
    */
   theme?: 'light' | 'dark';
+  /**
+   * Determines if the coachmark is open by default.
+   * Does nothing if `overlayKind=stacked`.
+   */
+  isOpenByDefault?: boolean;
 }
 
 /**
@@ -136,15 +142,15 @@ export let Coachmark = forwardRef<HTMLElement, CoachmarkProps>(
       portalTarget,
       target,
       theme = defaults.theme,
-
+      isOpenByDefault = defaults.isOpenByDefault,
       // Collect any other property values passed in.
       ...rest
     },
     ref
   ) => {
     const isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
     const isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
-    const [isOpen, setIsOpen] = useState(isStacked);
+    const [isOpen, setIsOpen] = useState(isStacked || isOpenByDefault);
     const [shouldResetPosition, setShouldResetPosition] = useState(false);
     const [targetRect, setTargetRect] = useState();
     const [targetOffset, setTargetOffset] = useState({ x: 0, y: 0 });
@@ -396,6 +402,12 @@ Coachmark.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Determines if the coachmark is open by default.
+   * Does nothing if `overlayKind=stacked`.
+   */
+  isOpenByDefault: PropTypes.bool,
+
   /**
    * Function to call when the Coachmark closes.
    */