add default tooltip and arrow styles to package

mohsinulhaq · Jul 12, 2020 · ff969f6 · ff969f6
1 parent 202a414
commit ff969f6
Show file tree

Hide file tree

Showing 5 changed files with 392 additions and 359 deletions.
diff --git a/README.md b/README.md
@@ -82,6 +82,70 @@ render(
 
 Read more about [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern if you're not familiar with this approach.
 
+## Quick start
+
+If you would like our opinionated container and arrow styles for your tooltip for quick start, you may import `react-popper-tooltip/dist/styles.css`, and use the classes `tooltip-container` and `tooltip-arrow` as follows:
+
+### Tooltip.js
+
+```jsx
+import React from 'react';
+import TooltipTrigger from 'react-popper-tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+
+const Tooltip = ({children, tooltip, hideArrow, ...props}) => (
+  <TooltipTrigger
+    {...props}
+    tooltip={({
+      arrowRef,
+      tooltipRef,
+      getArrowProps,
+      getTooltipProps,
+      placement
+    }) => (
+      <div
+        {...getTooltipProps({
+          ref: tooltipRef,
+          className: 'tooltip-container'
+        })}
+      >
+        {!hideArrow && (
+          <div
+            {...getArrowProps({
+              ref: arrowRef,
+              className: 'tooltip-arrow',
+              'data-placement': placement
+            })}
+          />
+        )}
+        {tooltip}
+      </div>
+    )}
+  >
+    {({getTriggerProps, triggerRef}) => (
+      <span
+        {...getTriggerProps({
+          ref: triggerRef,
+          className: 'trigger'
+        })}
+      >
+        {children}
+      </span>
+    )}
+  </TooltipTrigger>
+);
+
+export default Tooltip;
+```
+
+Then you can use it as shown in the example below.
+
+```jsx
+<Tooltip placement="top" trigger="click" tooltip="Hi there!">
+  Click me
+</Tooltip>
+```
+
 ## Examples
 
 To fiddle with our example recipes, run:

diff --git a/docs/examples/BasicTooltipTrigger.tsx b/docs/examples/BasicTooltipTrigger.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import TooltipTrigger from '../../src';
 import { ChildrenArg, TooltipArg } from '../../src';
 import { BasicTooltipTriggerProps } from './types';
-import styles from './styles.module.css';
+import '../../src/styles.css';
 
 const modifiers = [
   {
@@ -36,14 +36,14 @@ const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
 }: TooltipArg) => (
   <div
     {...getTooltipProps({
-      className: styles.tooltipContainer,
+      className: 'tooltip-container',
       ref: tooltipRef,
     })}
   >
     {!hideArrow && (
       <div
         {...getArrowProps({
-          className: styles.tooltipArrow,
+          className: 'tooltip-arrow',
           'data-placement': placement,
           ref: arrowRef,
         })}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "React tooltip library built around react-popper",
   "homepage": "https://react-popper-tooltip.netlify.app",
   "repository": {
@@ -9,13 +9,16 @@
   },
   "main": "dist/cjs/react-popper-tooltip.js",
   "module": "dist/esm/react-popper-tooltip.js",
+  "style": "dist/styles.css",
   "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/styles.css"
+  ],
   "scripts": {
-    "build": "rm -rf dist && rollup -c && yarn tsc && rm -rf compiled",
+    "build": "rm -rf dist && rollup -c && cp src/styles.css dist && yarn tsc && rm -rf compiled",
     "prepublishOnly": "yarn typecheck && yarn lint && yarn build && yarn test",
     "prettier": "prettier --write src/**/*.{ts,tsx}",
     "docs": "docz dev",
@@ -62,14 +65,14 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
-    "@testing-library/react": "^10.4.3",
-    "@types/jest": "^26.0.3",
-    "@types/react": "^16.9.41",
+    "@testing-library/react": "^10.4.5",
+    "@types/jest": "^26.0.4",
+    "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^3.5.0",
-    "@typescript-eslint/parser": "^3.5.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "docz": "^2.3.1",
-    "eslint": "^7.3.1",
+    "eslint": "^7.4.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
@@ -79,7 +82,7 @@
     "prettier": "^2.0.5",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rollup": "^2.18.2",
+    "rollup": "^2.21.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.12.0",

diff --git a/docs/examples/styles.module.css → src/styles.css b/docs/examples/styles.module.css → src/styles.css
@@ -1,4 +1,4 @@
-.tooltipContainer {
+.tooltip-container {
   background-color: white;
   border-radius: 3px;
   border: 1px solid silver;
@@ -10,13 +10,13 @@
   z-index: 9999;
 }
 
-.tooltipArrow {
+.tooltip-arrow {
   height: 1rem;
   position: absolute;
   width: 1rem;
 }
 
-.tooltipArrow::before {
+.tooltip-arrow::before {
   border-style: solid;
   content: '';
   display: block;
@@ -25,7 +25,7 @@
   width: 0;
 }
 
-.tooltipArrow::after {
+.tooltip-arrow::after {
   border-style: solid;
   content: '';
   display: block;
@@ -35,78 +35,78 @@
   width: 0;
 }
 
-.tooltipArrow[data-placement*='bottom'] {
+.tooltip-arrow[data-placement*='bottom'] {
   height: 1rem;
   left: 0;
   margin-top: -0.4rem;
   top: 0;
   width: 1rem;
 }
 
-.tooltipArrow[data-placement*='bottom']::before {
+.tooltip-arrow[data-placement*='bottom']::before {
   border-color: transparent transparent silver transparent;
   border-width: 0 0.5rem 0.4rem 0.5rem;
   position: absolute;
   top: -1px;
 }
 
-.tooltipArrow[data-placement*='bottom']::after {
+.tooltip-arrow[data-placement*='bottom']::after {
   border-color: transparent transparent white transparent;
   border-width: 0 0.5rem 0.4rem 0.5rem;
 }
 
-.tooltipArrow[data-placement*='top'] {
+.tooltip-arrow[data-placement*='top'] {
   bottom: 0;
   height: 1rem;
   left: 0;
   margin-bottom: -1rem;
   width: 1rem;
 }
 
-.tooltipArrow[data-placement*='top']::before {
+.tooltip-arrow[data-placement*='top']::before {
   border-color: silver transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0 0.5rem;
   position: absolute;
   top: 1px;
 }
 
-.tooltipArrow[data-placement*='top']::after {
+.tooltip-arrow[data-placement*='top']::after {
   border-color: white transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0 0.5rem;
 }
 
-.tooltipArrow[data-placement*='right'] {
+.tooltip-arrow[data-placement*='right'] {
   height: 1rem;
   left: 0;
   margin-left: -0.7rem;
   width: 1rem;
 }
 
-.tooltipArrow[data-placement*='right']::before {
+.tooltip-arrow[data-placement*='right']::before {
   border-color: transparent silver transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
-.tooltipArrow[data-placement*='right']::after {
+.tooltip-arrow[data-placement*='right']::after {
   border-color: transparent white transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
   left: 6px;
   top: 0;
 }
 
-.tooltipArrow[data-placement*='left'] {
+.tooltip-arrow[data-placement*='left'] {
   height: 1rem;
   margin-right: -0.7rem;
   right: 0;
   width: 1rem;
 }
 
-.tooltipArrow[data-placement*='left']::before {
+.tooltip-arrow[data-placement*='left']::before {
   border-color: transparent transparent transparent silver;
   border-width: 0.5rem 0 0.5rem 0.4em;
 }
 
-.tooltipArrow[data-placement*='left']::after {
+.tooltip-arrow[data-placement*='left']::after {
   border-color: transparent transparent transparent white;
   border-width: 0.5rem 0 0.5rem 0.4em;
   left: 3px;