From 5787c266d6d69c8d02388aa76f9e8a7565ff9388 Mon Sep 17 00:00:00 2001 From: Simo Moujami Date: Mon, 30 Jul 2018 14:29:33 -0400 Subject: [PATCH 1/3] Add default css max-width and customization demo. --- .../demos/tooltips/CustomizedTooltips.js | 9 ++-- .../src/pages/demos/tooltips/VariableWidth.js | 45 +++++++++++++++++++ docs/src/pages/demos/tooltips/tooltips.md | 6 +++ packages/material-ui/src/Tooltip/Tooltip.js | 1 + pages/demos/tooltips.js | 7 +++ 5 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 docs/src/pages/demos/tooltips/VariableWidth.js diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js index 979a901c144c87..448e56c2283ea0 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js @@ -69,6 +69,9 @@ const styles = theme => ({ borderStyle: 'solid', }, }, + button: { + margin: theme.spacing.unit, + }, }); class CustomizedTooltips extends React.Component { @@ -88,10 +91,10 @@ class CustomizedTooltips extends React.Component { return (
- + - + - +
); diff --git a/docs/src/pages/demos/tooltips/VariableWidth.js b/docs/src/pages/demos/tooltips/VariableWidth.js new file mode 100644 index 00000000000000..e45e2bd493d980 --- /dev/null +++ b/docs/src/pages/demos/tooltips/VariableWidth.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Tooltip from '@material-ui/core/Tooltip'; + +const styles = theme => ({ + button: { + margin: theme.spacing.unit, + }, + customWidth: { + maxWidth: 500, + }, + noMaxWidth: { + maxWidth: 'inherit', + }, +}); + +const longText = ` +Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. +Praesent non nunc mollis, fermentum neque at, semper arcu. +Nullam eget est sed sem iaculis gravida eget vitae justo. +`; + +function VariableWidth({ classes }) { + return ( +
+ + + + + + + + + +
+ ); +} + +VariableWidth.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(VariableWidth); diff --git a/docs/src/pages/demos/tooltips/tooltips.md b/docs/src/pages/demos/tooltips/tooltips.md index 59727cf1048860..67be01413ed8d8 100644 --- a/docs/src/pages/demos/tooltips/tooltips.md +++ b/docs/src/pages/demos/tooltips/tooltips.md @@ -55,3 +55,9 @@ By default disabled elements like `Button` do not trigger user interactions so a ## Customized Tooltips {{"demo": "pages/demos/tooltips/CustomizedTooltips.js"}} + +## Variable Width + +The `Tooltip` wraps long text by default to make it readable. + +{{"demo": "pages/demos/tooltips/VariableWidth.js"}} diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 3128c5b0846e11..cbaefc7b5d5d96 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -24,6 +24,7 @@ export const styles = theme => ({ padding: '4px 8px', fontSize: theme.typography.pxToRem(10), lineHeight: `${theme.typography.round(14 / 10)}em`, + maxWidth: 300, }, /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */ touch: { diff --git a/pages/demos/tooltips.js b/pages/demos/tooltips.js index 7c10b8cc4547d3..a543abeb1fafb0 100644 --- a/pages/demos/tooltips.js +++ b/pages/demos/tooltips.js @@ -20,6 +20,13 @@ module.exports = require('fs') raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/tooltips/PositionedTooltips'), 'utf8') +`, + }, + 'pages/demos/tooltips/VariableWidth.js': { + js: require('docs/src/pages/demos/tooltips/VariableWidth').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/tooltips/VariableWidth'), 'utf8') `, }, 'pages/demos/tooltips/ControlledTooltips.js': { From 98a84e873199e1616f3eb2dfc0d70f76cffd1d4a Mon Sep 17 00:00:00 2001 From: Simo Moujami Date: Mon, 30 Jul 2018 14:40:08 -0400 Subject: [PATCH 2/3] Use 'none' instead of 'inherit' to disable the max-width property. --- docs/src/pages/demos/tooltips/VariableWidth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/demos/tooltips/VariableWidth.js b/docs/src/pages/demos/tooltips/VariableWidth.js index e45e2bd493d980..d566c2b0db3ef8 100644 --- a/docs/src/pages/demos/tooltips/VariableWidth.js +++ b/docs/src/pages/demos/tooltips/VariableWidth.js @@ -12,7 +12,7 @@ const styles = theme => ({ maxWidth: 500, }, noMaxWidth: { - maxWidth: 'inherit', + maxWidth: 'none', }, }); From 649806444b726ab3b7662dbc91cd24989cbad846 Mon Sep 17 00:00:00 2001 From: Simo Moujami Date: Mon, 30 Jul 2018 15:38:45 -0400 Subject: [PATCH 3/3] Explicitly show the default width in the demo. --- docs/src/pages/demos/tooltips/VariableWidth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/demos/tooltips/VariableWidth.js b/docs/src/pages/demos/tooltips/VariableWidth.js index d566c2b0db3ef8..f8fb7d30de8cde 100644 --- a/docs/src/pages/demos/tooltips/VariableWidth.js +++ b/docs/src/pages/demos/tooltips/VariableWidth.js @@ -26,7 +26,7 @@ function VariableWidth({ classes }) { return (
- +