Merge pull request #2931 from bryceosterhaus/2738

fix(@clayui/popover): make 'show' prop actually usable
liferay · Feb 14, 2020 · d8db899 · d8db899
2 parents 4a0b809 + 9d700c0
commit d8db899
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 2 deletions.
diff --git a/packages/clay-popover/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-popover/src/__tests__/__snapshots__/index.tsx.snap
@@ -28,6 +28,34 @@ exports[`ClayPopover renders 1`] = `
 </div>
 `;
 
+exports[`ClayPopover renders with \`show\` 1`] = `
+<div>
+  <div
+    class="popover clay-popover-bottom show"
+  >
+    <div
+      class="arrow"
+    />
+    <div
+      class="inline-scroller"
+    >
+      <div
+        class="popover-header"
+      >
+        Popover
+      </div>
+      <div
+        class="popover-body"
+      >
+        Viennese flavour cup eu, percolator froth ristretto mazagran
+					caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+					spoon acerbic to go macchiato strong.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ClayPopover renders without scroll 1`] = `
 <div>
   <div

diff --git a/packages/clay-popover/src/__tests__/index.tsx b/packages/clay-popover/src/__tests__/index.tsx
@@ -34,4 +34,16 @@ describe('ClayPopover', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('renders with `show`', () => {
+		const {container} = render(
+			<ClayPopover header="Popover" show>
+				{`Viennese flavour cup eu, percolator froth ristretto mazagran
+					caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+					spoon acerbic to go macchiato strong.`}
+			</ClayPopover>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
 });
diff --git a/packages/clay-popover/src/index.tsx b/packages/clay-popover/src/index.tsx
@@ -55,6 +55,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	show?: boolean;
 
+	/**
+	 * Callback for when the `show` prop changes.
+	 */
+	onShowChange?: (val: boolean) => void;
+
 	/**
 	 * React element that the popover will align to when clicked.
 	 */
@@ -76,12 +81,14 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 			className,
 			disableScroll = false,
 			header,
+			onShowChange,
+			show: externalShow = false,
 			trigger,
 			...otherProps
 		}: IProps,
 		ref
 	) => {
-		const [show, setShow] = React.useState(false);
+		const [internalShow, internalSetShow] = React.useState(externalShow);
 
 		const triggerRef = React.useRef<HTMLElement | null>(null);
 		const popoverRef = React.useRef<HTMLElement | null>(null);
@@ -90,6 +97,9 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 			ref = popoverRef as React.Ref<HTMLDivElement>;
 		}
 
+		const show = externalShow ? externalShow : internalShow;
+		const setShow = onShowChange ? onShowChange : internalSetShow;
+
 		React.useEffect(() => {
 			if (
 				trigger &&

diff --git a/packages/clay-popover/stories/index.tsx b/packages/clay-popover/stories/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import '@clayui/css/lib/css/atlas.css';
-import {ClayButtonWithIcon} from '@clayui/button';
+import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
 import {boolean, select} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
@@ -65,4 +65,40 @@ storiesOf('Components|ClayPopover', module)
 				</ClayPopover>
 			</div>
 		);
+	})
+	.add('popover w/ manual show', () => {
+		const [show, setShow] = React.useState(false);
+
+		return (
+			<>
+				<ClayButton
+					onClick={() => setShow(!show)}
+					style={{marginRight: 40}}
+				>
+					{'additional trigger'}
+				</ClayButton>
+
+				<ClayPopover
+					header="Popover"
+					onShowChange={setShow}
+					show={show}
+					trigger={
+						<ClayButtonWithIcon
+							spritemap={spritemap}
+							symbol="info-circle-open"
+						/>
+					}
+				>
+					{`Viennese flavour cup eu, percolator froth ristretto mazagran
+				caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+				spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+				caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+				spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+				caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+				spoon acerbic to go macchiato strong. Viennese flavour cup eu, percolator froth ristretto mazagran
+				caffeine. White roast seasonal, mocha trifecta, dripper caffeine
+				spoon acerbic to go macchiato strong.`}
+				</ClayPopover>
+			</>
+		);
 	});