From d1aea78753f8d6042d06c76c8b1e4551185be9a1 Mon Sep 17 00:00:00 2001
From: nicmosc <nmoscholios@gmail.com>
Date: Wed, 2 Oct 2019 17:18:55 +0200
Subject: [PATCH 1/4] deprecated message in favor of content

---
 .../react-drylus/src/components/Popover.jsx   | 14 +++++++++++--
 .../react-drylus/src/components/Tooltip.jsx   | 21 ++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/react-drylus/src/components/Popover.jsx b/packages/react-drylus/src/components/Popover.jsx
index 9172a0be0..352b2f168 100644
--- a/packages/react-drylus/src/components/Popover.jsx
+++ b/packages/react-drylus/src/components/Popover.jsx
@@ -97,6 +97,7 @@ export const PopoverSides = new Enum(
 const Popover = ({
   children,
   message,
+  content: _content,
   side,
   style,
   exitOnClick,
@@ -108,6 +109,12 @@ const Popover = ({
   const { rect, setRect } = useRect();
   const popoverRect = popoverRef.current?.getBoundingClientRect();
 
+  if (message != null) {
+    console.warn('Deprecation warning: `message` has been replaced by `content`. It will be removed in the next major version');
+  }
+
+  const content = _content != null ? _content : message;
+
   useEffect(() => {
     if ( ! document.getElementById('popovers-outlet')) {
       const popoversOutlet = document.createElement('div');
@@ -192,7 +199,7 @@ const Popover = ({
               [styles.visible]: visible,
             })}
             style={{ ...popoverStyle, ...style }}>
-            {message}
+            {content}
           </div>
         </div>,
         document.getElementById('popovers-outlet'),
@@ -203,8 +210,11 @@ const Popover = ({
 
 
 Popover.propTypes = {
+  /** DEPRECATED */
+  message: PropTypes.node,
+
   /** Content shown when the Popover is visible */
-  message: PropTypes.node.isRequired,
+  content: PropTypes.node,
 
   /** Component wrapped by the Popover */
   children: PropTypes.node.isRequired,
diff --git a/packages/react-drylus/src/components/Tooltip.jsx b/packages/react-drylus/src/components/Tooltip.jsx
index 5d365c610..e14a78b3d 100644
--- a/packages/react-drylus/src/components/Tooltip.jsx
+++ b/packages/react-drylus/src/components/Tooltip.jsx
@@ -92,7 +92,13 @@ export const TooltipSides = new Enum(
 );
 
 
-const Tooltip = ({ children, message, side, style }) => {
+const Tooltip = ({
+  children,
+  message,
+  content: _content,
+  side,
+  style,
+}) => {
   const [ visible, setVisible ] = useState(false);
   const [ outletElement, setOutletElement ] = useState(null);
   const childrenRef = useRef();
@@ -100,6 +106,12 @@ const Tooltip = ({ children, message, side, style }) => {
   const { rect, setRect } = useRect();
   const tooltipRect = tooltipRef.current?.getBoundingClientRect();
 
+  if (message != null) {
+    console.warn('Deprecation warning: `message` has been replaced by `content`. It will be removed in the next major version');
+  }
+
+  const content = _content != null ? _content : message;
+
   useEffect(() => {
     if ( ! document.getElementById('tooltips-outlet')) {
       const tooltipsOutlet = document.createElement('div');
@@ -181,7 +193,7 @@ const Tooltip = ({ children, message, side, style }) => {
               [styles.visible]: visible,
             })}
             style={{ ...tooltipStyle, ...style }}>
-            {message}
+            {content}
           </div>
         </div>,
         document.getElementById('tooltips-outlet'),
@@ -192,8 +204,11 @@ const Tooltip = ({ children, message, side, style }) => {
 
 
 Tooltip.propTypes = {
+  /** DEPRECATED */
+  message: PropTypes.node,
+
   /** Content shown when the tooltip is visible */
-  message: PropTypes.node.isRequired,
+  content: PropTypes.node,
 
   /** Component wrapped by the tooltip */
   children: PropTypes.node.isRequired,

From 7e389e17e047e9075596a0f6d7291c69902c34c6 Mon Sep 17 00:00:00 2001
From: nicmosc <nmoscholios@gmail.com>
Date: Wed, 2 Oct 2019 17:30:08 +0200
Subject: [PATCH 2/4] replace old api in styleguide

---
 packages/react-drylus/src/components/Avatar.jsx             | 2 +-
 packages/react-drylus/src/components/Map.jsx                | 2 +-
 .../styleguide/app/components/Playground/PropsTable.jsx     | 2 +-
 packages/styleguide/app/components/Sidebar.jsx              | 6 +++---
 .../styleguide/app/pages/component-kit/brand/colors.mdx     | 2 +-
 .../app/pages/component-kit/components/popover.mdx          | 4 ++--
 .../app/pages/component-kit/components/tooltip.mdx          | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react-drylus/src/components/Avatar.jsx b/packages/react-drylus/src/components/Avatar.jsx
index ff507ce87..7d24efd8b 100644
--- a/packages/react-drylus/src/components/Avatar.jsx
+++ b/packages/react-drylus/src/components/Avatar.jsx
@@ -100,7 +100,7 @@ const Avatar = ({
   );
   if (hint) {
     return (
-      <Tooltip message={hint}>
+      <Tooltip content={hint}>
         {avatar}
       </Tooltip>
     );
diff --git a/packages/react-drylus/src/components/Map.jsx b/packages/react-drylus/src/components/Map.jsx
index 2a0d3f04e..e58711419 100644
--- a/packages/react-drylus/src/components/Map.jsx
+++ b/packages/react-drylus/src/components/Map.jsx
@@ -135,7 +135,7 @@ const Map = ({
                 {do {
                   if (marker.title) {
                     <Popover
-                      message={
+                      content={
                         <PopoverContent
                           title={marker.title}
                           subtitle={marker.subtitle} />
diff --git a/packages/styleguide/app/components/Playground/PropsTable.jsx b/packages/styleguide/app/components/Playground/PropsTable.jsx
index 402b57f1a..eb91ba33b 100644
--- a/packages/styleguide/app/components/Playground/PropsTable.jsx
+++ b/packages/styleguide/app/components/Playground/PropsTable.jsx
@@ -58,7 +58,7 @@ const PropsTable = ({ component, onChange, activeProps, enums }) => {
               <TCell>
                 {do {
                   if (props[key].type.value) {
-                    <Tooltip message={<PropsInfo props={props[key].type.value} />} side={TooltipSides.RIGHT}>
+                    <Tooltip content={<PropsInfo props={props[key].type.value} />} side={TooltipSides.RIGHT}>
                       <Flex justify={FlexJustify.START}>
                         <FlexItem>
                           {props[key].type.name}
diff --git a/packages/styleguide/app/components/Sidebar.jsx b/packages/styleguide/app/components/Sidebar.jsx
index 47eafc44c..38441f151 100644
--- a/packages/styleguide/app/components/Sidebar.jsx
+++ b/packages/styleguide/app/components/Sidebar.jsx
@@ -117,7 +117,7 @@ const Sidebar = () => {
         <FlexItem>
           <Margin size={{ bottom: Sizes.SMALL }}>
             <Tooltip
-              message="Component kit"
+              content="Component kit"
               style={{ marginLeft: sv.marginSmall }}
               side={TooltipSides.RIGHT}>
               <Link to="/component-kit/introduction">
@@ -131,7 +131,7 @@ const Sidebar = () => {
         <FlexItem>
           <Margin size={{ bottom: Sizes.SMALL }}>
             <Tooltip
-              message="Coding guidelines"
+              content="Coding guidelines"
               style={{ marginLeft: sv.marginSmall }}
               side={TooltipSides.RIGHT}>
               <Link to="/coding-guidelines">
@@ -145,7 +145,7 @@ const Sidebar = () => {
         <FlexItem>
           <Margin size={{ bottom: Sizes.SMALL }}>
             <Tooltip
-              message="Design guidelines"
+              content="Design guidelines"
               style={{ marginLeft: sv.marginSmall }}
               side={TooltipSides.RIGHT}>
               <Link to="/design-guidelines">
diff --git a/packages/styleguide/app/pages/component-kit/brand/colors.mdx b/packages/styleguide/app/pages/component-kit/brand/colors.mdx
index 0073037a4..1bbdccde0 100644
--- a/packages/styleguide/app/pages/component-kit/brand/colors.mdx
+++ b/packages/styleguide/app/pages/component-kit/brand/colors.mdx
@@ -90,7 +90,7 @@ export const Palette = ({
     <div className={styles.palette}>
       <div className={styles.header} style={{ background }}>
         <div className={styles.title}>{title}</div>
-        <Tooltip message={description}>
+        <Tooltip content={description}>
           <Icon name="info" />
         </Tooltip>
       </div>
diff --git a/packages/styleguide/app/pages/component-kit/components/popover.mdx b/packages/styleguide/app/pages/component-kit/components/popover.mdx
index 33435b482..3e0f11283 100644
--- a/packages/styleguide/app/pages/component-kit/components/popover.mdx
+++ b/packages/styleguide/app/pages/component-kit/components/popover.mdx
@@ -28,14 +28,14 @@ __Example__
 <Flex>
   <FlexItem>
     <Margin size={{ right: Sizes.LARGE }}>
-      <Popover message="I am a popover">
+      <Popover content="I am a popover">
         <Button category={Categories.BRAND}>Click me</Button>
       </Popover>
     </Margin>
   </FlexItem>
   <FlexItem>
     <Popover
-      message={
+      content={
         <div style={{ textAlign: 'left' }}>
           <Margin size={{ bottom: Sizes.EXTRA_SMALL }}>
             <ListTile leading={<Icon name="alert-triangle" category={Categories.DANGER} />} title={<Text size={Sizes.SMALL}>I'm custom content</Text>} />
diff --git a/packages/styleguide/app/pages/component-kit/components/tooltip.mdx b/packages/styleguide/app/pages/component-kit/components/tooltip.mdx
index a36297781..438d83a1e 100644
--- a/packages/styleguide/app/pages/component-kit/components/tooltip.mdx
+++ b/packages/styleguide/app/pages/component-kit/components/tooltip.mdx
@@ -28,14 +28,14 @@ __Example__
 <Flex>
   <FlexItem>
     <Margin size={{ right: Sizes.LARGE }}>
-      <Tooltip message="I am a tooltip">
+      <Tooltip content="I am a tooltip">
         <Button category={Categories.BRAND}>Hover me</Button>
       </Tooltip>
     </Margin>
   </FlexItem>
   <FlexItem>
     <Tooltip
-      message={
+      content={
         <div style={{ textAlign: 'left' }}>
           <Margin size={{ bottom: Sizes.EXTRA_SMALL }}>
             <ListTile leading={<Icon name="alert-triangle" category={Categories.DANGER} />} title={<Text inversed size={Sizes.SMALL}>I'm custom content</Text>} />

From 2f45ed5de91964b2234db988fac0c5f0f95f9d1d Mon Sep 17 00:00:00 2001
From: nicmosc <nmoscholios@gmail.com>
Date: Wed, 2 Oct 2019 19:09:12 +0200
Subject: [PATCH 3/4] add mutuallyExclusive custom prop

---
 .../react-drylus/src/components/Tooltip.jsx    | 16 +++++++++-------
 packages/react-drylus/src/utils/index.js       | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/react-drylus/src/components/Tooltip.jsx b/packages/react-drylus/src/components/Tooltip.jsx
index e14a78b3d..00c38b8d1 100644
--- a/packages/react-drylus/src/components/Tooltip.jsx
+++ b/packages/react-drylus/src/components/Tooltip.jsx
@@ -7,7 +7,7 @@ import Enum from '@drawbotics/enums';
 
 import { styles as themeStyles } from '../base/ThemeProvider';
 import { useRect } from '../utils/hooks';
-import { getStyleForSide } from '../utils';
+import { getStyleForSide, CustomPropTypes } from '../utils';
 
 
 const styles = {
@@ -106,10 +106,6 @@ const Tooltip = ({
   const { rect, setRect } = useRect();
   const tooltipRect = tooltipRef.current?.getBoundingClientRect();
 
-  if (message != null) {
-    console.warn('Deprecation warning: `message` has been replaced by `content`. It will be removed in the next major version');
-  }
-
   const content = _content != null ? _content : message;
 
   useEffect(() => {
@@ -205,10 +201,16 @@ const Tooltip = ({
 
 Tooltip.propTypes = {
   /** DEPRECATED */
-  message: PropTypes.node,
+  message: CustomPropTypes.mutuallyExclusive('content', {
+    type: PropTypes.node,
+    deprecated: true,
+  }),
 
   /** Content shown when the tooltip is visible */
-  content: PropTypes.node,
+  content: CustomPropTypes.mutuallyExclusive('message', {
+    type: PropTypes.node,
+    required: true,
+  }),
 
   /** Component wrapped by the tooltip */
   children: PropTypes.node.isRequired,
diff --git a/packages/react-drylus/src/utils/index.js b/packages/react-drylus/src/utils/index.js
index 1a72a1298..0e40c5851 100644
--- a/packages/react-drylus/src/utils/index.js
+++ b/packages/react-drylus/src/utils/index.js
@@ -39,6 +39,24 @@ function _verifyOptions(props, propName, componentName) {
 
 
 export const CustomPropTypes = {
+  mutuallyExclusive: (mutuallyExclusiveProp, options) => {
+    return (props, propName, componentName) => {
+      if (props[propName] != null && options.deprecated) {
+        console.warn(`Deprecation warning: \`${propName}\` has been deprecated in favour of \`${mutuallyExclusiveProp}\`. It will be removed in the next major version (${componentName})`);
+      }
+      if (props[propName] != null && props[mutuallyExclusiveProp] != null) {
+        return new TypeError(`Prop \`${propName}\` cannot be used with \`${mutuallyExclusiveProp}\` (${componentName})`);
+      }
+
+      const propTypes = {
+        [propName]: options.required && props[mutuallyExclusiveProp] == null
+          ? options.type.isRequired
+          : options.type,
+      };
+
+      return PropTypes.checkPropTypes(propTypes, props, propName, componentName);
+    };
+  },
   options: (props, propName, componentName) => {
     return _verifyOptions(props, propName, componentName);
   },

From ba7cbe0ab05a8bfea12d26053d68bf5051be62b3 Mon Sep 17 00:00:00 2001
From: nicmosc <nmoscholios@gmail.com>
Date: Wed, 2 Oct 2019 19:29:47 +0200
Subject: [PATCH 4/4] add deprecated custom prop type

---
 .../react-drylus/src/components/Popover.jsx   | 20 ++++++++++---------
 packages/react-drylus/src/utils/index.js      |  9 +++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/react-drylus/src/components/Popover.jsx b/packages/react-drylus/src/components/Popover.jsx
index 352b2f168..d48150a9c 100644
--- a/packages/react-drylus/src/components/Popover.jsx
+++ b/packages/react-drylus/src/components/Popover.jsx
@@ -7,7 +7,7 @@ import Enum from '@drawbotics/enums';
 
 import { styles as themeStyles } from '../base/ThemeProvider';
 import { useRect } from '../utils/hooks';
-import { getStyleForSide } from '../utils';
+import { getStyleForSide, CustomPropTypes } from '../utils';
 
 
 const styles = {
@@ -109,10 +109,6 @@ const Popover = ({
   const { rect, setRect } = useRect();
   const popoverRect = popoverRef.current?.getBoundingClientRect();
 
-  if (message != null) {
-    console.warn('Deprecation warning: `message` has been replaced by `content`. It will be removed in the next major version');
-  }
-
   const content = _content != null ? _content : message;
 
   useEffect(() => {
@@ -211,10 +207,16 @@ const Popover = ({
 
 Popover.propTypes = {
   /** DEPRECATED */
-  message: PropTypes.node,
-
-  /** Content shown when the Popover is visible */
-  content: PropTypes.node,
+  message: CustomPropTypes.mutuallyExclusive('content', {
+    type: PropTypes.node,
+    deprecated: true,
+  }),
+
+  /** Content shown when the tooltip is visible */
+  content: CustomPropTypes.mutuallyExclusive('message', {
+    type: PropTypes.node,
+    required: true,
+  }),
 
   /** Component wrapped by the Popover */
   children: PropTypes.node.isRequired,
diff --git a/packages/react-drylus/src/utils/index.js b/packages/react-drylus/src/utils/index.js
index 0e40c5851..90978aafa 100644
--- a/packages/react-drylus/src/utils/index.js
+++ b/packages/react-drylus/src/utils/index.js
@@ -39,6 +39,15 @@ function _verifyOptions(props, propName, componentName) {
 
 
 export const CustomPropTypes = {
+  deprecated: (type) => {
+    return (props, propName, componentName) => {
+      if (props[propName]) {
+        console.warn(`Deprecation warning: \`${propName}\` has been deprecated. It will be removed in the next major version (${componentName})`); 
+      }
+
+      return PropTypes.checkPropTypes({ [propName]: type }, props, propName, componentName);
+    };
+  },
   mutuallyExclusive: (mutuallyExclusiveProp, options) => {
     return (props, propName, componentName) => {
       if (props[propName] != null && options.deprecated) {