Fixes #141 - Remove grid style from EasyDropdown toggle, improve logi…

…c around wrapping children in a Button, add flex style for Button body string when Button.Addon is present
cision · Feb 3, 2020 · 205fdeb · 205fdeb
1 parent 41f9d42
commit 205fdeb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@cision/rover-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "publishConfig": {
-    "tag": "v1.2.1"
+    "tag": "v1.2.3"
   },
   "description": "UI Component Library",
   "author": "Matthew Wells (https://github.com/mdespuits)",

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -111,7 +111,7 @@ const Button = props => {
       }
 
       if (typeof child === 'string') {
-        return <span>{child}</span>;
+        return <span className={styles.buttonBody}>{child}</span>;
       }
 
       return child;

diff --git a/src/components/Button/style.css b/src/components/Button/style.css
@@ -19,6 +19,11 @@
   cursor: default;
 }
 
+.buttonBody {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 /* Sizes */
 
 .sm {
@@ -281,8 +286,6 @@
   border-color: var(--rvr-btn-border-color-text-disabled);
 }
 
-/* Hollow */
-
 .hollow,
 .hollow:link,
 .hollow:visited {

diff --git a/src/components/EasyDropdown/index.js b/src/components/EasyDropdown/index.js
@@ -53,21 +53,28 @@ const EasyDropdown = ({
   );
 
   const children = useMemo(() => {
-    return typeof initChildren === 'string' ? (
-      <Button
-        className={classNames(toggleProps.className, style.toggle)}
-        data-is-open={isOpen}
-        onClick={onToggle}
-      >
+    const childrenArray = React.Children.toArray(initChildren);
+    const hasStringChildren = childrenArray.reduce(
+      (result, child) => result || typeof child === 'string',
+      false
+    );
+
+    /*
+      If any children are raw strings, wrap all the children in a <Button />
+      Otherwise, assume there's a custom toggle component, and clone it with
+      added props for behavior.
+    */
+    return hasStringChildren ? (
+      <Button {...toggleProps} data-is-open={isOpen} onClick={onToggle}>
         {initChildren}
       </Button>
     ) : (
       React.Children.map(initChildren, child =>
         React.cloneElement(child, {
+          ...toggleProps,
           className: classNames(
             child && child.props && child.props.className,
-            toggleProps.className,
-            style.toggle
+            toggleProps.className
           ),
           'data-is-open': isOpen,
           onClick: event => {
@@ -155,7 +162,9 @@ EasyDropdown.propTypes = {
   menuProps: PropTypes.shape({ ...Menu.propTypes }),
   /** Without `defaultIsOpen`, `onToggle` is the only way to set state. With it, it's a convenience callback. */
   onToggle: PropTypes.func,
-  toggleProps: PropTypes.object,
+  toggleProps: PropTypes.shape({
+    className: PropTypes.string,
+  }),
 };
 
 EasyDropdown.defaultProps = {
@@ -169,7 +178,9 @@ EasyDropdown.defaultProps = {
     position: 'bottomRight',
   },
   onToggle: () => {},
-  toggleProps: {},
+  toggleProps: {
+    className: '',
+  },
 };
 
 export default EasyDropdown;
diff --git a/src/components/EasyDropdown/story.js b/src/components/EasyDropdown/story.js
@@ -96,6 +96,26 @@ storiesOf('Galaxies/EasyDropdown', module)
           </EasyDropdown>
           <br />
           <br />
+          <EasyDropdown
+            menuItems={[{ label: 'Click me!', onClick: () => {} }]}
+            defaultIsOpen={false}
+          >
+            Button with addon
+            <Button.Addon>→</Button.Addon>
+          </EasyDropdown>
+          <br />
+          <br />
+          <EasyDropdown
+            menuItems={[{ label: 'Click me!', onClick: () => {} }]}
+            defaultIsOpen={false}
+            style={{ width: '100%' }}
+            toggleProps={{ style: { width: '100%' } }}
+          >
+            Full-width dropdown
+            <Button.Addon>→</Button.Addon>
+          </EasyDropdown>
+          <br />
+          <br />
           <EasyDropdown
             menuItems={[{ label: 'Click me!', onClick: () => {} }]}
             defaultIsOpen={false}
@@ -112,7 +132,7 @@ storiesOf('Galaxies/EasyDropdown', module)
                 label: 'Custom menu item',
                 children: (
                   <Button
-                    level="teal"
+                    level="primary-alt"
                     style={{
                       display: 'block',
                       borderRadius: '0',

diff --git a/src/components/EasyDropdown/style.css b/src/components/EasyDropdown/style.css
@@ -2,12 +2,6 @@
   display: inline-block;
 }
 
-.toggle {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 100%;
-}
-
 .group {
   border-top: var(--rvr-border-width-md) solid var(--rvr-gray-lite-5);
 }