feat(ButtonGroup): add stretch modifier

package.json

@@ -81,7 +81,7 @@
     "deepmerge": "^3.0.0",
     "emotion": "^9.1.1",
     "emotion-theming": "^9.1.2",
-    "luxon": "^1.7.1",
+    "luxon": "1.7.1",
     "prop-types": "^15.6.1",
     "react-datepicker": "^2.3.0",
     "react-dropdown-tree-select": "1.13.0",

src/components/Button/Button.theme.js

@@ -47,6 +47,7 @@ const getSquaredStyle = (props: *) => {
   if (props.squared && props.size) {
     return {
       width: BUTTON_HEIGHT_BY_SIZE[props.size],
+      minWidth: BUTTON_HEIGHT_BY_SIZE[props.size],
       height: BUTTON_HEIGHT_BY_SIZE[props.size],
     };
   }
@@ -118,6 +119,7 @@ const [ButtonTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
       },
       ghost: {
         backgroundColor: 'transparent',
+        color: COLORS.BLACK,
       },
     },
 

src/components/ButtonGroup/ButtonGroup.js

@@ -6,6 +6,7 @@ import { ButtonGroupTag } from './ButtonGroup.theme';
 
 type ButtonGroupProps = {
   children: React$Node,
+  stretch?: Boolean,
 };
 
 

src/components/ButtonGroup/ButtonGroup.theme.js

@@ -23,6 +23,12 @@ const [ButtonGroupTag, theme] = createThemeTag(name, {
       },
     },
   }),
+
+  modifiers: {
+    stretch: {
+      width: '100%',
+    },
+  },
 });
 
 

src/components/Dropdown/Dropdown.js

@@ -34,6 +34,7 @@ type DropdownContextData = {|
   isOpen: boolean,
   toggleDropdown: () => void,
   closeDropdown?: () => void,
+  openDropdown?: () => void,
   targetWidth?: number,
   outsideClickIgnoreClass: string,
 |}
@@ -87,12 +88,13 @@ const DropdownPlate = dropDownEnhancer(
   getIgnoreClickOutsideClass = () => `ignore-react-onclickoutside-${this.instanceIndex}`;
 
   render() {
-      const { children, onCloseDropdown, isOpen, ...rest } = this.props;
+      const { children, onCloseDropdown, onOpenDropdown, isOpen, ...rest } = this.props;
 
       const contextData: DropdownContextData = {
         isOpen,
         toggleDropdown: this.toggleDropdown,
         closeDropdown: onCloseDropdown,
+        openDropdown: onOpenDropdown,
         targetWidth: this.getDropdownWidth(),
         outsideClickIgnoreClass: this.getIgnoreClickOutsideClass(),
       };

src/components/Dropdown/DropdownContext.js

@@ -6,6 +6,7 @@ type DropdownContextType = {|
   isOpen: boolean,
   toggleDropdown: () => void,
   closeDropdown:() => void,
+  openDropdown:() => void,
   outsideClickIgnoreClass: string,
 |}
 

src/components/Dropdown/DropdownHead.js

@@ -9,7 +9,11 @@ import { DropdownHeadTag, DropdownPopperTarget } from './DropdownHead.theme';
 
 
 type DropdownHeadProps = {
-  children: React$Node,
+  children: React$Node | ({
+    toggleDropdown: () => void,
+    closeDropdown?: () => void,
+    openDropdown?: () => void,
+   }) => React$Node,
   /** When exists then stretch drodown head */
   stretch?: boolean,
   /** Prevent propagation on click */
@@ -51,15 +55,24 @@ const DropdownHead = dropdownHeadEnhancer(
     stopClickPropagation && event.stopPropagation();
   }
 
+  getHeadChildren = () => {
+    const { children, dropdown: { toggleDropdown, closeDropdown, openDropdown }} = this.props;
+
+    return typeof children === 'function'
+      ? children({ toggleDropdown, closeDropdown, openDropdown })
+      : children;
+  }
+
   render() {
       const { dropdown: { outsideClickIgnoreClass }, children, ...rest } = this.props;
+      const renderChildren = this.getHeadChildren();
 
       return (
         <DropdownHeadTag { ...rest } tagName="div" className={ outsideClickIgnoreClass } onClick={ this.onClick }>
           <Reference>
             { ({ ref }) => (
               <DropdownPopperTarget tagName="div" insideRef={ ref }>
-                { children }
+                { renderChildren }
               </DropdownPopperTarget>
             ) }
           </Reference>