deprecate message in favour of content

packages/react-drylus/src/components/Avatar.jsx

@@ -100,7 +100,7 @@ const Avatar = ({
   );
   if (hint) {
     return (
-      <Tooltip message={hint}>
+      <Tooltip content={hint}>
         {avatar}
       </Tooltip>
     );

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} />

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 = {
@@ -97,6 +97,7 @@ export const PopoverSides = new Enum(
 const Popover = ({
   children,
   message,
+  content: _content,
   side,
   style,
   exitOnClick,
@@ -108,6 +109,8 @@ const Popover = ({
   const { rect, setRect } = useRect();
   const popoverRect = popoverRef.current?.getBoundingClientRect();
 
+  const content = _content != null ? _content : message;
+
   useEffect(() => {
     if ( ! document.getElementById('popovers-outlet')) {
       const popoversOutlet = document.createElement('div');
@@ -192,7 +195,7 @@ const Popover = ({
               [styles.visible]: visible,
             })}
             style={{ ...popoverStyle, ...style }}>
-            {message}
+            {content}
           </div>
         </div>,
         document.getElementById('popovers-outlet'),
@@ -203,8 +206,17 @@ const Popover = ({
 
 
 Popover.propTypes = {
-  /** Content shown when the Popover is visible */
-  message: PropTypes.node.isRequired,
+  /** DEPRECATED */
+  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,

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 = {
@@ -92,14 +92,22 @@ 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();
   const tooltipRef = useRef();
   const { rect, setRect } = useRect();
   const tooltipRect = tooltipRef.current?.getBoundingClientRect();
 
+  const content = _content != null ? _content : message;
+
   useEffect(() => {
     if ( ! document.getElementById('tooltips-outlet')) {
       const tooltipsOutlet = document.createElement('div');
@@ -181,7 +189,7 @@ const Tooltip = ({ children, message, side, style }) => {
               [styles.visible]: visible,
             })}
             style={{ ...tooltipStyle, ...style }}>
-            {message}
+            {content}
           </div>
         </div>,
         document.getElementById('tooltips-outlet'),
@@ -192,8 +200,17 @@ const Tooltip = ({ children, message, side, style }) => {
 
 
 Tooltip.propTypes = {
+  /** DEPRECATED */
+  message: CustomPropTypes.mutuallyExclusive('content', {
+    type: PropTypes.node,
+    deprecated: true,
+  }),
+
   /** Content shown when the tooltip is visible */
-  message: PropTypes.node.isRequired,
+  content: CustomPropTypes.mutuallyExclusive('message', {
+    type: PropTypes.node,
+    required: true,
+  }),
 
   /** Component wrapped by the tooltip */
   children: PropTypes.node.isRequired,

packages/react-drylus/src/utils/index.js

@@ -39,6 +39,33 @@ 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) {
+        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);
   },

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}

packages/styleguide/app/components/Sidebar.jsx

@@ -69,7 +69,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">
@@ -83,7 +83,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">
@@ -97,7 +97,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">

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>

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>} />

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>} />