From 37e3d4fee59bee53128dbdc32b007ab0ca975c9c Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 11 Apr 2024 20:10:08 +1000 Subject: [PATCH] Tooltip.Arrow adjustments --- docs/data/base/components/tooltip/tooltip.md | 26 +++++++++++- docs/pages/base-ui/api/tooltip-arrow.json | 6 ++- .../tooltip-arrow/tooltip-arrow.json | 10 ++++- .../mui-base/src/Tooltip/Tooltip.types.ts | 4 +- .../mui-base/src/Tooltip/TooltipArrow.tsx | 40 ++++++++++++++----- 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/docs/data/base/components/tooltip/tooltip.md b/docs/data/base/components/tooltip/tooltip.md index 90fe364112..2b848e67e1 100644 --- a/docs/data/base/components/tooltip/tooltip.md +++ b/docs/data/base/components/tooltip/tooltip.md @@ -239,12 +239,36 @@ To prevent the content inside from being hoverable, use the `hoverable` prop: This has accessibility consequences and should only be disabled when necessary, such as in high-density UIs where tooltips can block other nearby controls. ::: +### Arrow + +To add an arrow (caret or triangle) inside the tooltip content that points toward the center of the anchor element, use the `Tooltip.Arrow` component: + +```js + + Tooltip + + +``` + +Its `width`, `height`, `tipRadius`, `fill`, `stroke`, `strokeWidth`, and `d` prop can be modified. For example, you can use a fancily rounded arrow like so: + +```jsx + + Tooltip + + +``` + ### Styling The `Tooltip.Content` element receives the following CSS variables: - `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the tooltip with its anchor. -- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the width of the tooltip with its anchor. +- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the tooltip with its anchor. - `--available-width`: Specifies the available width of the tooltip element before it overflows the viewport. - `--available-height`: Specifies the available height of the tooltip element before it overflows the viewport. - `--transform-origin`: Specifies the origin of the floating element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor. diff --git a/docs/pages/base-ui/api/tooltip-arrow.json b/docs/pages/base-ui/api/tooltip-arrow.json index 5ff73f0fb7..48e13f34a5 100644 --- a/docs/pages/base-ui/api/tooltip-arrow.json +++ b/docs/pages/base-ui/api/tooltip-arrow.json @@ -1,5 +1,9 @@ { - "props": {}, + "props": { + "className": { "type": { "name": "union", "description": "func
| string" } }, + "hideWhenUncentered": { "type": { "name": "bool" }, "default": "false" }, + "render": { "type": { "name": "func" } } + }, "name": "TooltipArrow", "imports": [ "import { TooltipArrow } from '@mui/base/Tooltip';", diff --git a/docs/translations/api-docs-base/tooltip-arrow/tooltip-arrow.json b/docs/translations/api-docs-base/tooltip-arrow/tooltip-arrow.json index 346ee604aa..6b2cc8c916 100644 --- a/docs/translations/api-docs-base/tooltip-arrow/tooltip-arrow.json +++ b/docs/translations/api-docs-base/tooltip-arrow/tooltip-arrow.json @@ -1,5 +1,13 @@ { "componentDescription": "The tooltip arrow caret element.", - "propDescriptions": {}, + "propDescriptions": { + "className": { + "description": "Class names applied to the element or a function that returns them based on the component's state." + }, + "hideWhenUncentered": { + "description": "If true, the arrow will be hidden when it can't point to the center of the anchor element." + }, + "render": { "description": "A function to customize rendering of the component." } + }, "classDescriptions": {} } diff --git a/packages/mui-base/src/Tooltip/Tooltip.types.ts b/packages/mui-base/src/Tooltip/Tooltip.types.ts index 6b628043d9..12e7969ba9 100644 --- a/packages/mui-base/src/Tooltip/Tooltip.types.ts +++ b/packages/mui-base/src/Tooltip/Tooltip.types.ts @@ -90,8 +90,8 @@ export interface TooltipAnchorFragmentProps { children: React.ReactElement | ((htmlProps: GenericHTMLProps) => React.ReactElement); } export interface TooltipArrowProps - extends Omit, 'context'>, - FloatingArrowProps { + extends BaseUIComponentProps, + Omit { /** * If `true`, the arrow will be hidden when it can't point to the center of the anchor element. * @default false diff --git a/packages/mui-base/src/Tooltip/TooltipArrow.tsx b/packages/mui-base/src/Tooltip/TooltipArrow.tsx index fd89cb56a2..c238c71ca7 100644 --- a/packages/mui-base/src/Tooltip/TooltipArrow.tsx +++ b/packages/mui-base/src/Tooltip/TooltipArrow.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { FloatingArrow, FloatingContext } from '@floating-ui/react'; +import { FloatingArrow, type FloatingContext } from '@floating-ui/react'; import type { TooltipArrowProps } from './Tooltip.types'; import { resolveClassName } from '../utils/resolveClassName'; import { useForkRef } from '../utils/useForkRef'; @@ -9,7 +9,7 @@ import { useTooltipContentContext } from './TooltipContentContext'; function defaultRender( props: Omit & { context: FloatingContext; className?: string }, ) { - return ; + return ; } /** @@ -27,13 +27,7 @@ const TooltipArrow = React.forwardRef(function TooltipArrow( props: TooltipArrowProps, forwardedRef: React.Ref, ) { - const { - render: renderProp, - className, - context, - hideWhenUncentered = false, - ...otherProps - } = props; + const { render: renderProp, className, hideWhenUncentered = false, ...otherProps } = props; const render = renderProp ?? defaultRender; const { open, arrowRef, floatingContext, side, alignment } = useTooltipContentContext(); @@ -66,4 +60,32 @@ const TooltipArrow = React.forwardRef(function TooltipArrow( return render(arrowProps, ownerState); }); +TooltipArrow.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * Class names applied to the element or a function that returns them based on the component's state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + /** + * If `true`, the arrow will be hidden when it can't point to the center of the anchor element. + * @default false + */ + hideWhenUncentered: PropTypes.bool, + /** + * A function to customize rendering of the component. + */ + render: PropTypes.func, + /** + * @ignore + */ + style: PropTypes.object, +} as any; + export { TooltipArrow };