Merge pull request #2279 from anuradha9712/feat-popover-disabled-trigger

feat(popover): add disabled prop to prevent toggle for disabled trigger
innovaccer · Jul 26, 2024 · c021f55 · c021f55
2 parents 8f822f4 + fdc01a8
commit c021f55
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 7 deletions.
diff --git a/core/components/atoms/popperWrapper/PopperWrapper.tsx b/core/components/atoms/popperWrapper/PopperWrapper.tsx
@@ -91,6 +91,10 @@ export interface PopperWrapperProps {
    * Refer to [this](https://popper.js.org/docs/v1/#modifierscomputestyle)
    */
   computeStyles?: object;
+  /**
+   * Defines whether to show popover or not
+   */
+  disabled?: boolean;
 }
 
 interface PopperWrapperState {
@@ -115,14 +119,15 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     hoverable: true,
     appendToBody: true,
     style: {},
+    disabled: false,
   };
 
   constructor(props: PopperWrapperProps) {
     super(props);
 
     this.state = {
       animationKeyframe: '',
-      isOpen: this.props.open || false,
+      isOpen: (this.props.open && !this.props.disabled) || false,
       uniqueKey: '',
     };
 
@@ -162,7 +167,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       this.setState({
         animationKeyframe: '',
       });
-      if (this.props.open) {
+      if (this.props.open && !this.props.disabled) {
         const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
 
@@ -293,9 +298,9 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   };
 
   getTriggerElement(ref: React.Ref<any>) {
-    const { trigger, on, triggerClass } = this.props;
+    const { trigger, on, triggerClass, disabled } = this.props;
     const options =
-      on === 'hover'
+      on === 'hover' && !disabled
         ? {
             ref,
             onMouseEnter: this.handleMouseEnter,
@@ -307,7 +312,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
             ref,
             onClick: (ev: React.MouseEvent<HTMLDivElement>) => {
               ev.stopPropagation();
-              this.togglePopper('onClick');
+              !disabled && this.togglePopper('onClick');
             },
           };
 

diff --git a/core/components/molecules/popover/Popover.tsx b/core/components/molecules/popover/Popover.tsx
@@ -100,6 +100,10 @@ export interface PopoverProps extends Pick<PopperWrapperProps, PopperProps>, Bas
    * Refer to [this](https://popper.js.org/docs/v1/#modifierscomputestyle)
    */
   computeStyles?: object;
+  /**
+   * Defines whether to show popover or not
+   */
+  disabled?: boolean;
 }
 
 export const Popover = (props: PopoverProps) => {

diff --git a/core/components/molecules/popover/__stories__/DisabledTrigger.story.jsx b/core/components/molecules/popover/__stories__/DisabledTrigger.story.jsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Text, Button, Popover } from '@/index';
+
+// CSF format story
+export const disabledTrigger = () => {
+  const booleanValues = [false, true];
+
+  return (
+    <div className="mb-10 d-flex align-items-center w-100">
+      {booleanValues.map((toggleValue) => {
+        return (
+          <Popover
+            position="bottom-start"
+            on="hover"
+            key={toggleValue}
+            disabled={toggleValue}
+            trigger={
+              <Button appearance="basic" disabled={true}>
+                {toggleValue ? 'Disabled Popover' : 'Show Popover'}
+              </Button>
+            }
+            open={false}
+            className="w-25"
+          >
+            <div className="p-6">
+              <Text>You have some edits saved in draft state.You can resume editing or discard those changes.</Text>
+            </div>
+          </Popover>
+        );
+      })}
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const booleanValues = [false, true];
+
+  return (
+    <div className="mb-10 d-flex align-items-center w-100">
+      {booleanValues.map((toggleValue) => {
+        return (
+          <Popover
+            position="bottom-start"
+            on="hover"
+            disabled={toggleValue}
+            key={toggleValue}
+            trigger={
+              <Button appearance="basic" disabled={true}>
+                {toggleValue ? 'Disabled Popover' : 'Show Popover'}
+              </Button>
+            }
+            open={false}
+            className="w-25"
+          >
+            <div className="p-6">
+              <Text>You have some edits saved in draft state.You can resume editing or discard those changes.</Text>
+            </div>
+          </Popover>
+        );
+      })}
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Popover/Disabled Trigger',
+  component: Popover,
+  parameters: {
+    docs: {
+      docPage: {
+        noHtml: true,
+        customCode,
+      },
+    },
+  },
+};
diff --git a/core/components/molecules/popover/__tests__/Popover.test.tsx b/core/components/molecules/popover/__tests__/Popover.test.tsx
@@ -50,6 +50,7 @@ describe('Popover component', () => {
     verticalOffset: valueHelper(NumberValue, { required: true }),
     onToggle: valueHelper(FunctionValue, { required: true }),
     dark: valueHelper(BooleanValue, { required: true, iterate: true }),
+    disabled: valueHelper(BooleanValue, { required: true, iterate: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
@@ -208,3 +209,83 @@ describe('Popover component with overwrite class', () => {
     expect(getByTestId('DesignSystem-Popover')).toHaveClass(className);
   });
 });
+
+describe('Popover component with prop: disabled', () => {
+  const disabledTrigger = (
+    <Button appearance="basic" disabled={true} data-test="DesignSystem-PopoverDisabledTrigger">
+      Open Popup
+    </Button>
+  );
+
+  it('does not renders Popover component with prop: disabled for disabled trigger for click event', () => {
+    const { getByTestId, queryByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={true}>
+        Popover
+      </Popover>
+    );
+
+    const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger');
+    fireEvent.click(popoverTrigger);
+
+    expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+
+  it('renders Popover component with prop: disabled for disabled trigger for click event', () => {
+    const { getByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={false}>
+        Popover
+      </Popover>
+    );
+
+    const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger');
+    fireEvent.click(popoverTrigger);
+
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('does not renders Popover component with prop: disabled for disabled trigger for hover event', () => {
+    const { getByTestId, queryByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={true} on="hover">
+        Popover
+      </Popover>
+    );
+
+    const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger');
+    fireEvent.mouseEnter(popoverTrigger);
+
+    expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+
+  it('renders Popover component with prop: disabled for disabled trigger for hover event', () => {
+    const { getByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={false} on="hover">
+        Popover
+      </Popover>
+    );
+
+    const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger');
+    fireEvent.mouseEnter(popoverTrigger);
+
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('renders Popover component with prop:disabled as false with open=true ', () => {
+    const { getByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={false} on="hover" open={true}>
+        Popover
+      </Popover>
+    );
+
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('does not renders Popover component with prop:disabled as true with open=true ', () => {
+    const { queryByTestId } = render(
+      <Popover trigger={disabledTrigger} disabled={true} on="hover" open={true}>
+        Popover
+      </Popover>
+    );
+
+    expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument();
+  });
+});
diff --git a/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap b/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Popover component 
-  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false
+  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false, disabled: false
  1`] = `
 <DocumentFragment>
   <style />
@@ -33,7 +33,30 @@ exports[`Popover component
 `;
 
 exports[`Popover component 
-  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: true
+  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false, disabled: true
+ 1`] = `
+<DocumentFragment>
+  <style />
+  <div
+    class="OutsideClick PopperWrapper-trigger"
+  >
+    <button
+      class="Button Button--regular Button--basic Button--iconAlign-left"
+      data-test="DesignSystem-PopoverTrigger"
+      tabindex="0"
+    >
+      <span
+        class="Button-text"
+      >
+        Open Popup
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Popover component 
+  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: true, disabled: false
  1`] = `
 <DocumentFragment>
   <style />
@@ -64,6 +87,29 @@ exports[`Popover component
 </DocumentFragment>
 `;
 
+exports[`Popover component 
+  appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: true, disabled: true
+ 1`] = `
+<DocumentFragment>
+  <style />
+  <div
+    class="OutsideClick PopperWrapper-trigger"
+  >
+    <button
+      class="Button Button--regular Button--basic Button--iconAlign-left"
+      data-test="DesignSystem-PopoverTrigger"
+      tabindex="0"
+    >
+      <span
+        class="Button-text"
+      >
+        Open Popup
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Popover component 
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom"
  1`] = `