@react-md/tooltip
Advanced tools
Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15
102
CHANGELOG.md
@@ -1,1 +0,101 @@ | ||
# v2.0.0-alpha.0 | ||
# v2.0.0 | ||
Tooltips were completely re-written for the v2 release to help fix the missing | ||
accessibility issues from v1. One of the most "exciting" things that was added | ||
during the re-write is that tooltips will now automatically determine the "best" | ||
location to render itself within the viewport instead of manually needing to | ||
change the `position` yourself! Woo hoo! | ||
Starting from v2, you'll probably just want to use the `Tooltipped` component as | ||
it'll handle all the functionality of a tooltip for you and ensuring that | ||
correct props are added to the element being tooltipped. | ||
## New Features / Behavior | ||
- tooltips now automatically position themselves within the viewport. | ||
- tooltips no longer require being within a `position: relative` container | ||
- tooltips now require a unique `id` to help with accessibility concerns and the | ||
tooltipped element gains a `aria-describedby` pointing to the tooltip's id. | ||
- tooltips can now be portalled in the DOM to help with weird overflow issues. | ||
- tooltips now support line wrapping by just enabling the `lineWrap` prop | ||
instead of having to write all the custom CSS yourself. | ||
- a new "hover mode" behavior was added to tooltips so that once a tooltip has | ||
become visible by hover, all other tooltips will become visible immediately | ||
instead of needing to wait for the initial show delay. | ||
- the tooltip will have a static size on all browser sizes unless the `dense` | ||
prop is enabled or the `$rmd-utils-auto-dense` variable is enabled. | ||
- tooltips now have a `border-radius` | ||
- tooltips no longer have an opacity applied to themselves to create clearer | ||
text and will no longer be slightly transparent. | ||
- the text color can now be configured for tooltips | ||
- the majority of the tooltip's theme can be changed with CSS variables | ||
## Breaking Changes | ||
- the `injectTooltip` higher order component was removed | ||
- the `TooltipContainer` component was removed | ||
### New SCSS Variables, Functions, and Mixins | ||
- `$rmd-toolip-line-height: 1.5rem !default` - The line height to use for the | ||
tooltip text. | ||
- `$rmd-tooltip-line-wrap-vertical-padding: 0.5625rem !default` - The amount of | ||
padding to apply to the top and bottom of the tooltip when line wrapping is | ||
enabled. | ||
- `$rmd-tooltip-border-radius: 0.25rem !default` - The new border radius applied | ||
to tooltips | ||
- `$rmd-tooltip-transition-distance: 0.5rem !default` - The distance that the | ||
tooltip should animate while appearing and hiding. | ||
- `$rmd-tooltip-color` - The text color to use for tooltips that will | ||
automatically be adjusted to be contrast compliant relative to the | ||
`$rmd-tooltip-background-color`. Can be overridden manually. | ||
- `$rmd-tooltip-max-width: 15rem !default` - The max width to use for tooltips. | ||
This is mostly to help with the new line wrapping functionality. | ||
- `$rmd-tooltip-enter-duration: $rmd-transition-standard-time !default` - The | ||
tooltip's enter transition duration. | ||
- `$rmd-tooltip-exit-duration: $rmd-transition-standard-time !default` - The | ||
tooltip's exit transition duration. | ||
- `$rmd-tooltip-z-index: 100 !default` - The `z-index` to apply to tooltips | ||
- `@function rmd-tooltip-theme` - gets one of the theme values and validates | ||
that the theme name is valid | ||
- `@function rmd-tooltip-theme-var` - gets one of the theme values as a css | ||
variable with a fallback value and validates that the theme name is valid | ||
- `@mixin rmd-tooltip-theme` - applies one of the theme values to a css property | ||
as a css variable | ||
- `@mixin rmd-tooltip-theme-update-var` - updates one of the theme values as a | ||
css variable | ||
- `@mixin rmd-tooltip-dense-theme` - updates all the tooltip theme styles via | ||
CSS variables to use the dense theme (automatically handled from | ||
[@react-md/utils] if the `$rmd-utils-auto-dense` variable has been enabled). | ||
### Renamed SCSS Variables, Functions, and Mixins | ||
- `$md-tooltip-mobile-font-size` was renamed to `$rmd-tooltip-font-size` and | ||
changed the default value from `14px` to `1rem` | ||
- `$md-tooltip-mobile-tile-height` was renamed to `$rmd-tooltip-min-height` and | ||
changed the default value from `32px` to `2rem` | ||
- `$md-tooltip-mobile-lr-padding` was renamed to | ||
`$rmd-tooltip-horizontal-padding` and changed the default value from `16px` to | ||
`1rem` | ||
- `$md-tooltip-mobile-top-margin` was renamed to `$md-tooltip-spacing` and | ||
changed the default value from `24px` to `1.5rem` | ||
- `$md-tooltip-desktop-font-size` was renamed to `$rmd-tooltip-dense-font-size` | ||
and changed the default value from `10px` to `0.625rem` | ||
- `$md-tooltip-desktop-tile-height` was renamed to | ||
`$rmd-tooltip-dense-min-height` and changed the default value from `22px` to | ||
`1.375rem` | ||
- `$md-tooltip-desktop-lr-padding` was renamed to | ||
`$rmd-tooltip-dense-horizontal-padding` and changed the default value from | ||
`8px` to `0.5rem` | ||
- `$md-tooltip-desktop-top-margin` was renamed to `$md-tooltip-dense-spacing` | ||
and changed the default value from `14px` to `0.875rem` | ||
### Removed SCSS Variables and Mixins | ||
- `$md-tooltip-mobile-tb-padding` was removed since there is new line wrap | ||
functionality and variables | ||
- `$md-tooltip-desktop-tb-padding` was removed since there is new line wrap | ||
functionality and variables | ||
[@react-md/utils]: | ||
https://github.com/mlaursen/react-md/tree/master/packages/utils |
@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () { | ||
}; | ||
import React, { Children, cloneElement, Fragment, useMemo, } from "react"; | ||
import React, { Children, cloneElement, useMemo, } from "react"; | ||
import cn from "classnames"; | ||
@@ -122,3 +122,3 @@ import { ConditionalPortal, } from "@react-md/portal"; | ||
}, __assign({}, config)); | ||
return (React.createElement(Fragment, null, | ||
return (React.createElement(React.Fragment, null, | ||
cloneElement(child, merged), | ||
@@ -125,0 +125,0 @@ tooltip)); |
@@ -133,3 +133,3 @@ "use strict"; | ||
}, __assign({}, config)); | ||
return (react_1.default.createElement(react_1.Fragment, null, | ||
return (react_1.default.createElement(react_1.default.Fragment, null, | ||
react_1.cloneElement(child, merged), | ||
@@ -136,0 +136,0 @@ tooltip)); |
{ | ||
"name": "@react-md/tooltip", | ||
"version": "2.0.0-alpha.14", | ||
"version": "2.0.0-alpha.15", | ||
"description": "Create accessible tooltips within react-md based on the material design specifications.", | ||
@@ -41,7 +41,7 @@ "scripts": { | ||
"dependencies": { | ||
"@react-md/portal": "^2.0.0-alpha.13", | ||
"@react-md/theme": "^2.0.0-alpha.14", | ||
"@react-md/transition": "^2.0.0-alpha.14", | ||
"@react-md/typography": "^2.0.0-alpha.14", | ||
"@react-md/utils": "^2.0.0-alpha.14", | ||
"@react-md/portal": "^2.0.0-alpha.15", | ||
"@react-md/theme": "^2.0.0-alpha.15", | ||
"@react-md/transition": "^2.0.0-alpha.15", | ||
"@react-md/typography": "^2.0.0-alpha.15", | ||
"@react-md/utils": "^2.0.0-alpha.15", | ||
"classnames": "^2.2.6", | ||
@@ -59,3 +59,3 @@ "react-transition-group": "^4.3.0" | ||
}, | ||
"gitHead": "2c22440705bce3fb3cfc5876011e7b3df8be1c03" | ||
"gitHead": "c20671308497530c59f6563eafd1914b55122b8c" | ||
} |
@@ -14,3 +14,3 @@ # @react-md/tooltip | ||
It is also recommended to install the following packages as they work | ||
hand-in-hand with the card package: | ||
hand-in-hand with this package: | ||
@@ -27,4 +27,5 @@ ```sh | ||
You should check out the | ||
[full documentation](https://react-md.dev/packages/tooltip) for live examples | ||
and more customization information, but an example usage is shown below. | ||
[full documentation](https://react-md.dev/packages/tooltip/demos) for live | ||
examples and more customization information, but an example usage is shown | ||
below. | ||
@@ -31,0 +32,0 @@ <!-- DOCS_REMOVE_END --> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
93
4493
48
266269