Rework Group and Inputs (#2)

* Rework Group and Inputs * use styled-system compose function * Add layout props to select component * Added back some legacy API for compat reasons and easier migration * Add back the legacy group for now * Tests for legacy API and component * Make codecov less cranky * Fix checkbox custom component tests * Add border props to select * Add back border properties to InputWrapper * Fix input warning story. Force line-height * Adjust a SpacedGroup to match old vertical alignment * Move legacy Group back in original folder * Bring back original README and story, add deprecation notice * Disable eslint no-console errors for deprecation warnings * Move InputGroup and SpacedGroup to separate components * Remove unnecessary jest snapshot, Percy will do take care of this * Ignore dist/ folder for jest tests * Ignore uncovered lines from coverage * Adjust Checkbox and Radio stories * Enable color props on InputGroupAddon component * Remove SpacedGroup component, keep it for stories purpose only * Dont show Input status box in suffix if no status, fix FormHelper spacing * Add back flameName for Group component compat * Update snapshots * Remove text on Checkbox story for better Percy matching * Remove disable text on FormField, make Label inline-flex * Update snapshots * Add Dialog story for Percy * Add back display: flex for BaseLabel * Put FormHelper top margin at Input level * Add README for FormField component * Update CHANGELOG, make sure all base components are exported * Renamed Styled System aliases * Enable zIndex Styled System props on InputGroup-based components * Fix FormField README examples * Update packages/flame/src/Checkbox/README.md Co-Authored-By: Kevin Vicrey <[email protected]> * Update FormField README
lightspeed · Oct 25, 2019 · 8655589 · 8655589
1 parent a8c4015
commit 8655589
Show file tree

Hide file tree

Showing 47 changed files with 1,983 additions and 1,288 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/template/', 'dist'],
+  testPathIgnorePatterns: ['<rootDir>/template/', '/dist/'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/tests/file-mock.js',

diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md
@@ -12,6 +12,17 @@ Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/maste
 ### Added
 
 - Add Interac icon ([#33](https://github.com/lightspeed/flame/pull/33))
+- Add InputGroup and FormField (Label + FormHelper) components ([#2](https://github.com/lightspeed/flame/pull/2))
+- Expose Input, Radio and Checkbox base components ([#2](https://github.com/lightspeed/flame/pull/2))
+- Enable `zIndex` Styled System props for Button, BaseInput and InputGroupAddon components ([#2](https://github.com/lightspeed/flame/pull/2))
+
+### Changed
+
+- Input no longer uses objects to represent status and status message ([#2](https://github.com/lightspeed/flame/pull/2))
+
+### Deprecated
+
+- Group component will be removed from the next major version of Flame ([#2](https://github.com/lightspeed/flame/pull/2))
 
 ## 1.0.0 - 2019-10-08
 

diff --git a/packages/flame/src/Button/BaseButton.tsx b/packages/flame/src/Button/BaseButton.tsx
@@ -1,8 +1,17 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { space, SpaceProps } from 'styled-system';
+import {
+  space,
+  SpaceProps,
+  layout,
+  LayoutProps,
+  zIndex,
+  ZIndexProps,
+  compose,
+} from 'styled-system';
 import { themeGet } from '@styled-system/theme-get';
 import { Merge } from 'type-fest';
+import { border, BorderProps } from '../Core';
 
 export type ButtonHTML = React.HTMLProps<HTMLButtonElement> & React.HTMLProps<HTMLAnchorElement>;
 export type ButtonSizes = 'small' | 'large' | 'xlarge' | 'medium';
@@ -13,7 +22,10 @@ export type BaseButtonProps = {
   disabled?: boolean;
   /** Sets display: block on Button */
   block?: boolean;
-} & SpaceProps;
+} & SpaceProps &
+  LayoutProps &
+  BorderProps &
+  ZIndexProps;
 
 const generateSize = (height: number, px: number, font: string, radius: string) => (
   props: BaseButtonProps,
@@ -89,7 +101,13 @@ export const BaseButton = styled('button')<Merge<ButtonHTML, BaseButtonProps>>`
   }
 
   ${setDisabled};
-  ${space};
+
+  ${compose(
+    space,
+    border,
+    layout,
+    zIndex,
+  )};
 `;
 
 BaseButton.defaultProps = {

diff --git a/packages/flame/src/Button/story.tsx b/packages/flame/src/Button/story.tsx
@@ -7,9 +7,11 @@ import { Button } from './Button';
 import Readme from './README.md';
 import { Flex, Box } from '../Core';
 import { Divider } from '../Divider';
-import { Group } from '../Group';
+import { InputGroup } from '../InputGroup';
 import { Icon } from '../Icon';
 
+import { SpacedGroup } from '../../../../stories/components/SpacedGroup';
+
 const stories = storiesOf('Button', module).addDecorator(withReadme(Readme));
 
 type ButtonPresenterState = {
@@ -56,15 +58,15 @@ class ButtonPresenter extends PureComponent<{}, ButtonPresenterState> {
 stories.add('Styles', () => (
   <div>
     <h3>Outline</h3>
-    <Group>
+    <SpacedGroup>
       <Button>Default</Button>
       <Button variant="primary">Primary</Button>
       <Button variant="secondary">Secondary</Button>
       <Button variant="danger">Danger</Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Active</h3>
-    <Group>
+    <SpacedGroup>
       <Button forcedState="active">Default</Button>
       <Button variant="primary" forcedState="active">
         Primary
@@ -75,10 +77,10 @@ stories.add('Styles', () => (
       <Button variant="danger" forcedState="active">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Hover</h3>
-    <Group>
+    <SpacedGroup>
       <Button forcedState="hover">Default</Button>
       <Button variant="primary" forcedState="hover">
         Primary
@@ -89,10 +91,10 @@ stories.add('Styles', () => (
       <Button variant="danger" forcedState="hover">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
     <hr />
     <h3>Fill</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill>
         Primary
       </Button>
@@ -102,10 +104,10 @@ stories.add('Styles', () => (
       <Button variant="danger" fill>
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Active</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill forcedState="active">
         Primary
       </Button>
@@ -115,10 +117,10 @@ stories.add('Styles', () => (
       <Button variant="danger" fill forcedState="active">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Hover</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill forcedState="hover">
         Primary
       </Button>
@@ -128,14 +130,14 @@ stories.add('Styles', () => (
       <Button variant="danger" fill forcedState="hover">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
   </div>
 ));
 
 stories.add('Sizes', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small">Small</Button>
         <Button variant="primary">Medium</Button>
         <Button variant="secondary" size="large">
@@ -144,10 +146,10 @@ stories.add('Sizes', () => (
         <Button variant="danger" size="xlarge">
           Extra Large
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           Small Block
         </Button>
@@ -160,7 +162,7 @@ stories.add('Sizes', () => (
         <Button variant="danger" size="xlarge" block>
           Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Divider mt={3} />
     <h3>Multiline</h3>
@@ -208,7 +210,7 @@ stories.add('Button as Links', () => (
 stories.add('Events', () => (
   <div>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button onClick={action('Clicked')}>Button with onClick event (see Action Logger)</Button>
         <Button onFocus={action('Focused')}>Button with onFocus event (see Action Logger)</Button>
         <Button onBlur={action('Blured')}>Button with onBlur event (see Action Logger)</Button>
@@ -227,56 +229,56 @@ stories.add('Events', () => (
         <Button href="http://google.com" target="_blank" disabled>
           Disabled link removes href and target
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
   </div>
 ));
 
 stories.add('With Children', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small">
           <Icon name="orders" />
         </Button>
         <Button>
           <Icon name="orders" />
         </Button>
-        <Group noSpacing>
+        <InputGroup>
           <Button>
             <Icon name="small-chevron-left" />
           </Button>
           <Button>
             <Icon name="small-chevron-right" />
           </Button>
-        </Group>
+        </InputGroup>
         <Button size="large">
           <Icon name="orders" />
         </Button>
         <Button size="xlarge">
           <Icon name="orders" />
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button variant="primary">
           <Icon name="chevron-left" /> Back
         </Button>
         <Button variant="primary" fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button variant="secondary">
           View Product <Icon name="arrow-right" />
         </Button>
         <Button variant="secondary" fill>
           Customers <Icon name="customers" />
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <Button variant="danger">
@@ -287,7 +289,7 @@ stories.add('With Children', () => (
       </Button>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           <Icon name="users" /> Small Block
         </Button>
@@ -301,15 +303,15 @@ stories.add('With Children', () => (
           <Icon name="support-tickets" /> Large Block
         </Button>
         <Button size="xlarge" block>
-          Extra Large Block with Lightspeed logo
+          Extra Large Block
         </Button>
         <Button size="xlarge" block>
           <Icon name="image" size="xsmall" /> Custom icon size in Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           <Icon name="users" /> Small Block
         </Button>
@@ -323,16 +325,16 @@ stories.add('With Children', () => (
           <Icon name="support-tickets" /> Large Block
         </Button>
         <Button size="xlarge" block>
-          Extra Large Block with Lightspeed logo
+          Extra Large Block
         </Button>
         <Button size="xlarge" block>
           <Icon name="image" size="xsmall" /> Custom icon size in Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <h3>Icons with details should be colored properly</h3>
-      <Group>
+      <SpacedGroup>
         <Button variant="primary" fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
@@ -345,15 +347,15 @@ stories.add('With Children', () => (
         <Button fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
   </div>
 ));
 
 stories.add('Loading', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button loading>Default</Button>
         <Button variant="primary" loading>
           Primary
@@ -364,10 +366,10 @@ stories.add('Loading', () => (
         <Button variant="danger" loading>
           Danger
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small" variant="primary" fill loading>
           Primary
         </Button>
@@ -377,7 +379,7 @@ stories.add('Loading', () => (
         <Button size="xlarge" variant="danger" fill loading>
           Danger
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <ButtonPresenter />

diff --git a/packages/flame/src/Checkbox/Checkbox.test.tsx b/packages/flame/src/Checkbox/Checkbox.test.tsx
@@ -12,8 +12,8 @@ type RenderTest = {
     indeterminate?: boolean;
     id?: string;
     value?: string;
-    label?: string | Function;
-    description?: string | Function;
+    label?: any;
+    description?: any;
   };
 };
 
@@ -34,8 +34,8 @@ describe('<Checkbox />', () => {
         props: {
           id: 'id',
           value: 'value',
-          label: () => <div>Label</div>,
-          description: () => <div>Description</div>,
+          label: <div>Label</div>,
+          description: <div>Description</div>,
         },
       },
     ];
@@ -82,10 +82,7 @@ describe('<Checkbox />', () => {
 
     it('renders custom components in Label and Description', () => {
       const { getByText } = customRender(
-        <Checkbox
-          label={() => <div>my label</div>}
-          description={() => <div>my description</div>}
-        />,
+        <Checkbox label={<div>my label</div>} description={<div>my description</div>} />,
       );
 
       getByText('my label');