feat(client): use new popover in formulaMenu

pleisto · Jul 24, 2022 · 1caeb27 · 1caeb27
1 parent 0bab18f
commit 1caeb27
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 81 deletions.
diff --git a/packages/design-system/__snapshots__/components/PopoverN/__tests__/stories.test.tsx.snap b/packages/design-system/__snapshots__/components/PopoverN/__tests__/stories.test.tsx.snap
@@ -5,17 +5,17 @@ exports[`PopoverN Basic should match the snapshot 1`] = `
   <div
     style="display: flex; justify-content: center; align-items: center;"
   >
-    <button
-      aria-expanded="false"
-      aria-haspopup="dialog"
-      class="ButtonUnstyled-root mc-c-iiEeHJ mc-c-iiEeHJ-kQqyOW-btnType-secondary mc-c-iiEeHJ-fcHofs-size-md"
-      role="button"
-      type="button"
+    <div
+      class="mc-c-pmrKX"
     >
-      <span>
+      <button
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mc-c-gtItaD"
+      >
         What does 42 mean?
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -26,11 +26,19 @@ exports[`PopoverN ContextMenu should match the snapshot 1`] = `
     style="display: flex; justify-content: center; align-items: center;"
   >
     <div
-      aria-expanded="false"
-      aria-haspopup="dialog"
-      style="height: 4rem; width: 100%; display: flex; justify-content: center; align-items: center; background-color: rgb(239, 239, 239);"
+      class="mc-c-pmrKX"
     >
-      Click
+      <button
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mc-c-gtItaD"
+      >
+        <div
+          style="height: 4rem; width: 100%; display: flex; justify-content: center; align-items: center; background-color: rgb(239, 239, 239);"
+        >
+          Click
+        </div>
+      </button>
     </div>
   </div>
 </div>

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -24,6 +24,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
+    "@floating-ui/react-dom-interactions": "^0.8.1",
     "@hookform/resolvers": "^2.9.6",
     "@mashcard/active-support": "workspace:^",
     "@mashcard/design-icons": "workspace:^",

diff --git a/packages/design-system/src/components/PopoverN/index.tsx b/packages/design-system/src/components/PopoverN/index.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from 'react'
+import React, { cloneElement } from 'react'
 import {
   Placement,
   offset,
@@ -15,23 +15,44 @@ import {
   Middleware,
   Strategy
 } from '@floating-ui/react-dom-interactions'
+import { PopoverWrapper, ChildWrapper, ContentWrapper } from './styles/index.style'
 
 interface Props {
   render: (data: { close: () => void; labelId: string; descriptionId: string }) => React.ReactNode
-  children: JSX.Element
+  children: React.ReactNode
   onOpenChange?: (open: boolean) => void
   placement?: Placement
   middleware?: Array<Middleware>
   strategy?: Strategy
+  overlayInnerStyle: React.CSSProperties
+  visible?: boolean
+  defaultVisible?: boolean
+  onVisibleChange?: (status: boolean) => void
+  className?: string
+  destroyTooltipOnHide?: boolean
+  offset?: number
 }
 
-const PopoverN = ({ children, render, placement, strategy: _strategy, middleware }: Props) => {
-  const [open, setOpen] = useState(false)
+const PopoverN = ({
+  children,
+  render,
+  placement,
+  strategy: _strategy,
+  middleware,
+  overlayInnerStyle,
+  visible,
+  defaultVisible,
+  onVisibleChange,
+  className,
+  destroyTooltipOnHide,
+  offset: _offset
+}: Props) => {
+  const open = visible !== undefined ? visible : defaultVisible !== undefined ? defaultVisible : false
 
   const { x, y, reference, floating, strategy, context } = useFloating({
     open,
-    onOpenChange: setOpen,
-    middleware: middleware ?? [offset(5), flip(), shift()],
+    onOpenChange: onVisibleChange,
+    middleware: middleware ?? [offset(_offset ?? 5), flip(), shift()],
     placement,
     whileElementsMounted: autoUpdate,
     strategy: _strategy
@@ -47,42 +68,49 @@ const PopoverN = ({ children, render, placement, strategy: _strategy, middleware
     useDismiss(context)
   ])
 
+  const refProps = getReferenceProps({ ref: reference })
+
   return (
-    <>
-      {cloneElement(children, getReferenceProps({ ref: reference, ...children.props }))}
-      {open && (
+    <PopoverWrapper className={className}>
+      {cloneElement(<ChildWrapper>{children}</ChildWrapper>, getReferenceProps({ ref: reference }))}
+      {(open || destroyTooltipOnHide === false) && (
         <FloatingFocusManager context={context} modal={false} order={['reference', 'content']} returnFocus={false}>
-          <div
+          <ContentWrapper
+            style={overlayInnerStyle}
             {...getFloatingProps({
               className: 'Popover',
               ref: floating,
               style: {
+                display: open ? undefined : 'none',
+                zIndex: 1,
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0
               },
               'aria-labelledby': labelId,
               'aria-describedby': descriptionId
-            })}>
+            })}
+          >
             {render({
               labelId,
               descriptionId,
               close: () => {
-                setOpen(false)
+                onVisibleChange?.(false)
               }
             })}
-          </div>
+          </ContentWrapper>
         </FloatingFocusManager>
       )}
-    </>
+    </PopoverWrapper>
   )
 }
 
 PopoverN.displayName = 'PopoverN'
 
 PopoverN.defaultProps = {
   placement: 'top-start',
-  strategy: 'absolute'
+  strategy: 'absolute',
+  destroyTooltipOnHide: true
 }
 
 export { PopoverN }
diff --git a/packages/design-system/src/components/PopoverN/popovern.stories.tsx b/packages/design-system/src/components/PopoverN/popovern.stories.tsx
@@ -2,15 +2,13 @@ import { PopoverN } from './index'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { Button } from '..'
 
-
 export default {
   title: 'Components/PopoverN',
   component: PopoverN,
   args: {
-    placement: 'top-start',
-  },
-  argTypes: {
+    placement: 'top-start'
   },
+  argTypes: {},
   parameters: {
     docs: {
       description: {
@@ -54,7 +52,7 @@ export const Basic = Template.bind({})
 
 Basic.args = {
   render: () => <p>42 is the meaning of life</p>,
-  children: <Button>What does 42 mean?</Button>
+  children: 'What does 42 mean?'
 }
 
 export const ContextMenu = Template.bind({})

diff --git a/packages/design-system/src/components/PopoverN/styles/index.style.ts b/packages/design-system/src/components/PopoverN/styles/index.style.ts
@@ -0,0 +1,27 @@
+import { theme, styled } from '../../../themes'
+
+export const PopoverWrapper = styled('div', {
+  position: 'relative',
+  display: 'inline'
+})
+
+export const ChildWrapper = styled('button', {
+  position: 'relative',
+  border: 'none',
+  background: 'transparent',
+  padding: 0
+})
+
+export const ContentWrapper = styled('div', {
+  include: ['ceramicPrimary', 'refractionPrimary', 'cornerFix'],
+  backgroundColor: theme.colors.white,
+  backgroundClip: 'padding-box',
+  color: theme.colors.typePrimary,
+  padding: '10px 12px',
+  minHeight: '2rem',
+  borderRadius: '4px',
+  minWidth: '10rem',
+  // The outline here should appear internally
+  outline: `0.2px solid ${theme.colors.white}`,
+  outlineOffset: '-0.2px'
+})
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
@@ -13,6 +13,7 @@ export * from './Tag'
 export * from './Empty'
 export * from './Form'
 export * from './Popover'
+export * from './PopoverN'
 export * from './Provider'
 export * from './Dropdown'
 export * from './Toast'

diff --git a/...itor/__snapshots__/components/blockViews/FormulaView/__tests__/FormulaBlock.test.tsx.snap b/...itor/__snapshots__/components/blockViews/FormulaView/__tests__/FormulaBlock.test.tsx.snap
@@ -13,29 +13,38 @@ exports[`FormulaBlock matches correct snapshot 1`] = `
     >
        
     </span>
-    <span
-      aria-haspopup="dialog"
-      class="mc-c-hxsbZB"
+    <div
+      class="mc-c-pmrKX mc-c-cEkrQs"
     >
-      <span
-        aria-label="formula"
-        class="mc-icon mc-icon-formula mashcard-formula-empty-icon"
-        role="img"
+      <button
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mc-c-gtItaD"
       >
-        <svg
-          fill="none"
-          viewBox="0 0 24 24"
+        <span
+          class="mc-c-hxsbZB"
         >
-          <path
-            d="M20 4.5 18.5 3H4l9 9-9 9h14.5l1.5-1.5"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-        </svg>
-      </span>
-    </span>
+          <span
+            aria-label="formula"
+            class="mc-icon mc-icon-formula mashcard-formula-empty-icon"
+            role="img"
+          >
+            <svg
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20 4.5 18.5 3H4l9 9-9 9h14.5l1.5-1.5"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
     <span
       class="mc-c-bbClCh"
       contenteditable="false"

diff --git a/...ges/legacy-editor/__snapshots__/extensions/blocks/formula/__tests__/formula.test.tsx.snap b/...ges/legacy-editor/__snapshots__/extensions/blocks/formula/__tests__/formula.test.tsx.snap
@@ -24,29 +24,38 @@ exports[`Formula renders Formula correctly 1`] = `
             >
                
             </span>
-            <span
-              aria-haspopup="dialog"
-              class="mc-c-hxsbZB"
+            <div
+              class="mc-c-pmrKX mc-c-cEkrQs"
             >
-              <span
-                aria-label="formula"
-                class="mc-icon mc-icon-formula mashcard-formula-empty-icon"
-                role="img"
+              <button
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                class="mc-c-gtItaD"
               >
-                <svg
-                  fill="none"
-                  viewBox="0 0 24 24"
+                <span
+                  class="mc-c-hxsbZB"
                 >
-                  <path
-                    d="M20 4.5 18.5 3H4l9 9-9 9h14.5l1.5-1.5"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                  />
-                </svg>
-              </span>
-            </span>
+                  <span
+                    aria-label="formula"
+                    class="mc-icon mc-icon-formula mashcard-formula-empty-icon"
+                    role="img"
+                  >
+                    <svg
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 4.5 18.5 3H4l9 9-9 9h14.5l1.5-1.5"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
             <span
               class="mc-c-bbClCh"
               contenteditable="false"

diff --git a/packages/legacy-editor/src/components/blockViews/FormulaView/FormulaMenu.tsx b/packages/legacy-editor/src/components/blockViews/FormulaView/FormulaMenu.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react'
-import { Input, Popover, Icon } from '@mashcard/design-system'
+import { Input, Popover, PopoverN, Icon } from '@mashcard/design-system'
 import { VariableData } from '@mashcard/formula'
 import { FormulaEditor } from '../../../editors/formulaEditor'
 import { FormulaResult, AutocompleteList } from '../../ui/Formula'
@@ -31,7 +31,7 @@ export interface FormulaMenuProps {
   isDisableSave: () => boolean
   onSaveFormula: UseFormulaOutput['onSaveFormula']
   completion: CompletionType
-  children?: React.ReactNode
+  children?: JSX.Element
 }
 
 export const FormulaMenu: React.FC<FormulaMenuProps> = ({
@@ -178,18 +178,18 @@ export const FormulaMenu: React.FC<FormulaMenuProps> = ({
   )
 
   return (
-    <Popover
+    <PopoverN
       onVisibleChange={onPopoverVisibleChange}
       defaultVisible={defaultVisible}
       visible={visible}
       className={Root.MashcardFormulaMenuPopover}
       overlayInnerStyle={{ padding: '8px 16px' }}
       destroyTooltipOnHide
-      content={menu}
-      placement="bottomStart"
-      trigger={['click']}
+      render={() => menu}
+      placement="bottom-start"
+      offset={10}
     >
-      {children}
-    </Popover>
+      {children ?? <div />}
+    </PopoverN>
   )
 }