Merge pull request #64 from solved-ac/feature/dropdown-tooltip

Dropdowns

Author: shiftpsh

example/src/stories/Dropdown.stories.tsx

@@ -0,0 +1,45 @@
+import { Button, Centering, Dropdown } from '@solved-ac/ui-react'
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import TooltipStories from './Tooltip.stories'
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    ...TooltipStories.argTypes,
+    interactive: {
+      ...(TooltipStories.argTypes?.interactive || {}),
+      defaultValue: true,
+    },
+    activateOnHover: {
+      ...(TooltipStories.argTypes?.activateOnHover || {}),
+      defaultValue: false,
+    },
+    activateOnClick: {
+      ...(TooltipStories.argTypes?.activateOnClick || {}),
+      defaultValue: true,
+    },
+    noThemeChange: {
+      ...(TooltipStories.argTypes?.noThemeChange || {}),
+      defaultValue: true,
+    },
+  },
+} as Meta<typeof Dropdown>
+
+const Template: StoryFn<typeof Dropdown> = (args) => (
+  <Centering
+    style={{
+      height: 200,
+    }}
+  >
+    <Dropdown {...args} />
+  </Centering>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  children: <Button>Click me!</Button>,
+  title: 'Dropdown',
+}

example/src/stories/Tooltip.stories.tsx

@@ -11,11 +11,6 @@ export default {
       description: 'The title to display',
       defaultValue: 'Tooltip',
     },
-    noDefaultStyles: {
-      control: 'boolean',
-      description: 'Whether to use the default styles',
-      defaultValue: false,
-    },
     arrow: {
       control: 'boolean',
       description: 'Whether to show the arrow',
@@ -62,6 +57,18 @@ export default {
         'Whether to activate the tooltip on mouse click - repeated clicks will toggle the tooltip',
       defaultValue: false,
     },
+    noDefaultStyles: {
+      control: 'boolean',
+      description:
+        'Whether to use the default styles - this will also disable the theme change.',
+      defaultValue: false,
+    },
+    noThemeChange: {
+      control: 'boolean',
+      description:
+        'Whether to prevent the theme from changing - Tooltip is set to use the dark theme by default. This will prevent that.',
+      defaultValue: false,
+    },
   },
 } as Meta<typeof Tooltip>
 

src/components/Dropdown.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Tooltip, TooltipProps } from './Tooltip'
+
+export type DropdownProps = TooltipProps
+
+export const Dropdown: React.FC<TooltipProps> = (props) => {
+  const {
+    interactive = true,
+    activateOnHover = false,
+    activateOnClick = true,
+    noThemeChange = true,
+    ...rest
+  } = props
+
+  return (
+    <Tooltip
+      interactive={interactive}
+      activateOnHover={activateOnHover}
+      activateOnClick={activateOnClick}
+      noThemeChange={noThemeChange}
+      {...rest}
+    />
+  )
+}

src/components/Tooltip.tsx

@@ -9,6 +9,7 @@ import {
   safePolygon,
   shift,
   useClick,
+  useDismiss,
   useFloating,
   useHover,
   useInteractions,
@@ -71,6 +72,7 @@ export type TooltipProps = {
   interactive?: boolean
   activateOnHover?: boolean
   activateOnClick?: boolean
+  noThemeChange?: boolean
 } & (
   | {
       noDefaultStyles: false
@@ -128,6 +130,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     interactive = false,
     activateOnHover = true,
     activateOnClick = false,
+    noThemeChange = false,
     ...cardProps
   } = props
   const [isOpen, setIsOpen] = useState(false)
@@ -172,9 +175,14 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     useClick(context, {
       enabled: activateOnClick,
     }),
+    useDismiss(context, {
+      enabled: activateOnClick && !keepOpen,
+    }),
   ])
 
   const RenderComponent = noBackground ? motion.div : TooltipContainer
+  const ThemeProviderComponent =
+    noThemeChange || noBackground ? React.Fragment : ThemeProvider
 
   const arrowPosition =
     renderSide[placement.split('-')[0] as keyof typeof renderSide]
@@ -185,7 +193,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
         {children}
       </TooltipWrapper>
       <FloatingPortal>
-        <ThemeProvider theme={theme || solvedThemes.dark}>
+        <ThemeProviderComponent theme={theme || solvedThemes.dark}>
           <AnimatePresence>
             {renderTooltip && (
               <React.Fragment>
@@ -216,7 +224,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
               </React.Fragment>
             )}
           </AnimatePresence>
-        </ThemeProvider>
+        </ThemeProviderComponent>
       </FloatingPortal>
     </React.Fragment>
   )

src/components/index.ts

@@ -10,6 +10,7 @@ export * from './Chip'
 export * from './Collapse'
 export * from './Container'
 export * from './Divider'
+export * from './Dropdown'
 export * from './EmptyStatePlaceholder'
 export * from './Footer'
 export * from './NavBar'