feat(button): added fluid prop

CHANGELOG.md

@@ -24,6 +24,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Make Chat.Messages position relative to contain absolutely positioned children @levithomason (7625becc55fc051175fa3143bdfbc212de2d436c)
 
+### Features
+- Add Button `fluid` prop @Bugaa92 ([#6](https://github.com/stardust-ui/react/pull/6))
+
 <!--------------------------------[ v0.2.2 ]------------------------------- -->
 ## [v0.2.2](https://github.com/stardust-ui/react/tree/v0.2.2) (2018-07-24)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.1...v0.2.2)

docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleFluid = () => <Button fluid content="Fits to Container" />
+
+export default ButtonExampleFluid

docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleFluid = () => <Button fluid>Fits to Container</Button>
+
+export default ButtonExampleFluid

docs/src/examples/components/Button/Variations/index.tsx

@@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Variations = () => (
   <ExampleSection title="Variations">
+    <ComponentExample
+      title="Fluid"
+      description="A button can take the width of its container."
+      examplePath="components/Button/Variations/ButtonExampleFluid"
+    />
     <ComponentExample
       title="Circular"
       description="A button can be circular."

src/components/Button/Button.tsx

@@ -1,28 +1,44 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { ReactNode, CSSProperties } from 'react'
 
-import { UIComponent, childrenExist, customPropTypes } from '../../lib'
+import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib'
 import buttonRules from './buttonRules'
 import buttonVariables from './buttonVariables'
 
+export type ButtonType = 'primary' | 'secondary'
+
+export interface IButtonProps {
+  as?: string
+  children?: ReactNode
+  circular?: boolean
+  className?: string
+  content?: ReactNode
+  fluid?: boolean
+  style?: CSSProperties
+  type?: ButtonType
+}
+
 /**
  * A button.
  * @accessibility This is example usage of the accessibility tag.
  * This should be replaced with the actual description after the PR is merged
  */
-class Button extends UIComponent<any, any> {
-  static displayName = 'Button'
+class Button extends UIComponent<IButtonProps, any> {
+  public static displayName = 'Button'
 
-  static className = 'ui-button'
+  public static className = 'ui-button'
 
-  static rules = buttonRules
+  public static rules = buttonRules
 
-  static variables = buttonVariables
+  public static variables = buttonVariables
 
-  static propTypes = {
+  public static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
+    /** Primary content. */
+    children: PropTypes.node,
+
     /** A button can appear circular. */
     circular: PropTypes.bool,
 
@@ -32,23 +48,40 @@ class Button extends UIComponent<any, any> {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
+    /** A button can take the width of its container. */
+    fluid: PropTypes.bool,
+
     /** A button can be formatted to show different levels of emphasis. */
     type: PropTypes.oneOf(['primary', 'secondary']),
   }
 
-  static handledProps = ['as', 'circular', 'className', 'content', 'type']
+  public static handledProps = [
+    'as',
+    'children',
+    'circular',
+    'className',
+    'content',
+    'fluid',
+    'type',
+  ]
 
-  static defaultProps = {
+  public static defaultProps = {
     as: 'button',
   }
 
-  renderComponent({ ElementType, classes, rest }) {
+  public renderComponent({
+    ElementType,
+    classes,
+    rest,
+  }: IRenderResultConfig<IButtonProps>): ReactNode {
     const { children, content } = this.props
+
     return (
       <ElementType {...rest} className={classes.root}>
         {childrenExist(children) ? children : content}
       </ElementType>
     )
   }
 }
+
 export default Button

src/components/Button/buttonRules.ts

@@ -1,8 +1,13 @@
 import { pxToRem } from '../../lib'
 import { IButtonVariables } from './buttonVariables'
+import { IButtonProps } from './Button'
 
 export default {
-  root: ({ props, theme, variables }) => {
+  root: ({ props, variables }: { props: IButtonProps; variables: IButtonVariables }) => {
+    const { children, circular, content, fluid, type } = props
+    const primary = type === 'primary'
+    const secondary = type === 'secondary'
+
     const {
       backgroundColor,
       backgroundColorHover,
@@ -31,9 +36,11 @@ export default {
       ':hover': {
         backgroundColor: backgroundColorHover,
       },
-      ...(props.circular && { borderRadius: circularRadius, width: circularWidth }),
+      ...(circular && { borderRadius: circularRadius, width: circularWidth }),
+
+      ...(fluid && { display: 'block', width: '100%' }),
 
-      ...(props.type === 'primary' && {
+      ...(type === 'primary' && {
         color: typePrimaryColor,
         backgroundColor: typePrimaryBackgroundColor,
         borderColor: typePrimaryBorderColor,
@@ -42,7 +49,7 @@ export default {
         },
       }),
 
-      ...(props.type === 'secondary' && {
+      ...(type === 'secondary' && {
         color: typeSecondaryColor,
         backgroundColor: typeSecondaryBackgroundColor,
         borderColor: typeSecondaryBorderColor,

src/lib/index.ts

@@ -12,7 +12,7 @@ export * from './factories'
 export { default as getClasses } from './getClasses'
 export { default as getElementType } from './getElementType'
 export { default as getUnhandledProps } from './getUnhandledProps'
-export { default as renderComponent } from './renderComponent'
+export { default as renderComponent, IRenderResultConfig } from './renderComponent'
 export {
   useKeyOnly,
   useKeyOrValueAndKey,