From 6210b469a0334ac2be515527a71d49e7f26c4d0f Mon Sep 17 00:00:00 2001 From: Vlad Moroz Date: Fri, 6 Dec 2024 17:39:27 +0100 Subject: [PATCH] Content 7: Tooltip and Slider (#980) --- .../new/(content)/components/menu/page.mdx | 12 +- .../demos/hero/tailwind/index.tsx | 4 +- .../demos/hero/css-modules/index.module.css | 5 + .../popover/demos/hero/css-modules/index.tsx | 2 +- .../popover/demos/hero/tailwind/index.tsx | 2 +- .../demos/hero/css-modules/index.module.css | 5 +- .../separator/demos/hero/tailwind/index.tsx | 12 +- .../demos/hero/css-modules/index.module.css | 36 +++++ .../slider/demos/hero/css-modules/index.tsx | 16 +++ .../components/slider/demos/hero/index.ts | 3 + .../slider/demos/hero/tailwind/index.tsx | 16 +++ .../new/(content)/components/slider/page.mdx | 29 +++++ .../demos/hero/css-modules/index.module.css | 123 ++++++++++++++++++ .../tooltip/demos/hero/css-modules/index.tsx | 96 ++++++++++++++ .../components/tooltip/demos/hero/index.ts | 3 + .../tooltip/demos/hero/tailwind/index.tsx | 95 ++++++++++++++ .../new/(content)/components/tooltip/page.mdx | 32 +++++ 17 files changed, 477 insertions(+), 14 deletions(-) create mode 100644 docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.module.css create mode 100644 docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.tsx create mode 100644 docs/src/app/new/(content)/components/slider/demos/hero/index.ts create mode 100644 docs/src/app/new/(content)/components/slider/demos/hero/tailwind/index.tsx create mode 100644 docs/src/app/new/(content)/components/slider/page.mdx create mode 100644 docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.module.css create mode 100644 docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.tsx create mode 100644 docs/src/app/new/(content)/components/tooltip/demos/hero/index.ts create mode 100644 docs/src/app/new/(content)/components/tooltip/demos/hero/tailwind/index.tsx create mode 100644 docs/src/app/new/(content)/components/tooltip/page.mdx diff --git a/docs/src/app/new/(content)/components/menu/page.mdx b/docs/src/app/new/(content)/components/menu/page.mdx index d2b16b6e9a..3c41939943 100644 --- a/docs/src/app/new/(content)/components/menu/page.mdx +++ b/docs/src/app/new/(content)/components/menu/page.mdx @@ -29,6 +29,14 @@ import { Menu } from '@base-ui-components/react/menu'; + + {/* Submenu */} + + + + ... + + ; @@ -36,6 +44,6 @@ import { Menu } from '@base-ui-components/react/menu'; -{/* TODO: SubmenuTrigger and Separator are missing */} +{/* TODO: Separator is missing */} diff --git a/docs/src/app/new/(content)/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/number-field/demos/hero/tailwind/index.tsx index 931602f9b6..ad2fbbb61e 100644 --- a/docs/src/app/new/(content)/components/number-field/demos/hero/tailwind/index.tsx +++ b/docs/src/app/new/(content)/components/number-field/demos/hero/tailwind/index.tsx @@ -22,11 +22,11 @@ export default function ExampleNumberField() { - + - + diff --git a/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.module.css index 83e18ae8b5..86302e8d4d 100644 --- a/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.module.css +++ b/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.module.css @@ -34,6 +34,11 @@ } } +.Icon { + width: 1.25rem; + height: 1.25rem; +} + .Popup { box-sizing: border-box; padding: 1rem 1.5rem; diff --git a/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.tsx index 7d4aae49c4..2221e489ae 100644 --- a/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.tsx +++ b/docs/src/app/new/(content)/components/popover/demos/hero/css-modules/index.tsx @@ -6,7 +6,7 @@ export default function ExamplePopover() { return ( - + diff --git a/docs/src/app/new/(content)/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/popover/demos/hero/tailwind/index.tsx index 322d3e7300..22734be93c 100644 --- a/docs/src/app/new/(content)/components/popover/demos/hero/tailwind/index.tsx +++ b/docs/src/app/new/(content)/components/popover/demos/hero/tailwind/index.tsx @@ -4,7 +4,7 @@ import { Popover } from '@base-ui-components/react/popover'; export default function ExamplePopover() { return ( - + diff --git a/docs/src/app/new/(content)/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/separator/demos/hero/css-modules/index.module.css index 7c91e8918d..209bc6c9ef 100644 --- a/docs/src/app/new/(content)/components/separator/demos/hero/css-modules/index.module.css +++ b/docs/src/app/new/(content)/components/separator/demos/hero/css-modules/index.module.css @@ -4,7 +4,9 @@ } .Link { - color: var(--color-gray-600); + font-size: 0.9375rem; + line-height: 1.375rem; + color: var(--color-gray-900); text-decoration-color: var(--color-gray-400); text-decoration-thickness: 1px; text-decoration-line: none; @@ -17,7 +19,6 @@ } &:focus-visible { - color: var(--color-gray-900); border-radius: 0.125rem; outline: 2px solid var(--color-blue); text-decoration-line: none; diff --git a/docs/src/app/new/(content)/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/separator/demos/hero/tailwind/index.tsx index f2a54575bb..e1a5aad0fa 100644 --- a/docs/src/app/new/(content)/components/separator/demos/hero/tailwind/index.tsx +++ b/docs/src/app/new/(content)/components/separator/demos/hero/tailwind/index.tsx @@ -6,25 +6,25 @@ export default function ExampleSeparator() {
Home Pricing Blog Support @@ -33,13 +33,13 @@ export default function ExampleSeparator() { Log in Sign up diff --git a/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.module.css new file mode 100644 index 0000000000..168d747643 --- /dev/null +++ b/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.module.css @@ -0,0 +1,36 @@ +.Control { + box-sizing: border-box; + display: flex; + align-items: center; + width: 14rem; + padding-block: 0.75rem; +} + +.Track { + width: 100%; + background-color: var(--color-gray-200); + box-shadow: inset 0 0 0 1px var(--color-gray-200); + height: 0.25rem; + border-radius: 0.25rem; + position: relative; +} + +.Indicator { + /* TODO remove relative when position absolute is removed */ + position: relative !important; + display: block; + border-radius: 0.25rem; + background-color: var(--color-gray-700); +} + +.Thumb { + width: 1rem; + height: 1rem; + border-radius: 100%; + background-color: white; + outline: 1px solid var(--color-gray-300); + + &:focus-visible { + outline: 2px solid var(--color-blue); + } +} diff --git a/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.tsx b/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.tsx new file mode 100644 index 0000000000..154ebca546 --- /dev/null +++ b/docs/src/app/new/(content)/components/slider/demos/hero/css-modules/index.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Slider } from '@base-ui-components/react/slider'; +import styles from './index.module.css'; + +export default function ExampleSlider() { + return ( + + + + + + + + + ); +} diff --git a/docs/src/app/new/(content)/components/slider/demos/hero/index.ts b/docs/src/app/new/(content)/components/slider/demos/hero/index.ts new file mode 100644 index 0000000000..80097d6015 --- /dev/null +++ b/docs/src/app/new/(content)/components/slider/demos/hero/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default as CssModules } from './css-modules'; +export { default as Tailwind } from './tailwind'; diff --git a/docs/src/app/new/(content)/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/slider/demos/hero/tailwind/index.tsx new file mode 100644 index 0000000000..2d906a3c3d --- /dev/null +++ b/docs/src/app/new/(content)/components/slider/demos/hero/tailwind/index.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Slider } from '@base-ui-components/react/slider'; + +export default function ExampleSlider() { + return ( + + + + {/* TODO remove relative when position absolute is removed */} + + + + + + ); +} diff --git a/docs/src/app/new/(content)/components/slider/page.mdx b/docs/src/app/new/(content)/components/slider/page.mdx new file mode 100644 index 0000000000..718e4e0b68 --- /dev/null +++ b/docs/src/app/new/(content)/components/slider/page.mdx @@ -0,0 +1,29 @@ +# Slider + +An easily stylable range input. + + + + +## API reference + +Import the component and place its parts the following way: + +```jsx title="Anatomy" +import { Slider } from '@base-ui-components/react/slider'; + + + + + + + + + +; +``` + + diff --git a/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.module.css new file mode 100644 index 0000000000..953254fb5e --- /dev/null +++ b/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.module.css @@ -0,0 +1,123 @@ +.Group { + display: flex; + border: 1px solid var(--color-gray-200); + background-color: var(--color-gray-50); + border-radius: 0.375rem; + padding: 0.125rem; +} + +.GhostButton { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + padding: 0; + margin: 0; + outline: 0; + border: 0; + border-radius: 0.25rem; + background-color: transparent; + color: var(--color-gray-900); + user-select: none; + + &[data-popup-open] { + background-color: var(--color-gray-100); + } + + &:focus-visible { + background-color: transparent; + outline: 2px solid var(--color-blue); + outline-offset: -1px; + } + + @media (hover: hover) { + &:hover { + background-color: var(--color-gray-100); + } + } + + &:active { + background-color: var(--color-gray-200); + } +} + +.Icon { + width: 1rem; + height: 1rem; +} + +.Popup { + box-sizing: border-box; + font-size: 0.9375rem; + line-height: 1.375rem; + display: flex; + flex-direction: column; + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + background-color: canvas; + transform-origin: var(--transform-origin); + transition: + transform 150ms, + opacity 150ms; + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + transform: scale(0.9); + } + + &[data-instant] { + transition-duration: 0ms; + } + + @media (prefers-color-scheme: light) { + outline: 1px solid var(--color-gray-200); + box-shadow: + 0px 10px 15px -3px var(--color-gray-200), + 0px 4px 6px -4px var(--color-gray-200); + } + + @media (prefers-color-scheme: dark) { + outline: 1px solid var(--color-gray-300); + outline-offset: -1px; + } +} + +.Arrow { + display: flex; + + &[data-side='top'] { + bottom: -8px; + rotate: 180deg; + } + &[data-side='bottom'] { + top: -8px; + rotate: 0deg; + } + &[data-side='left'] { + right: -13px; + rotate: 90deg; + } + &[data-side='right'] { + left: -13px; + rotate: -90deg; + } +} + +.ArrowFill { + fill: canvas; +} + +.ArrowOuterStroke { + @media (prefers-color-scheme: light) { + fill: var(--color-gray-200); + } +} + +.ArrowInnerStroke { + @media (prefers-color-scheme: dark) { + fill: var(--color-gray-300); + } +} diff --git a/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.tsx new file mode 100644 index 0000000000..7d98a844f3 --- /dev/null +++ b/docs/src/app/new/(content)/components/tooltip/demos/hero/css-modules/index.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import { Tooltip } from '@base-ui-components/react/tooltip'; +import styles from './index.module.css'; + +export default function ExampleTooltip() { + return ( + +
+ + + + + + + + + + Bold + + + + + + + + + + + + + + Italic + + + + + + + + + + + + + + Underline + + + +
+ + ); +} + +function ArrowSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + + + ); +} + +function BoldIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} + +function ItalicIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} + +function UnderlineIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/docs/src/app/new/(content)/components/tooltip/demos/hero/index.ts b/docs/src/app/new/(content)/components/tooltip/demos/hero/index.ts new file mode 100644 index 0000000000..80097d6015 --- /dev/null +++ b/docs/src/app/new/(content)/components/tooltip/demos/hero/index.ts @@ -0,0 +1,3 @@ +'use client'; +export { default as CssModules } from './css-modules'; +export { default as Tailwind } from './tailwind'; diff --git a/docs/src/app/new/(content)/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/tooltip/demos/hero/tailwind/index.tsx new file mode 100644 index 0000000000..79876eeb82 --- /dev/null +++ b/docs/src/app/new/(content)/components/tooltip/demos/hero/tailwind/index.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import { Tooltip } from '@base-ui-components/react/tooltip'; + +export default function ExampleTooltip() { + return ( + +
+ + + + + + + + + + Bold + + + + + + + + + + + + + + Italic + + + + + + + + + + + + + + Underline + + + +
+ + ); +} + +function ArrowSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + + + ); +} + +function BoldIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} + +function ItalicIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} + +function UnderlineIcon(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/docs/src/app/new/(content)/components/tooltip/page.mdx b/docs/src/app/new/(content)/components/tooltip/page.mdx new file mode 100644 index 0000000000..73d2e8a7ca --- /dev/null +++ b/docs/src/app/new/(content)/components/tooltip/page.mdx @@ -0,0 +1,32 @@ +# Tooltip + + + A popup that appears when an element is hovered or focused, showing a hint for sighted users. + + + + + +## API reference + +Import the component and place its parts the following way: + +```jsx title="Anatomy" +import { Tooltip } from '@base-ui-components/react/tooltip'; + + + + + + + + + + +; +``` + +