From 0cffa0138fea6d4be169e40e824f163a38b63f32 Mon Sep 17 00:00:00 2001 From: patricklafrance Date: Fri, 20 Nov 2020 17:39:28 -0500 Subject: [PATCH] Added an option to add a tooltip to a Select item --- .../src/select/src/SelectItem.jsx | 29 +- .../src/select/stories/SelectItem.stories.mdx | 20 + .../tests/chromatic/createTestSuite.jsx | 1 - storybook/build-storybook.log | 7774 +++++++++++++++++ 4 files changed, 7819 insertions(+), 5 deletions(-) create mode 100644 storybook/build-storybook.log diff --git a/packages/react-components/src/select/src/SelectItem.jsx b/packages/react-components/src/select/src/SelectItem.jsx index d667580c5..79a0377be 100644 --- a/packages/react-components/src/select/src/SelectItem.jsx +++ b/packages/react-components/src/select/src/SelectItem.jsx @@ -1,5 +1,6 @@ import { SelectContext } from "./SelectContext"; import { Dropdown as SemanticDropdown } from "semantic-ui-react"; +import { Tooltip } from "../../tooltip"; import { arrayOf, element, oneOf, oneOfType, shape, string } from "prop-types"; import { isNil } from "lodash"; import { mergeClasses, throwWhenUnsupportedPropIsProvided } from "../../shared"; @@ -38,11 +39,29 @@ const propTypes = { /** * Icons can appear on the left or right of the item content. */ - iconsPosition: oneOf(["left", "right"]) + iconsPosition: oneOf(["left", "right"]), + /** + * Content rendered as tooltip when the item is hovered. + */ + tooltip: string, + /** + * Position of the tooltip. + */ + tooltipPosition: oneOf([ + "top center", + "top left", + "top right", + "bottom center", + "bottom left", + "bottom right", + "right center", + "left center" + ]) }; const defaultProps = { - iconsPosition: "left" + iconsPosition: "left", + tooltipPosition: "top center" }; function throwWhenMutuallyExclusivePropsAreProvided({ icons, iconsPosition, avatar }) { @@ -52,7 +71,7 @@ function throwWhenMutuallyExclusivePropsAreProvided({ icons, iconsPosition, avat } export function SelectItem(props) { - const { text, icons, iconsPosition, avatar, description, className, ...rest } = props; + const { text, icons, iconsPosition, avatar, description, tooltip, tooltipPosition, className, ...rest } = props; const { size } = useContext(SelectContext); throwWhenUnsupportedPropIsProvided(props, UNSUPPORTED_PROPS, "@orbit-ui/react-components/SelectItem"); @@ -83,7 +102,7 @@ export function SelectItem(props) { ); - return ( + const item = ( ); + + return !isNil(tooltip) ? : item; } SelectItem.propTypes = propTypes; diff --git a/packages/react-components/src/select/stories/SelectItem.stories.mdx b/packages/react-components/src/select/stories/SelectItem.stories.mdx index bff26c45e..9014984e1 100644 --- a/packages/react-components/src/select/stories/SelectItem.stories.mdx +++ b/packages/react-components/src/select/stories/SelectItem.stories.mdx @@ -103,6 +103,26 @@ A select item can have a description. +### Tooltip + +A slect item can have a tooltip. + + + +