@scm-manager/ui-components 2.30.2-20220110-094329 → 2.30.2-20220116-101546

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.30.2-20220110-094329",
+  "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-20220110-094329",
+    "@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-20220110-094329",
-    "@scm-manager/ui-extensions": "^2.30.2-20220110-094329",
-    "@scm-manager/ui-types": "^2.30.2-20220110-094329",
+    "@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

@@ -27,7 +27,7 @@ import classNames from "classnames";
 
 // See for css reference: https://github.com/Wikiki/bulma-tooltip/blob/master/src/sass/index.sass
 
-const TooltipWrapper = styled.span`
+const TooltipWrapper = styled.div`
   position: relative;
   display: inline-block;
 `;
@@ -177,13 +177,13 @@ const Tooltip: FC<Props> = ({ className, message, location = "right", multiline,
           <LocationArrow className={`tooltip-arrow-${location}-border-color`} />
           <LocationContainer
             className={classNames(
-              className,
               "is-size-7",
               "is-family-primary",
               "has-rounded-border",
               "has-text-white",
               "has-background-grey-dark",
-              "has-text-weight-semibold"
+              "has-text-weight-semibold",
+              className
             )}
             multiline={multiline}
             aria-live="polite"