feat(ui-buttons): expose display prop on CondensedButton

Author: git-nandor

packages/ui-buttons/src/CondensedButton/index.tsx

@@ -56,7 +56,8 @@ class CondensedButton extends Component<CondensedButtonProps> {
     interaction: undefined,
     color: 'primary',
     margin: '0',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    display: 'inline-block'
   }
 
   _baseButton: BaseButton | null = null
@@ -94,6 +95,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
       cursor,
       href,
       renderIcon,
+      display,
       ...props
     } = this.props
 
@@ -103,6 +105,7 @@ class CondensedButton extends Component<CondensedButtonProps> {
       <BaseButton
         {...passthroughProps(props)}
         isCondensed
+        display={display}
         withBackground={false}
         withBorder={false}
         type={type}

packages/ui-buttons/src/CondensedButton/props.ts

@@ -101,6 +101,11 @@ type CondensedButtonOwnProps = {
   onClick?: (
     event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
   ) => void
+
+  /**
+   * The CSS display property of the button, `inline-block` or `block`
+   */
+  display?: 'inline-block' | 'block'
 }
 
 type PropKeys = keyof CondensedButtonOwnProps
@@ -124,7 +129,8 @@ const propTypes: PropValidators<PropKeys> = {
   cursor: PropTypes.string,
   href: PropTypes.string,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  display: PropTypes.oneOf(['inline-block', 'block'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -139,7 +145,8 @@ const allowedProps: AllowedPropKeys = [
   'renderIcon',
   'size',
   'type',
-  'onClick'
+  'onClick',
+  'display'
 ]
 
 export type { CondensedButtonProps }