use unstyled prop

airbnb · Apr 28, 2020 · 657a902 · 657a902
1 parent 8ce90ed
commit 657a902
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 22 deletions.
diff --git a/packages/vx-tooltip/Readme.md b/packages/vx-tooltip/Readme.md
@@ -46,14 +46,14 @@ You may override the container by specifying `containerProps` as the second argu
 
 This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):
 
-| Name              | Type             | Default | Description                                                                   |
-| :-----------------| :--------------- | :------ | :---------------------------------------------------------------------------- |
-| left              | number or string | --      | Sets style.left of the tooltip container                                      |
-| top               | number or string | --      | Sets style.top of the tooltip container                                       |
-| className         | string           | --      | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container    |
-| style             | object           | --      | Sets / overrides any styles on the tooltip container (including top and left) |
-| children          | node             | --      | Sets the children of the tooltip, i.e., the actual content                    |
-| withDefaultStyles | bool             | true    | Whether the tooltip should have default styles or not                         |
+| Name      | Type             | Default | Description                                                                   |
+| :---------| :--------------- | :------ | :---------------------------------------------------------------------------- |
+| left      | number or string | --      | Sets style.left of the tooltip container                                      |
+| top       | number or string | --      | Sets style.top of the tooltip container                                       |
+| className | string           | --      | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container    |
+| style     | object           | --      | Sets / overrides any styles on the tooltip container (including top and left) |
+| children  | node             | --      | Sets the children of the tooltip, i.e., the actual content                    |
+| unstyled  | bool             | true    | Whether the tooltip should have default styles or not                         |
 
 #### TooltipWithBounds
 

diff --git a/packages/vx-tooltip/src/index.ts b/packages/vx-tooltip/src/index.ts
@@ -1,4 +1,4 @@
 export { default as withTooltip } from './enhancers/withTooltip';
 export { default as useTooltip } from './hooks/useTooltip';
-export { default as Tooltip, defaultStyles as tooltipDefaultStyles } from './tooltips/Tooltip';
+export { default as Tooltip, defaultStyles } from './tooltips/Tooltip';
 export { default as TooltipWithBounds } from './tooltips/TooltipWithBounds';
diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.tsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx
@@ -7,7 +7,7 @@ export type TooltipProps = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
-  withDefaultStyles?: boolean;
+  unstyled?: boolean;
 };
 
 export const defaultStyles: React.CSSProperties = {
@@ -26,20 +26,15 @@ export default function Tooltip({
   className,
   top,
   left,
-  style,
+  style = defaultStyles,
   children,
-  withDefaultStyles = true,
+  unstyled = false,
   ...restProps
 }: TooltipProps & JSX.IntrinsicElements['div']) {
   return (
     <div
       className={cx('vx-tooltip-portal', className)}
-      style={{
-        ...(withDefaultStyles && defaultStyles),
-        top,
-        left,
-        ...style,
-      }}
+      style={{ top, left, ...(!unstyled && style) }}
       {...restProps}
     >
       {children}

diff --git a/packages/vx-tooltip/test/Tooltip.test.tsx b/packages/vx-tooltip/test/Tooltip.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Tooltip, tooltipDefaultStyles } from '../src';
+import { Tooltip, defaultStyles } from '../src';
 
 describe('<Tooltip />', () => {
   test('it should be defined', () => {
@@ -10,15 +10,15 @@ describe('<Tooltip />', () => {
   it('should render with the correct default styles', () => {
     const wrapper = shallow(<Tooltip>Hello</Tooltip>);
     const styles = wrapper.props().style;
-    Object.entries(tooltipDefaultStyles).forEach(([key, value]) => {
+    Object.entries(defaultStyles).forEach(([key, value]) => {
       expect(styles[key]).toBe(value);
     });
   });
 
   it('should render with no default styles', () => {
-    const wrapper = shallow(<Tooltip withDefaultStyles={false}>Hello</Tooltip>);
+    const wrapper = shallow(<Tooltip unstyled={true}>Hello</Tooltip>);
     const styles = wrapper.props().style;
-    Object.keys(tooltipDefaultStyles).forEach(key => {
+    Object.keys(defaultStyles).forEach(key => {
       expect(styles[key]).toBe(undefined);
     });
   });