Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-md/tooltip

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-md/tooltip - npm Package Compare versions

Comparing version 2.0.0-alpha.14 to 2.0.0-alpha.15

lib/constants.d.ts

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

4

es/Tooltipped.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc