Flame v2.0.0 🔥

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

@lightspeed/[email protected]

Dependencies

• Flame dependency updated to v2.0.0

@lightspeed/[email protected]

Note: this fixed was actually done in 2.0.0-rc.9, but our publishing script did not trigger the npm publish step.

Fixed

• Input now has type="text" automatically applied for convenience (#117)

@lightspeed/[email protected]

Fixed

• Loosen typing for themeGet (#116)

@lightspeed/[email protected]

Fixed

• Smoothed out border-radius for next/Badge (#108)
• Export next/Badge prop typing and variant types (#110)

@lightspeed/[email protected]

Added

• Create base Flame CSS implementation package (#109)

@lightspeed/[email protected]

Added

• Introducing the concept of the "next" folder. Whenever we are about to introduce breaking changes to existing components, we will introduce the future component into the corresponding folder. Please note that components within this folder are usually experimental and are subject to changes that might not be documented (#106)
• Add next/Badge. Should you wish to already leverage and test out the newer Badge component, simply import { Badge } from '@lightspeed/flame/Badge/next'; (#106)

@lightspeed/[email protected]

Fixed

• Adjust z-index of PopoverContainer to go above the Modal overlay (#107)
• Leverage update hook to re-compute popper positioning in components that have popper still visible. (#105)
• In useOnClickOutside, use a ref for handler callback to avoid destroying the event listener too early. (#105)

@lightspeed/[email protected]

Breaking

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

Fixed

• Components leveraging usePopper should now update appropriately should the layout change around the popper change.

@lightspeed/[email protected]

Fixed

• Fix typing for Alert and AlertInCard (#102)
• Allow empty Alert title and adjust positioning if its the case (#102)