Added an option to add a tooltip to a Select item

gsoft-inc · Nov 20, 2020 · 0cffa01 · 0cffa01
1 parent be552cc
commit 0cffa01
Show file tree

Hide file tree

Showing 4 changed files with 7,819 additions and 5 deletions.
diff --git 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 = (
         <SemanticDropdown.Item
             {...rest}
             className={mergeClasses(
@@ -96,6 +115,8 @@ export function SelectItem(props) {
             {content}
         </SemanticDropdown.Item>
     );
+
+    return !isNil(tooltip) ? <Tooltip content={tooltip} trigger={item} position={tooltipPosition} /> : 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
@@ -103,6 +103,26 @@ A select item can have a description.
     </Story>
 </Preview>
 
+### Tooltip
+
+A slect item can have a tooltip.
+
+<Preview>
+    <Story name="tooltip">
+        <Select
+            placeholder="Astronaut"
+            options={[
+                selectItem("David Saint-Jacques", "David Saint-Jacques", { tooltip: "Thank you!", tooltipPosition: "left center" }),
+                selectItem("Chris Hadfield", "Chris Hadfield", { description: "Commander of the ISS" }),
+                JEREMY_HANSEN_ITEM,
+                JENNI_SIDEY_ITEM,
+                ROBERT_THIRKS_ITEM,
+                selectItem("Julie Payette", "Julie Payette", { description: "29th GGC", tooltip: "The second Canadian woman to have flown in space." })
+            ]}
+        />
+    </Story>
+</Preview>
+
 ### Avatar
 
 A select item can have an avatar.

diff --git a/packages/react-components/src/select/tests/chromatic/createTestSuite.jsx b/packages/react-components/src/select/tests/chromatic/createTestSuite.jsx
@@ -227,5 +227,4 @@ export function createTestSuite(select, stories) {
                 </div>
             </div>
         );
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -227,5 +227,4 @@ export function createTestSuite(select, stories) { @@
                     </div>
                 </div>
             );
     }