Flame v2

[xdrdak]

Description

Prepare for merging next into master to kick off v2.

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>
  );
};

How to test?

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

Checklist

• I have read the CONTRIBUTING guide
• I have prepared CHANGELOGs for release
• I have tested my changes on supported browsers
• I have added tests that prove my fix is effective or that my feature works

[netlify]

Deploy preview for lightspeed-flame ready!

Built with commit c08146e

https://deploy-preview-99--lightspeed-flame.netlify.app

[netlify]

Deploy preview for lightspeed-flame ready!

Built with commit 38a510d

https://deploy-preview-99--lightspeed-flame.netlify.app

[xdrdak]

Flushing the old notifications by closing this PR