From 15e56d4812aba8e0cf200e807ffcdf00f944b599 Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 27 Jul 2023 14:04:47 -0500 Subject: [PATCH 1/3] docs: update Tooltip to v2 docs (#1117) --- docs/pages/components/Tooltip.mdx | 195 +++++++++++++++++++ docs/patterns/components/Tooltip/index.css | 11 -- docs/patterns/components/Tooltip/index.js | 206 --------------------- 3 files changed, 195 insertions(+), 217 deletions(-) create mode 100644 docs/pages/components/Tooltip.mdx delete mode 100644 docs/patterns/components/Tooltip/index.css delete mode 100644 docs/patterns/components/Tooltip/index.js diff --git a/docs/pages/components/Tooltip.mdx b/docs/pages/components/Tooltip.mdx new file mode 100644 index 000000000..f20858425 --- /dev/null +++ b/docs/pages/components/Tooltip.mdx @@ -0,0 +1,195 @@ +--- +title: Tooltip +description: A small text box that gives more information about a UI element when a user hovers over or focuses it. +source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Tooltip/index.tsx +--- + +import { useRef } from 'react' +import { Tooltip, TooltipHead, TooltipContent, Button, TextField, Line } from '@deque/cauldron-react' + +```js +import { Tooltip } from '@deque/cauldron-react' +``` + +## Examples + +Cauldron's tooltip relies on [Popper](https://popper.js.org/) to position tooltips dynamically. Tooltips can be triggered from any focusable element via a `target` attribute pointed to an HTMLElement or React ref object. + +### Text Tooltips + +Text Tooltips are the default variant and are intended to show short single-line text hints. + +```jsx example +function TextTooltipExamples() { + const top = useRef(); + const bottom = useRef(); + const left = useRef(); + const right = useRef(); + + return ( + <> + + + On top + + + + + On bottom + + + + + On your left + + + + + On your right + + + ) +} +``` + +### Info Tooltips + +Info Tooltips are an alternate variant to present longer textual content that may occur over multiple lines. + +```jsx example +function InfoTooltipExamples() { + const top = useRef(); + const bottom = useRef(); + const left = useRef(); + const right = useRef(); + + return ( + <> + + + Here’s an informational tooltip with more content on top. + + + + + Here’s an informational tooltip with more content on bottom. + + + + + Here’s an informational tooltip with more content on your left. + + + + + Here’s an informational tooltip with more content on your right. + + + ) +} +``` + +### Big Tooltips + +For more verbose tooltips, the `big` variant can be used. + +```jsx example +function BigTooltipExample() { + const password = useRef() + return ( + <> + + + Password requirements + + +
    +
  • The character length should be long or whatever.
    • +
  • + You need Lower-case, Upper-case, Super-case, and Basket-case. +
    • +
  • + Special characters are good, but remember all characters are + special in their own way +
    • +
  • + Make sure your passwords match...that should be obvious. +
    • +
+ + + + ) +} +``` + +## Props + + + +## Related Components + +- [TooltipTabstop](./TooltipTabstop) \ No newline at end of file diff --git a/docs/patterns/components/Tooltip/index.css b/docs/patterns/components/Tooltip/index.css deleted file mode 100644 index ed7ac5783..000000000 --- a/docs/patterns/components/Tooltip/index.css +++ /dev/null @@ -1,11 +0,0 @@ -.tooltip-demo .Button--secondary { - margin: 15px auto; -} - -.Form { - max-width: 300px; -} - -.cauldron--theme-dark .tooltip-demo .popper-link { - color: var(--white); -} diff --git a/docs/patterns/components/Tooltip/index.js b/docs/patterns/components/Tooltip/index.js deleted file mode 100644 index 17f85ddeb..000000000 --- a/docs/patterns/components/Tooltip/index.js +++ /dev/null @@ -1,206 +0,0 @@ -import React, { useRef } from 'react'; -import Demo from '../../../Demo'; -import { - Tooltip, - TooltipHead, - TooltipContent, - Button, - Code, - TextField, - Line -} from '@deque/cauldron-react'; -import './index.css'; - -const DemoTooltip = () => { - const top = useRef(); - const bottom = useRef(); - const left = useRef(); - const right = useRef(); - const topInfo = useRef(); - const bottomInfo = useRef(); - const leftInfo = useRef(); - const rightInfo = useRef(); - const password = useRef(); - - return ( -
- -

- Cauldron’s Tooltip relies on{' '} - - Popper - {' '} - to position tooltips dynamically. -

-

Text Tooltips

-
- - - On top - - - - - On bottom - - - - - On your left - - - - - On your right - -
-

Info Tooltips

-
- - - Here’s an informational tooltip with more content on top. - - - - - Here’s an informational tooltip with more content on bottom. - - - - - Here’s an informational tooltip with more content on your left. - - - - - Here’s an informational tooltip with more content on your right. - -
- -

Big tooltips

-

Used for more verbose tooltips

-
- - - Password requirements - - -
    -
  • The character length should be long or whatever.
    • -
  • - You need Lower-case, Upper-case, Super-case, and Basket-case. -
    • -
  • - Special characters are good, but remember all characters are - special in their own way -
    • -
  • - Make sure your passwords match...that should be obvious. -
    • -
- - -
-

Code Samples

- - {`import React from 'react'; -import { Tooltip, Button } from '@deque/cauldron-react'; - -const Demo = () => { - const tooltipTargetRef = useRef() - const tooltipInfoTargetRef = useRef() - return ( -
- - - Tooltip content (I align to the right of the trigger!) - - - - - Tooltip content (I align to the right of the trigger!) - -
- ) -};`} - - -

- <Tooltip /> will auto-generate id for - the tooltip and aria-describedby for the target if no id - is provided for the tooltip. For more fine-tuned control of the target - description, you can provide your own id and{' '} - aria-describedby attributes. -

- - - {` - - Tooltip content -`} - - -
- ); -}; - -export default DemoTooltip; From bb3ed293f2c5de816f41b4835fdcb6defdb44d85 Mon Sep 17 00:00:00 2001 From: Yahya Hafez <60084578+yhafez@users.noreply.github.com> Date: Thu, 27 Jul 2023 12:11:20 -0700 Subject: [PATCH 2/3] fix(styles): fix bug where Error class changes are applied globally (#1131) --- packages/styles/forms.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/styles/forms.css b/packages/styles/forms.css index f8e4ffb74..f4a3cae41 100644 --- a/packages/styles/forms.css +++ b/packages/styles/forms.css @@ -182,11 +182,14 @@ textarea.Field--has-error:focus:hover, .Error { color: var(--field-error-text-color); - border-top: 1px solid var(--field-error-border-color); text-align: left; - font-weight: var(--font-weight-normal); font-size: var(--text-size-smallest); + font-weight: var(--font-weight-normal); +} + +.Checkbox__wrap .Error { margin-top: var(--space-half); + border-top: 1px solid var(--field-error-border-color); margin-left: calc(var(--icon-size) + 2px + var(--space-half)); padding: var(--space-half) 0; } From 3e1d79b65f2dfd77ce8aa586f017aa124e720712 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 28 Jul 2023 19:51:09 +0000 Subject: [PATCH 3/3] chore(cauldron): Release 5.6.2 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- packages/react/package.json | 2 +- packages/styles/package.json | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 02685adc7..59f785c21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [5.6.2](https://github.com/dequelabs/cauldron/compare/v5.6.1...v5.6.2) (2023-07-28) + + +### Bug Fixes + +* **styles:** fix bug where Error class changes are applied globally ([#1131](https://github.com/dequelabs/cauldron/issues/1131)) ([bb3ed29](https://github.com/dequelabs/cauldron/commit/bb3ed293f2c5de816f41b4835fdcb6defdb44d85)) + ### [5.6.1](https://github.com/dequelabs/cauldron/compare/v5.6.0...v5.6.1) (2023-07-26) diff --git a/package.json b/package.json index c0af666bc..6de845898 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cauldron", "private": true, - "version": "5.6.1", + "version": "5.6.2", "license": "MPL-2.0", "scripts": { "clean": "rimraf dist docs/dist", diff --git a/packages/react/package.json b/packages/react/package.json index 29d14421c..e8e072555 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@deque/cauldron-react", - "version": "5.6.1", + "version": "5.6.2", "description": "Fully accessible react components library for Deque Cauldron", "homepage": "https://cauldron.dequelabs.com/", "publishConfig": { diff --git a/packages/styles/package.json b/packages/styles/package.json index 1fb05e782..13e2a3548 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,6 +1,6 @@ { "name": "@deque/cauldron-styles", - "version": "5.6.1", + "version": "5.6.2", "license": "MPL-2.0", "description": "deque cauldron pattern library styles", "repository": "https://github.com/dequelabs/cauldron",