React-Flame @lightspeed/[email protected]: Component library for building Lightspeed products

icon
Latest Release: @lightspeed/[email protected]

Breaking

  • Use React.forwardRef on <Button> and <Switch> components (#75)
  • Title in Alert component ~is now required~ highly recommended (#82)
  • Swap out internals for usePopper, slight change in the API. See migration guide below

Deprecation Warning

  • Alert icon prop will be removed in the next major feature release. Icons will be automatically assigned to an alert based on the variant used (#82)
  • PillBadge will be removed
  • Badge "size" prop will be removed, "type" prop will be renamed to "variant" and Badge will no longer support styled-system props. Should you wish to adopt the new Badge, you may leverage next/Badge for an early migration.

Added

  • New AlertInCard component (#82)
  • Alert component will now automatically inject the right icons as per DSD specs. Overrides still possible, but will be removed at the next major bump (#82)
  • New Toaster component (#86)
  • Added 'next/Badge' component. (#106)

Fixed

  • Icons in Alert will now automatically assign the right color that matches the type of Alert (#82)
  • Icons in Alert will now be properly centered (#82)
  • Tweak css selectors for TextContent to adapt to how emotion handles specificities (#92)
  • Input now has type="text" applied by default (#117)

Migration

usePopper

  • Swap out internal usePopper hook with the one provided by react-popper. While the the underlying components API have not changed, if you are using the hook directly, you'll need to swap out a couple of things to fit the react-popper's hook. Namely, the target and popper refs need to come from the React.useState hook. Additionally, the styles need to be manually applied.(#104
// Before
const Component = () => {
  const targetRef = React.createRef(null);
  const popperRef = React.createRef(null);
  // placement contains the positioning of the popper
  const { placement } = usePopper(targetRef, popperRef);

  return (
    <div>
      <div ref={targetRef}>target</div>
      <div ref={popperRef}>popper content</div>
    </div>
  );
};

// After
import { usePopper } from '@lightspeed/flame/hooks';

const Example = () => {
  const [targetRef, setTargetRef] = React.useState(null);
  const [popperRef, setPopperRef] = React.useState(null);
  // attributes.popper['data-popper-placement'] effectively fills the same role as
  // the previously provided placement return value.
  // long story short: attributes.popper['data-popper-placement'] === placement
  const { styles, attributes } = usePopper(targetRef, popperRef);

  return (
    <div>
      <div ref={setTargetRef}>target</div>
      <div ref={setPopperRef} style={styles.popper}>
        popper content
      </div>
    </div>
  );
};

Additionally, should you leverage the useOnClickOutside hook in conjunction with usePopper, you'll need to also forward a separate ref.

import { usePopper, useOnClickOutside } from '@lightspeed/flame/hooks';

const Example = () => {
  const [targetRef, setTargetRef] = React.useState(null);
  const [popperRef, setPopperRef] = React.useState(null);
  const clickOutsideRef = React.useRef();
  clickOutsideRef.current = popperRef;
  const { styles } = usePopper(targetRef, popperRef);

  useOnClickOutside(clickOutsideRef, () => console.log('clicked outside!'));

  return (
    <div>
      <div ref={setTargetRef}>target</div>
      <div ref={setPopperRef} style={styles.popper}>
        popper content
      </div>
    </div>
  );
};
Source code(tar.gz)
Source code(zip)

? Lightspeed's React UI components library.


npm version

Storybook

For the deployed version of our development environment visit https://lightspeed-flame.netlify.com.

Playground

Fork this CodeSandbox and start playing around with components:

Edit Flame Sandbox

Installing

Install the package:

yarn add @lightspeed/flame

And its required peer dependencies:

Getting Started

Before being able to implement Flame in your application, there are a few steps to bootstrap the components properly. We also assume that your React application is using a bundler such as webpack.

Steps required:

  • Link fonts
  • Hook the theme provider
  • Load global styles
  • Import components via their namespace

Link fonts

There are two ways to load the proper fonts:

Add this <link> tag to your <head> to load the required fonts:

<link
  href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext"
  rel="stylesheet"
/>

Alternatively, if you use React Helmet or can render to the <head> tag in JavaScript, you may use the provided FlameFonts component:

import { Helmet } from 'react-helmet';
import { FlameFonts } from '@lightspeed/flame/Core';

// ..
render() {
  return (
    <Helmet>
      <title>My Title</title>
      <FlameFonts />
    </Helmet>
  );
}

Hook the theme provider, load global styles, and import components

In order to have the proper styling, it is necessary to load the theme object into the application.

To do so, wrap the <FlameTheme> provider on your app and add FlameGlobalStyles:

import React from 'react';
import { FlameTheme, FlameGlobalStyles } from '@lightspeed/flame/Core';
// Access components via their namespace
import { Button } from '@lightspeed/flame/Button';
import { Heading1, Text } from '@lightspeed/flame/Text';

// Within your root app component
class App extends React.Component {
  render() {
    return (
      <FlameTheme>
        {/* Wrapping `<div>` is necessary since `<FlameTheme>` is a Provider */}
        <div>
          {/* We set some global styles, like fonts and minimal resets */}
          <FlameGlobalStyles />

          {/* A Flame styled h1, paragraph, and button ? */}
          <Heading1>My heading</Heading1>
          <Text as="p">Welcome to Flame</Text>
          <Button variant="primary" fill={true}>
            It's happening!
          </Button>
        </div>
      </FlameTheme>
    );
  }
}

Please note

If you have Emotion already installed and you would like to use the theme values provided from Flame, you will still need to wrap your application with an Emotion <ThemeProvider /> and pass in the theme object.

import React from 'react';
import { FlameTheme, lightTheme } from '@lightspeed/flame/Core';
import { ThemeProvider } from 'emotion-theming';

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={lightTheme}>
        <FlameTheme>
          <div>{/* ... */}</div>
        </FlameTheme>
      </ThemeProvider>
    );
  }
}

This is intentional since we do not want changes on FlameTheme to potentially affect your underlying components, as you might already have custom theme values being added.

Testing your app with Flame components

It's important to wrap your tests with the appropriate theme provider. This is because some flame components requires theme values to be passed in order to compute new color values.

Before rendering your component inside of your tests, ensure you wrap it up with FlameTheme.

For example:

describe('Some component', () => {
  it('renders', () => {
    const component = someTestRenderFunction(
      <FlameTheme>
        <Button />
      </FlameTheme>,
    );
  });
});

Getting started with server-side rendering (SSR)

Flame supports SSR out of the box without any additional configuration needed.

Since Flame uses the latest @emotion package, when loading components on the server, components will automatically have their styles extracted without any required setup.

Styled System props

Many of flame components have been augmented with Styled System props.

<Alert mb={3}>
  This Alert will now have a margin bottom (mb) of 1.125rem. That value corresponds to the 3rd
  spacing value of the design system.
</Alert>

These props are essentially a way to quickly customize various css properties of a component without the need of writing a custom css class or component. These props are automatically attached to the values of the design system, so long as the application was properly wrapped with the <FlameTheme> component.

Please consult the packages READMEs for a list of all activated props:

Contributing

See the contributing guidelines.

Licenses

The source code is licensed with a custom license.

Comments

  • [Security] Bump tar from 4.4.13 to 4.4.15
    [Security] Bump tar from 4.4.13 to 4.4.15

    Aug 3, 2021

    Bumps tar from 4.4.13 to 4.4.15. This update includes security fixes.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Arbitrary File Creation/Overwrite due to insufficient absolute path sanitization

    Impact

    Arbitrary File Creation, Arbitrary File Overwrite, Arbitrary Code Execution

    node-tar aims to prevent extraction of absolute file paths by turning absolute paths into relative paths when the preservePaths flag is not set to true. This is achieved by stripping the absolute path root from any absolute file paths contained in a tar file. For example /home/user/.bashrc would turn into home/user/.bashrc.

    This logic was insufficient when file paths contained repeated path roots such as ////home/user/.bashrc. node-tar would only strip a single path root from such paths. When given an absolute file path with repeating path roots, the resulting path (e.g. ///home/user/.bashrc) would still resolve to an absolute path, thus allowing arbitrary file creation and overwrite.

    Patches

    3.2.2 || 4.4.14 || 5.0.6 || 6.1.1

    NOTE: an adjacent issue CVE-2021-32803 affects this release level. Please ensure you update to the latest patch levels that address CVE-2021-32803 as well if this adjacent issue affects your node-tar use case.

    Workarounds

    Users may work around this vulnerability without upgrading by creating a custom onentry method which sanitizes the entry.path or a filter method which removes entries with absolute paths.

    const path = require('path')
    </tr></table> 
    

    ... (truncated)

    Affected versions: >= 4.0.0 < 4.4.14

    Sourced from The GitHub Security Advisory Database.

    Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning

    Impact

    Arbitrary File Creation, Arbitrary File Overwrite, Arbitrary Code Execution

    node-tar aims to guarantee that any file whose location would be modified by a symbolic link is not extracted. This is, in part, achieved by ensuring that extracted directories are not symlinks. Additionally, in order to prevent unnecessary stat calls to determine whether a given path is a directory, paths are cached when directories are created.

    This logic was insufficient when extracting tar files that contained both a directory and a symlink with the same name as the directory. This order of operations resulted in the directory being created and added to the node-tar directory cache. When a directory is present in the directory cache, subsequent calls to mkdir for that directory are skipped. However, this is also where node-tar checks for symlinks occur.

    By first creating a directory, and then replacing that directory with a symlink, it was thus possible to bypass node-tar symlink checks on directories, essentially allowing an untrusted tar file to symlink into an arbitrary location and subsequently extracting arbitrary files into that location, thus allowing arbitrary file creation and overwrite.

    This issue was addressed in releases 3.2.3, 4.4.15, 5.0.7 and 6.1.2.

    Patches

    3.2.3 || 4.4.15 || 5.0.7 || 6.1.2

    Workarounds

    Users may work around this vulnerability without upgrading by creating a custom filter method which prevents the extraction of symbolic links.

    ... (truncated)

    Affected versions: >= 4.0.0 < 4.4.15

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies security 
    Reply
  • Bump path-parse from 1.0.6 to 1.0.7
    Bump path-parse from 1.0.6 to 1.0.7

    Aug 11, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump tar from 4.4.13 to 4.4.19
    Bump tar from 4.4.13 to 4.4.19

    Aug 31, 2021

    Bumps tar from 4.4.13 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump tmpl from 1.0.4 to 1.0.5
    Bump tmpl from 1.0.4 to 1.0.5

    Sep 21, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Houston Theme
    Houston Theme

    Nov 17, 2021

    Description

    Update Flame to adhere to the new Houston design language.

    How to test?

    • Checkout branch, run yarn dev
    • Open Storybook
    • Or check the deploy preview on Netlify (link available in comments)

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [x] I have tested my changes on supported browsers
    • [x] I have added tests that prove my fix is effective or that my feature works
    snapshot 
    Reply
  • Bump shelljs from 0.8.4 to 0.8.5
    Bump shelljs from 0.8.4 to 0.8.5

    Jan 15, 2022

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Enable space props for Card
    Enable space props for Card

    Sep 25, 2019

    Description

    Adds the space props from styled-system to <Card>

    Closes #8

    How to test?

    • Checkout branch, run yarn dev
    • Open Storybook
    • Or check the deploy preview on Netlify (link available in comments)

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [ ] I have added tests that prove my fix is effective or that my feature works
    Reply
  • Make Dropdown forward popper placements
    Make Dropdown forward popper placements

    Nov 5, 2019

    Description

    We can now forward all popper placement values to the dropdown. This means we can now support different positioning options (like top and right)

    Closes #30

    How to test?

    • Checkout branch, run yarn dev
    • Open Storybook
    • Or check the deploy preview on Netlify (link available in comments)

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [x] I have tested my changes on supported browsers
    • [x] I have added tests that prove my fix is effective or that my feature works
    design approved ⚡️ 
    Reply
  • Handle checkbox indeterminate state at the DOM level
    Handle checkbox indeterminate state at the DOM level

    Jan 21, 2020

    Description

    Need to forward the indeterminate state to the component. ez-pz

    closes #72

    How to test?

    • Checkout branch, run yarn test

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [x] I have tested my changes on supported browsers
    • [x] I have added tests that prove my fix is effective or that my feature works
    Reply
  • Destructure css and classname to Checkbox/Radio wrapper components
    Destructure css and classname to Checkbox/Radio wrapper components

    Nov 28, 2019

    Description

    CSS prop and className prop was not getting forwarded to the right component.

    This PR will now ship the right props to the right components.

    How to test?

    • Checkout branch, run yarn dev
    • Open Storybook
    • Or check the deploy preview on Netlify (link available in comments)

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [x] I have tested my changes on supported browsers
    • [x] I have added tests that prove my fix is effective or that my feature works
    Reply
  • Rework Group and Inputs
    Rework Group and Inputs

    Sep 13, 2019

    Description

    The ever famous Group is about to get kicked to the curb!

    Group does some weird recursion thing and strange z-index shenannigans which can lead to some really funky behaviour. So, we're gonna be phasing it out in favour of the new grouping components.

    On a different note, I've also tweaked the Input components to export their base components and attempted to simplify the API a bit. The old status object prop still works, but will be removed in the next major version.

    InputGroup

    Introducing the InputGroup component. Use this component to smoosh input components together (like input, select and buttons).

    It works by simply cloning its children and forwards the right border props. This has a few interesting quirks, namely you must keep the structure of the components flat. This also means that, as long as the components have the border props, they can get properly smooshed.

    // old
    <Group noSpacing>
      <Input />
      <Button>Submit</Button>
    </Group>
    
    // new
    <InputGroup>
      <Input />
      <Button>Submit</Button>
    </InputGroup>
    

    ⚠️ Please note that it is not possible to smoosh column groups no longer. Only rows is supported at the moment.

    Also important to note, InputGroup does not manipulate anything other than border and border-radii. meaning that it will not automatically attempt to set components to have full width or whatever. This also means that trying to nest things in another component (including fragments) will result in the border properties not being applied properly. This is actually intended to reduce zany side-effects.

    ⚠️ Please note: By going with this approach, any Groups with a Popover component will NOT have the proper styling applied, due to border props not getting forwarded. Instead, you may want to use the Dropdown component instead, which accomplishes the same thing, but has the appropriate border props applied.

    You can resize components by either using flex or width props of those input components.

    InputGroupAddon

    This component functions similarly to the old GroupAddon component. It's essentially a pre-styled Flex.

    // old
    <Group noSpacing>
      <GroupAddon>addon</GroupAddon>
      <Input />
      <Button>Submit</Button>
    </Group>
    
    // new
    <InputGroup>
      <InputGroupAddon>addon</InputGroupAddon>
      <Input />
      <Button>Submit</Button>
    </InputGroup>
    

    Input, Radio and Checkbox now export their Base Components

    Each of these components export a more primitive version of themselves. This is particularly useful if you need to further customize the component, but don't really want the additional cruft that comes with these components.

    Asides from some minor additional props (input prefix and suffix is still present), there's not much magic going on, meaning you are free to re-assemble your form inputs should the need presents itself. And to help you do that, we have a few more helper components inbound.

    Input no longer uses objects to represent status and status message

    You should no longer pass an object with magical keys to output the status and status message of a text input.

    // old
    <Input status={{ type: 'danger', message: 'some message'}} />
    
    // new
    <Input status="danger" statusMessage="some message"
    

    As a fun little upgrade, statusMessage takes a ReactNode, so feel free to customize your error message!

    Label and FormHelper

    Label is a new component that takes care of the needed styling and positioning of the input's description field. Use it as you would any other regular label!

    <Label htmlFor="myinput" description="Some description">My Label</Label>
    <Input id="myinput" placeholder="My input placeholder" />
    
    <RadioLabel htmlFor="myinput" description="Some description">
      <Radio id="myinput" placeholder="My input placeholder" />
      My Label
    </RadioLabel>
    

    FormHelper is used to display helper text or status messages. Use it in conjunction when you need to display error messages. You'll need to manually set the status of the component, since it's just a dumb pre-styled text component.

    <Label htmlFor="myinput" description="Some description">My Label</Label>
    // Input still has a status prop
    <Input id="myinput" placeholder="My input placeholder" status="error" />
    <FormHelper status="error">
      This is an error message
    </FormHelper>
    

    RadioLabel and CheckboxLabel

    Radio and Checkbox are somewhat odd ducks, in that the positioning of their description is not aligned to the actual input, but rather the label. Meaning the description is shifted slightly right to align with the label.

    I've provided a RadioLabel and CheckboxLabel to get around this particular quirk. Both have the same API and styling. It's simply the name has been adjusted to match their relevant context.

    // The only added prop is description. Asides from that, it behaves exactly how a regular html label would
    <RadioLabel description="My properly aligned description">
      <BaseRadio />
      My Label
    <RadioLabel>
    

    How to test?

    • Checkout branch, run yarn dev
    • Open Storybook
    • Or check the deploy preview on Netlify (link available in comments)

    Checklist

    • [x] I have read the CONTRIBUTING guide
    • [x] I have prepared CHANGELOGs for release
    • [x] I have tested my changes on supported browsers
    • [x] I have added tests that prove my fix is effective or that my feature works
    enhancement 
    Reply
  • Refactor useEventListener hook
    Refactor useEventListener hook

    Sep 14, 2019

    Description

    Hey guys! I'm really impressed, this is looking great! Congratulations ?? Small refactoring just to say hello ? It's been too long since we had a good old cachebusters drink ?

    Changes:

    • Fixed SSR so that if document is not defined, it will just do nothing
    • Fixed callback so if updated the new instance will be used
    • Removed some duplicated conditionals

    Checklist

    Reply