@scm-manager/ui-components 2.30.2-20220115-150339 → 2.30.2-20220116-101546

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.30.2-20220115-150339",
+  "version": "2.30.2-20220116-101546",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.30.2-20220115-150339",
+    "@scm-manager/ui-tests": "^2.30.2-20220116-101546",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.30.2-20220115-150339",
-    "@scm-manager/ui-extensions": "^2.30.2-20220115-150339",
-    "@scm-manager/ui-types": "^2.30.2-20220115-150339",
+    "@scm-manager/ui-api": "^2.30.2-20220116-101546",
+    "@scm-manager/ui-extensions": "^2.30.2-20220116-101546",
+    "@scm-manager/ui-types": "^2.30.2-20220116-101546",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Help.tsx

@@ -40,16 +40,17 @@ const AbsolutePositionTooltip = styled(Tooltip)`
 
 const Help: FC<Props> = ({ message, multiline, className, id }) => (
   <AbsolutePositionTooltip
-    className={classNames("is-inline-block", "pl-1", multiline ? "has-tooltip-multiline" : undefined, className)}
+    className={classNames("is-inline-block", "pl-1", className)}
     message={message}
     id={id}
+    multiline={multiline}
   >
     <HelpIcon />
   </AbsolutePositionTooltip>
 );
 
 Help.defaultProps = {
-  multiline: true,
+  multiline: true
 };
 
 export default Help;

package/src/Tooltip.stories.tsx

@@ -94,4 +94,15 @@ storiesOf("Tooltip", module)
         </Spacing>
       ))}
     </Wrapper>
+  ))
+  .add("Styled", () => (
+    <Wrapper>
+      {positions.map((position) => (
+        <Spacing>
+          <Tooltip message={message} location={position} className={"has-text-warning"}>
+            <Button label={position} color="info" />{" "}
+          </Tooltip>
+        </Spacing>
+      ))}
+    </Wrapper>
   ));

package/src/Tooltip.tsx

@@ -21,12 +21,128 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
+import styled from "styled-components";
+import classNames from "classnames";
+
+// See for css reference: https://github.com/Wikiki/bulma-tooltip/blob/master/src/sass/index.sass
+
+const TooltipWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const ArrowBase = styled.span`
+  z-index: 1020;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+`;
+
+const ArrowTop = styled(ArrowBase)`
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  margin-top: -5px;
+  margin-right: auto;
+  margin-bottom: auto;
+  margin-left: -5px;
+  border-width: 5px 5px 0 5px;
+`;
+
+const ArrowRight = styled(ArrowBase)`
+  top: auto;
+  right: 0;
+  bottom: 50%;
+  left: auto;
+  margin-top: auto;
+  margin-right: -5px;
+  margin-bottom: -5px;
+  margin-left: auto;
+  border-width: 5px 5px 5px 0;
+`;
+
+const ArrowLeft = styled(ArrowBase)`
+  top: auto;
+  right: auto;
+  bottom: 50%;
+  left: 0;
+  margin-top: auto;
+  margin-right: auto;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  border-width: 5px 0 5px 5px;
+`;
+
+const ArrowBottom = styled(ArrowBase)`
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 50%;
+  margin-top: auto;
+  margin-right: auto;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  border-width: 0 5px 5px 5px;
+`;
+
+const Arrow = {
+  bottom: ArrowBottom,
+  left: ArrowLeft,
+  right: ArrowRight,
+  top: ArrowTop
+};
+
+const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
+  z-index: 1020;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  overflow: hidden;
+  hyphens: auto;
+  text-overflow: ${({ multiline }) => (multiline ? "clip" : "ellipsis")};
+  white-space: ${({ multiline }) => (multiline ? "normal" : "pre")};
+  max-width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
+  width: ${({ multiline }) => (multiline ? "15rem" : "auto")};
+  word-break: ${({ multiline }) => (multiline ? "keep-all" : "unset")};
+`;
+
+const TooltipContainerTop = styled(TooltipContainerBase)`
+  left: 50%;
+  bottom: calc(100% + 5px);
+  transform: translateX(-50%);
+`;
+
+const TooltipContainerBottom = styled(TooltipContainerBase)`
+  left: 50%;
+  top: calc(100% + 5px);
+  transform: translateX(-50%);
+`;
+
+const TooltipContainerLeft = styled(TooltipContainerBase)`
+  right: calc(100% + 5px);
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const TooltipContainerRight = styled(TooltipContainerBase)`
+  left: calc(100% + 5px);
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const Container = {
+  bottom: TooltipContainerBottom,
+  left: TooltipContainerLeft,
+  right: TooltipContainerRight,
+  top: TooltipContainerTop
+};
 
 type Props = {
   message: string;
   className?: string;
-  location: TooltipLocation;
+  location?: TooltipLocation;
   multiline?: boolean;
   children: ReactNode;
   id?: string;
@@ -34,27 +150,53 @@ type Props = {
 
 export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
-class Tooltip extends React.Component<Props> {
-  static defaultProps = {
-    location: "right"
-  };
-
-  render() {
-    const { className, message, location, multiline, children, id } = this.props;
-    let classes = `tooltip has-tooltip-${location}`;
-    if (multiline) {
-      classes += " has-tooltip-multiline";
-    }
-    if (className) {
-      classes += " " + className;
-    }
-
-    return (
-      <span className={classes} data-tooltip={message} aria-label={message} id={id}>
-        {children}
-      </span>
-    );
-  }
-}
+const Tooltip: FC<Props> = ({ className, message, location = "right", multiline, children, id }) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const listener = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, []);
+
+  const LocationContainer = Container[location];
+  const LocationArrow = Arrow[location];
+
+  return (
+    <TooltipWrapper
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onClick={() => setOpen(false)}
+    >
+      {open ? (
+        <>
+          <LocationArrow className={`tooltip-arrow-${location}-border-color`} />
+          <LocationContainer
+            className={classNames(
+              "is-size-7",
+              "is-family-primary",
+              "has-rounded-border",
+              "has-text-white",
+              "has-background-grey-dark",
+              "has-text-weight-semibold",
+              className
+            )}
+            multiline={multiline}
+            aria-live="polite"
+            id={id}
+            role="tooltip"
+          >
+            {message}
+          </LocationContainer>
+        </>
+      ) : null}
+      {children}
+    </TooltipWrapper>
+  );
+};
 
 export default Tooltip;