Skip to content

Commit

Permalink
[core] Improve Tooltip and Popover consistency (#463)
Browse files Browse the repository at this point in the history
  • Loading branch information
atomiks authored Jul 2, 2024
1 parent 030e9fd commit f83b1c6
Show file tree
Hide file tree
Showing 57 changed files with 469 additions and 774 deletions.
1 change: 0 additions & 1 deletion docs/data/base/components/tooltip/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
productId: base-ui
title: React Tooltip component
components: TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPositioner, TooltipPopup, TooltipArrow
hooks: useTooltipRoot, useTooltipPositioner
githubLabel: 'component: tooltip'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
---
Expand Down
8 changes: 0 additions & 8 deletions docs/data/base/pagesApi.js
Original file line number Diff line number Diff line change
Expand Up @@ -293,14 +293,6 @@ module.exports = [
{ pathname: '/base-ui/react-tabs/hooks-api/#use-tab-panel', title: 'useTabPanel' },
{ pathname: '/base-ui/react-tabs/hooks-api/#use-tabs-list', title: 'useTabsList' },
{ pathname: '/base-ui/react-tabs/hooks-api/#use-tabs-root', title: 'useTabsRoot' },
{
pathname: '/base-ui/react-tooltip/hooks-api/#use-tooltip-positioner',
title: 'useTooltipPositioner',
},
{
pathname: '/base-ui/react-tooltip/hooks-api/#use-tooltip-root',
title: 'useTooltipRoot',
},
{
pathname: '/base-ui/react-transitions/hooks-api/#use-transition-state-manager',
title: 'useTransitionStateManager',
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/base-ui/api/popover-root.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"animated": { "type": { "name": "bool" }, "default": "true" },
"closeDelay": { "type": { "name": "number" }, "default": "0" },
"defaultOpen": { "type": { "name": "bool" } },
"delay": { "type": { "name": "number" }, "default": "500" },
"delay": { "type": { "name": "number" }, "default": "300" },
"delayType": {
"type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
"default": "'rest'"
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/base-ui/api/tooltip-provider.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"props": {
"closeDelay": { "type": { "name": "number" }, "default": "0" },
"delay": { "type": { "name": "number" }, "default": "0" },
"closeDelay": { "type": { "name": "number" } },
"delay": { "type": { "name": "number" } },
"timeout": { "type": { "name": "number" }, "default": "400" }
},
"name": "TooltipProvider",
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/base-ui/api/tooltip-root.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"animated": { "type": { "name": "bool" }, "default": "true" },
"closeDelay": { "type": { "name": "number" }, "default": "0" },
"defaultOpen": { "type": { "name": "bool" } },
"delay": { "type": { "name": "number" }, "default": "300" },
"delay": { "type": { "name": "number" }, "default": "600" },
"delayType": {
"type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
"default": "'rest'"
Expand Down
8 changes: 8 additions & 0 deletions docs/pages/base-ui/api/use-tooltip-arrow.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"parameters": {},
"returnValue": {},
"name": "useTooltipArrow",
"filename": "/packages/mui-base/src/Tooltip/Arrow/useTooltipArrow.ts",
"imports": ["import { useTooltipArrow } from '@base_ui/react/Tooltip';"],
"demos": "<ul></ul>"
}
8 changes: 8 additions & 0 deletions docs/pages/base-ui/api/use-tooltip-popup.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"parameters": {},
"returnValue": {},
"name": "useTooltipPopup",
"filename": "/packages/mui-base/src/Tooltip/Popup/useTooltipPopup.ts",
"imports": ["import { useTooltipPopup } from '@base_ui/react/Tooltip';"],
"demos": "<ul></ul>"
}
115 changes: 3 additions & 112 deletions docs/pages/base-ui/api/use-tooltip-positioner.json
Original file line number Diff line number Diff line change
@@ -1,117 +1,8 @@
{
"parameters": {
"getRootPositionerProps": {
"type": {
"name": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps",
"description": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps"
},
"required": true
},
"alignment": {
"type": {
"name": "&#39;start&#39; | &#39;end&#39; | &#39;center&#39;",
"description": "&#39;start&#39; | &#39;end&#39; | &#39;center&#39;"
},
"default": "'center'"
},
"alignmentOffset": { "type": { "name": "number", "description": "number" }, "default": "0" },
"anchor": {
"type": {
"name": "Element | null | VirtualElement | React.MutableRefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null)",
"description": "Element | null | VirtualElement | React.MutableRefObject&lt;Element | null&gt; | (() =&gt; Element | VirtualElement | null)"
}
},
"arrowPadding": { "type": { "name": "number", "description": "number" }, "default": "5" },
"collisionBoundary": {
"type": { "name": "Boundary", "description": "Boundary" },
"default": "'clippingAncestors'"
},
"collisionPadding": { "type": { "name": "Padding", "description": "Padding" }, "default": "5" },
"followCursorAxis": {
"type": {
"name": "&#39;none&#39; | &#39;x&#39; | &#39;y&#39; | &#39;both&#39;",
"description": "&#39;none&#39; | &#39;x&#39; | &#39;y&#39; | &#39;both&#39;"
},
"default": "'none'"
},
"hideWhenDetached": {
"type": { "name": "boolean", "description": "boolean" },
"default": "false"
},
"instant": { "type": { "name": "boolean", "description": "boolean" } },
"keepMounted": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
"mounted": { "type": { "name": "boolean", "description": "boolean" } },
"open": { "type": { "name": "boolean", "description": "boolean" } },
"positionStrategy": {
"type": {
"name": "&#39;absolute&#39; | &#39;fixed&#39;",
"description": "&#39;absolute&#39; | &#39;fixed&#39;"
},
"default": "'absolute'"
},
"rootContext": {
"type": { "name": "FloatingRootContext", "description": "FloatingRootContext" }
},
"setMounted": {
"type": {
"name": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;",
"description": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;"
}
},
"side": {
"type": {
"name": "&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;",
"description": "&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;"
},
"default": "'top'"
},
"sideOffset": { "type": { "name": "number", "description": "number" }, "default": "0" },
"sticky": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }
},
"returnValue": {
"alignment": {
"type": {
"name": "&#39;start&#39; | &#39;end&#39; | &#39;center&#39;",
"description": "&#39;start&#39; | &#39;end&#39; | &#39;center&#39;"
},
"required": true
},
"arrowRef": {
"type": {
"name": "React.MutableRefObject&lt;Element | null&gt;",
"description": "React.MutableRefObject&lt;Element | null&gt;"
},
"required": true
},
"arrowUncentered": {
"type": { "name": "boolean", "description": "boolean" },
"required": true
},
"getArrowProps": {
"type": {
"name": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps",
"description": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps"
},
"required": true
},
"getPositionerProps": {
"type": {
"name": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps",
"description": "(externalProps?: GenericHTMLProps) =&gt; GenericHTMLProps"
},
"required": true
},
"mounted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
"side": {
"type": {
"name": "&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;",
"description": "&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;"
},
"required": true
}
},
"parameters": {},
"returnValue": {},
"name": "useTooltipPositioner",
"filename": "/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts",
"imports": ["import { useTooltipPositioner } from '@base_ui/react/Tooltip';"],
"demos": "<ul><li><a href=\"/base-ui/react-tooltip/#hooks\">Tooltip</a></li></ul>"
"demos": "<ul></ul>"
}
88 changes: 3 additions & 85 deletions docs/pages/base-ui/api/use-tooltip-root.json
Original file line number Diff line number Diff line change
@@ -1,90 +1,8 @@
{
"parameters": {
"animated": { "type": { "name": "boolean", "description": "boolean" }, "default": "true" },
"closeDelay": { "type": { "name": "number", "description": "number" }, "default": "0" },
"defaultOpen": { "type": { "name": "boolean", "description": "boolean" } },
"delay": { "type": { "name": "number", "description": "number" }, "default": "300" },
"delayType": {
"type": {
"name": "&#39;rest&#39; | &#39;hover&#39;",
"description": "&#39;rest&#39; | &#39;hover&#39;"
},
"default": "'rest'"
},
"followCursorAxis": {
"type": {
"name": "&#39;none&#39; | &#39;x&#39; | &#39;y&#39; | &#39;both&#39;",
"description": "&#39;none&#39; | &#39;x&#39; | &#39;y&#39; | &#39;both&#39;"
},
"default": "'none'"
},
"hoverable": { "type": { "name": "boolean", "description": "boolean" }, "default": "true" },
"keepMounted": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
"onOpenChange": {
"type": {
"name": "(isOpen: boolean, event?: Event, reason?: OpenChangeReason) =&gt; void",
"description": "(isOpen: boolean, event?: Event, reason?: OpenChangeReason) =&gt; void"
}
},
"open": { "type": { "name": "boolean", "description": "boolean" } },
"popupElement": {
"type": { "name": "HTMLElement | null", "description": "HTMLElement | null" },
"default": "null"
},
"triggerElement": {
"type": { "name": "Element | null", "description": "Element | null" },
"default": "null"
}
},
"returnValue": {
"getRootPositionerProps": {
"type": {
"name": "UseInteractionsReturn[&#39;getFloatingProps&#39;]",
"description": "UseInteractionsReturn[&#39;getFloatingProps&#39;]"
},
"required": true
},
"getTriggerProps": {
"type": {
"name": "UseInteractionsReturn[&#39;getReferenceProps&#39;]",
"description": "UseInteractionsReturn[&#39;getReferenceProps&#39;]"
},
"required": true
},
"instantType": {
"type": {
"name": "&#39;delay&#39; | &#39;dismiss&#39; | &#39;focus&#39; | undefined",
"description": "&#39;delay&#39; | &#39;dismiss&#39; | &#39;focus&#39; | undefined"
},
"required": true
},
"mounted": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
"open": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
"rootContext": {
"type": { "name": "FloatingRootContext", "description": "FloatingRootContext" },
"required": true
},
"setMounted": {
"type": {
"name": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;",
"description": "React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;"
},
"required": true
},
"setOpen": {
"type": {
"name": "(value: boolean, event?: Event, reason?: OpenChangeReason) =&gt; void",
"description": "(value: boolean, event?: Event, reason?: OpenChangeReason) =&gt; void"
},
"required": true
},
"transitionStatus": {
"type": { "name": "TransitionStatus", "description": "TransitionStatus" },
"required": true
}
},
"parameters": {},
"returnValue": {},
"name": "useTooltipRoot",
"filename": "/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts",
"imports": ["import { useTooltipRoot } from '@base_ui/react/Tooltip';"],
"demos": "<ul><li><a href=\"/base-ui/react-tooltip/#hooks\">Tooltip</a></li></ul>"
"demos": "<ul></ul>"
}
26 changes: 2 additions & 24 deletions docs/pages/base-ui/react-tooltip/[docsTab]/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import TooltipPositionerApiJsonPageContent from '../../api/tooltip-positioner.js
import TooltipProviderApiJsonPageContent from '../../api/tooltip-provider.json';
import TooltipRootApiJsonPageContent from '../../api/tooltip-root.json';
import TooltipTriggerApiJsonPageContent from '../../api/tooltip-trigger.json';
import useTooltipPositionerApiJsonPageContent from '../../api/use-tooltip-positioner.json';
import useTooltipRootApiJsonPageContent from '../../api/use-tooltip-root.json';

export default function Page(props) {
const { userLanguage, ...other } = props;
Expand Down Expand Up @@ -71,20 +69,6 @@ export const getStaticProps = () => {
);
const TooltipTriggerApiDescriptions = mapApiPageTranslations(TooltipTriggerApiReq);

const useTooltipPositionerApiReq = require.context(
'docs-base/translations/api-docs/use-tooltip-positioner',
false,
/\.\/use-tooltip-positioner.*.json$/,
);
const useTooltipPositionerApiDescriptions = mapApiPageTranslations(useTooltipPositionerApiReq);

const useTooltipRootApiReq = require.context(
'docs-base/translations/api-docs/use-tooltip-root',
false,
/\.\/use-tooltip-root.*.json$/,
);
const useTooltipRootApiDescriptions = mapApiPageTranslations(useTooltipRootApiReq);

return {
props: {
componentsApiDescriptions: {
Expand All @@ -103,14 +87,8 @@ export const getStaticProps = () => {
TooltipRoot: TooltipRootApiJsonPageContent,
TooltipTrigger: TooltipTriggerApiJsonPageContent,
},
hooksApiDescriptions: {
useTooltipPositioner: useTooltipPositionerApiDescriptions,
useTooltipRoot: useTooltipRootApiDescriptions,
},
hooksApiPageContents: {
useTooltipPositioner: useTooltipPositionerApiJsonPageContent,
useTooltipRoot: useTooltipRootApiJsonPageContent,
},
hooksApiDescriptions: {},
hooksApiPageContents: {},
},
};
};
Original file line number Diff line number Diff line change
@@ -1,42 +1,46 @@
{
"componentDescription": "Renders the element that positions the popover popup.",
"componentDescription": "The popover positioner element.",
"propDescriptions": {
"alignment": {
"description": "The alignment of the popover element to the anchor element along its cross axis."
"description": "The alignment of the popover popup element to the anchor element along its cross axis."
},
"alignmentOffset": {
"description": "The offset of the popover element along its alignment axis."
"description": "The offset of the popover popup element along its alignment axis."
},
"anchor": { "description": "The anchor element to which the popover popup will be placed at." },
"anchor": { "description": "The element to which the popover popup element is anchored to." },
"arrowPadding": {
"description": "Determines the padding between the arrow and the popover popup&#39;s edges. Useful when the popover popup has rounded corners via <code>border-radius</code>."
"description": "Determines the padding between the arrow and the popover popup edges. Useful when the popover popup element has rounded corners via <code>border-radius</code>."
},
"className": {
"description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
},
"collisionBoundary": {
"description": "The boundary that the popover element should be constrained to."
"description": "The boundary that the popover popup element should be constrained to."
},
"collisionPadding": {
"description": "The padding between the popover popup element and the edges of the collision boundary to add whitespace between them to prevent them from touching."
},
"collisionPadding": { "description": "The padding of the collision boundary." },
"container": {
"description": "The container element to which the popover popup will be appended to."
"description": "The container element to which the popover positioner is appended to."
},
"hideWhenDetached": {
"description": "If <code>true</code>, the popover will be hidden if it is detached from its anchor element due to differing clipping contexts."
"description": "Whether the popover popup element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view."
},
"keepMounted": {
"description": "If <code>true</code>, popover stays mounted in the DOM when closed."
"description": "Whether the popover popup remains mounted in the DOM while closed."
},
"positionStrategy": {
"description": "The CSS position strategy for positioning the popover popup element."
},
"render": { "description": "A function to customize rendering of the component." },
"side": {
"description": "The side of the anchor element that the popover element should align to."
"description": "The side of the anchor element that the popover popup element should be placed at."
},
"sideOffset": {
"description": "The gap between the anchor element and the popover popup element."
},
"sideOffset": { "description": "The gap between the anchor element and the popover element." },
"sticky": {
"description": "If <code>true</code>, allow the popover to remain in stuck view while the anchor element is scrolled out of view."
"description": "Whether to allow the popover to remain stuck in view while the anchor element is scrolled out of view."
}
},
"classDescriptions": {}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"componentDescription": "The tooltip arrow caret element.",
"componentDescription": "Renders an arrow that points to the center of the anchor element.",
"propDescriptions": {
"className": {
"description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
Expand Down
Loading

0 comments on commit f83b1c6

Please sign in to comment.