Refactor tooltip style contract

ui-parts/tooltip/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@atls-ui-parts/condition": "workspace:*",
+    "@atls-ui-parts/theme": "workspace:*",
     "@atls-utils/use-float": "workspace:*",
     "@floating-ui/react": "0.27.8",
     "framer-motion": "12.23.22"

ui-parts/tooltip/src/component.tsx

@@ -1,35 +1,51 @@
-import type { ReactNode }    from 'react'
+import type { ReactNode }     from 'react'
 
-import type { TooltipProps } from './interfaces.js'
+import type { TooltipProps }  from './interfaces.js'
 
-import { FloatingPortal }    from '@floating-ui/react'
-import { AnimatePresence }   from 'framer-motion'
-import { motion }            from 'framer-motion'
-import { cloneElement }      from 'react'
+import { FloatingPortal }     from '@floating-ui/react'
+import { AnimatePresence }    from 'framer-motion'
+import { motion }             from 'framer-motion'
+import { cloneElement }       from 'react'
 
-import { useFloat }          from '@atls-utils/use-float'
+import { useFloat }           from '@atls-utils/use-float'
 
-import { Arrow }             from './arrow/index.js'
-import { Container }         from './container/index.js'
-import { animateProps }      from './constants.js'
+import { Arrow }              from './arrow/index.js'
+import { Container }          from './container/index.js'
+import { animateProps }       from './constants.js'
+import { tooltipAppearances } from './styles/index.js'
+import { tooltipShapes }      from './styles/index.js'
 
 export const Tooltip = ({
+  appearance,
   children,
   text,
   open,
-  container = <Container />,
+  container,
   animated = true,
   arrow = true,
+  shape,
   ...props
 }: TooltipProps): ReactNode => {
   const { arrowRef, refs, isOpen, context, floatingStyles, getFloatingProps, getReferenceProps } =
     useFloat({ open, role: 'tooltip', ...props })
 
+  const containerElement = container ?? <Container />
+  const defaultAppearance = container === undefined ? tooltipAppearances.default : undefined
+  const defaultShape = container === undefined ? tooltipShapes.default : undefined
+  const containerAppearance = appearance ?? defaultAppearance
+  const containerShape = shape ?? defaultShape
   const TriggerElement = cloneElement(children, { ref: refs.setReference, ...getReferenceProps() })
+  const containerClassName = [
+    containerElement.props.className,
+    containerAppearance?.container,
+    containerShape?.container,
+  ]
+    .filter(Boolean)
+    .join(' ')
 
   const ContainerElement = cloneElement(
-    container,
-    { open: isOpen },
+    containerElement,
+    { className: containerClassName || undefined, open: isOpen },
     <>
       <Arrow ref={arrowRef} context={context} arrow={arrow} />
       {text}

ui-parts/tooltip/src/constants.ts

@@ -1,5 +1,11 @@
 import type { MotionProps } from 'framer-motion'
 
+export const DEFAULT_CONTAINER_HEIGHT = 32
+
+export const DEFAULT_CONTAINER_MIN_WIDTH = 30
+
+export const DEFAULT_CONTAINER_Z_INDEX = 1000
+
 export const animateProps: MotionProps = {
   initial: { opacity: 0, scale: 0.8 },
   animate: { opacity: 1, scale: 1 },

ui-parts/tooltip/src/container/component.tsx

@@ -1,7 +1,8 @@
+import type { HTMLAttributes } from 'react'
 import type { ReactNode }      from 'react'
 
-import { baseContainerStyles } from './styles.css.js'
+import { baseContainerStyles } from './container.css.js'
 
-export const Container = (props: {}): ReactNode => (
-  <div className={baseContainerStyles} {...props} />
+export const Container = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
+  <div {...props} className={[baseContainerStyles, className].filter(Boolean).join(' ')} />
 )

ui-parts/tooltip/src/container/container.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css'
+
+export const baseContainerStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: 0,
+  wordWrap: 'break-word',
+})

ui-parts/tooltip/src/index.ts

@@ -1,3 +1,4 @@
 export * from './arrow/index.js'
 export * from './component.js'
+export * from './styles/index.js'
 export type * from './interfaces.js'

ui-parts/tooltip/src/interfaces.ts

@@ -4,10 +4,24 @@ import type { MotionProps }        from 'framer-motion'
 import type { JSX }                from 'react'
 import type { ReactNode }          from 'react'
 
+export interface TooltipAppearance {
+  container: string
+}
+
+export type TooltipAppearanceName = 'default'
+
+export interface TooltipShape {
+  container: string
+}
+
+export type TooltipShapeName = 'default'
+
 export interface TooltipProps extends UseFloatProps {
+  appearance?: TooltipAppearance
   children: JSX.Element
   text?: ReactNode
   container?: JSX.Element
   animated?: Omit<MotionProps, 'children'> | boolean
   arrow?: Omit<FloatingArrowProps, 'context'> | boolean
+  shape?: TooltipShape
 }

ui-parts/tooltip/src/styles/appearance.css.ts

@@ -0,0 +1,22 @@
+import type { TooltipAppearance }     from '../interfaces.js'
+import type { TooltipAppearanceName } from '../interfaces.js'
+
+import { style }                      from '@vanilla-extract/css'
+
+import { vars }                       from '@atls-ui-parts/theme'
+
+const containerDefaultAppearanceStyles = style({
+  color: vars.colors.white,
+  backgroundColor: vars.colors.blackThreeQuarters,
+  boxShadow: vars.shadows.gordonsgreen,
+})
+
+export const appearanceVariant = {
+  default: {
+    container: containerDefaultAppearanceStyles,
+  },
+}
+
+export const tooltipAppearances: Record<TooltipAppearanceName, TooltipAppearance> = {
+  default: appearanceVariant.default,
+}

ui-parts/tooltip/src/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './appearance.css.js'
+export * from './shape.css.js'

ui-parts/tooltip/src/styles/shape.css.ts

@@ -0,0 +1,26 @@
+import type { TooltipShape }           from '../interfaces.js'
+import type { TooltipShapeName }       from '../interfaces.js'
+
+import { style }                       from '@vanilla-extract/css'
+
+import { vars }                        from '@atls-ui-parts/theme'
+
+import { DEFAULT_CONTAINER_HEIGHT }    from '../constants.js'
+import { DEFAULT_CONTAINER_MIN_WIDTH } from '../constants.js'
+import { DEFAULT_CONTAINER_Z_INDEX }   from '../constants.js'
+
+const containerDefaultShapeStyles = style({
+  minWidth: DEFAULT_CONTAINER_MIN_WIDTH,
+  minHeight: DEFAULT_CONTAINER_HEIGHT,
+  padding: `${vars.space.g8} ${vars.space.g12}`,
+  borderRadius: vars.radii.f8,
+  zIndex: DEFAULT_CONTAINER_Z_INDEX,
+})
+
+export const shapeStyles = {
+  default: {
+    container: containerDefaultShapeStyles,
+  },
+}
+
+export const tooltipShapes: Record<TooltipShapeName, TooltipShape> = shapeStyles

ui-parts/tooltip/stories/interfaces.ts

@@ -3,4 +3,5 @@ import type { TooltipProps } from '@atls-ui-parts/tooltip'
 export interface StoryTooltipProps
   extends Pick<TooltipProps, 'animated' | 'arrow' | 'offset' | 'placement' | 'trigger'> {
   customContainer: boolean
+  styledContainer: boolean
 }

ui-parts/tooltip/stories/story-tooltip.tsx

@@ -1,30 +1,38 @@
 /* eslint-disable react/jsx-no-leaked-render */
 
-import type { ReactElement }      from 'react'
+import type { ReactElement }              from 'react'
 
-import type { StoryTooltipProps } from './interfaces.js'
+import type { StoryTooltipProps }         from './interfaces.js'
 
-import { Tooltip }                from '@atls-ui-parts/tooltip'
+import { Tooltip }                        from '@atls-ui-parts/tooltip'
 
-import { storyTriggerStyles }     from './styles.css.js'
-import { storyContainerStyles }   from './styles.css.js'
+import { storyContainerAppearanceStyles } from './styles.css.js'
+import { storyContainerShapeStyles }      from './styles.css.js'
+import { storyTriggerStyles }             from './styles.css.js'
+
+const storyContainerClassName = [storyContainerAppearanceStyles, storyContainerShapeStyles].join(
+  ' '
+)
 
 export const StoryTooltip = ({
   animated,
   arrow,
   customContainer,
   offset,
   placement,
+  styledContainer,
   trigger,
 }: StoryTooltipProps): ReactElement => (
   <Tooltip
     animated={animated}
-    arrow={arrow && customContainer ? { fill: 'green' } : arrow}
+    arrow={arrow && (customContainer || styledContainer) ? { fill: 'green' } : arrow}
+    appearance={styledContainer ? { container: storyContainerAppearanceStyles } : undefined}
     offset={offset}
     placement={placement}
+    shape={styledContainer ? { container: storyContainerShapeStyles } : undefined}
     trigger={trigger}
     text='Tooltip text'
-    container={customContainer ? <div className={storyContainerStyles} /> : undefined}
+    container={customContainer ? <div className={storyContainerClassName} /> : undefined}
   >
     <div className={storyTriggerStyles}>Trigger</div>
   </Tooltip>

ui-parts/tooltip/stories/styles.css.ts

@@ -1,9 +1,13 @@
 import { style } from '@vanilla-extract/css'
 
-export const storyContainerStyles = style({
+export const storyContainerAppearanceStyles = style({
+  background: 'green',
+  color: 'white',
+})
+
+export const storyContainerShapeStyles = style({
   width: '150px',
   height: '30px',
-  background: 'green',
   margin: 0,
 })
 

ui-parts/tooltip/stories/tooltip.stories.tsx

@@ -24,6 +24,10 @@ const meta: Meta<StoryTooltipProps> = {
       description: 'Свой контейнер',
       control: { type: 'boolean' },
     },
+    styledContainer: {
+      description: 'Стили дефолтного контейнера',
+      control: { type: 'boolean' },
+    },
     offset: {
       description: 'Офсет',
       control: { type: 'number' },
@@ -56,6 +60,7 @@ const meta: Meta<StoryTooltipProps> = {
     animated: true,
     arrow: true,
     customContainer: false,
+    styledContainer: false,
     offset: 10,
     placement: 'top',
     trigger: 'click',
@@ -67,3 +72,10 @@ export default meta
 export const Base: StoryObj<StoryTooltipProps> = {
   render: StoryTooltip,
 }
+
+export const StyledContainer: StoryObj<StoryTooltipProps> = {
+  args: {
+    styledContainer: true,
+  },
+  render: StoryTooltip,
+}

yarn.lock

@@ -1046,6 +1046,7 @@ __metadata:
   dependencies:
     "@atls-ui-parts/condition": "workspace:*"
     "@atls-ui-parts/layout": "workspace:*"
+    "@atls-ui-parts/theme": "workspace:*"
     "@atls-utils/use-float": "workspace:*"
     "@floating-ui/react": "npm:0.27.8"
     "@storybook/react": "npm:8.6.12"