Migrating to Recipe 17

Overview

Version 17 of Recipe updates the design for EzButton and removes deprecated EzField radio and checkbox types and legacy EzCheckbox.

This release is a major version release and as such, will require migration steps for applications that currently use Recipe Version 16.x or below.

Breaking changes

The following changes are considered breaking changes:

1. Redesigned EzButton

EzButton has a new design with additional support for colors, sizes, and icons.

To make it easier to incrementally move over to the new design, users can simply add a legacy tag to their current implementations. The legacy EzButton will be supported through v17, but will be removed in v18.

// old
<EzButton use="primary">Create Order</EzButton>
<EzButton use="secondary" destructive>Delete</EzButton>
<EzButton use="tertiary" icon={<EzIcon icon={Printer} />}>Print</EzButton>
<EzButton use="primary" disabled disabledMessage="This button is disabled">
  Submit
</EzButton>


// new
<EzButton>Create Order</EzButton>
<EzButton variant="outlined" color="destructive">Delete</EzButton>
<EzButton variant="text" startIcon={<EzIcon icon={Printer} />}>Print</EzButton>
<EzTooltip message="This button is disabled">
  <span>
    <EzButton disabled>Submit</EzButton>
  </span>
</EzTooltip>


// legacy
<EzButton legacy use="primary">Create Order</EzButton>
<EzButton legacy use="secondary" destructive>Delete</EzButton>
<EzButton legacy use="tertiary" icon={<EzIcon icon={Printer} />}>Print</EzButton>
<EzButton legacy use="primary" disabled disabledMessage="This button is disabled">
  Submit
</EzButton>

2. Removed deprecated legacy EzField types 'radio' and 'checkbox' and legacy EzCheckbox

EzRadio and EzCheckbox were broken out from EzField and deprecated in Recipe v16. Version 17 removes these implementatations in an ongoing effort to break out all EzField inputs into their own components. Using the legacy flag on EzCheckbox will also no longer work.

Instead, use EzRadio and EzCheckbox along with their appropriate form elements as shown below and in the documentation.

// old
<EzFormLayout>
  <EzField
    type="radio"
    label="Eligible Days of the Week"
    options={[
      {label: 'Weekdays only', value: 'weekdays'},
      {label: 'All days of the week', value: 'all'},
    ]}
  />
  <EzField
    type="checkbox"
    label="Multiple Choice List"
    options={[
      {label: 'Choice A', value: 'a'},
      {label: 'Choice B', value: 'b'},
      {label: 'Choice C', value: 'c'},
    ]}
  />
  <EzCheckbox
    legacy
    label="Basic Checkbox"
    name="basic-checkbox"
  />
</EzFormLayout>


// new
<EzFormControl>
  <EzFormLabel id="eligible-days">Eligible Days of the Week</EzFormLabel>
  <EzRadioGroup ariaLabel="eligible-days" defaultValue="weekdays" name="eligible-days" row>
    <EzFormControlLabel control={<EzRadio />} label="Weekdays only" value="weekdays" />
    <EzFormControlLabel control={<EzRadio />} label="All days of the week" value="all" />
  </EzRadioGroup>


  <EzFormLabel id="multiple-choice-list">Drinks</EzFormLabel>
  <EzFormGroup ariaLabel="multiple-choice-list">
    <EzFormControlLabel
      control={<EzCheckbox name="coffee" />}
      label="Choice A"
      value="a"
    />
    <EzFormControlLabel
      control={<EzCheckbox name="water" />}
      label="Choice B"
      value="b"
    />
    <EzFormControlLabel
      control={<EzCheckbox name="wine" />}
      label="Choice C"
      value="c"
    />
  </EzFormGroup>


  <EzFormControlLabel
    control={<EzCheckbox name="basic-checkbox" />}
    label="Basic Checkbox"
  />
</EzFormControl>

3. Changed Fulfillment stitches and emotion fonts

Fulfillment theme fonts (stitches and emotion) were changed from:

fontFamily: 'Lato', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif';

to:

fontFamily: 'Roboto Flex', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif'; // default
fontFamily: 'Montserrat', 'Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif'; // headers

In order to keep the Marketplace fonts the same, updates to stitches were made to override the styles in all components.

4. The recipe-ui-theme-marketplace stitches theme package is deprecated and moved into Recipe.

While this package has been deprecated for awhile, Recipe was still using it. It has now been moved into Recipe and may be removed in a future version. All users should update your import to use the theme directly from Recipe.

// Old
import {theme} from '@recipe-ui/theme-marketplace';


// New
import {stitchesMarketplaceTheme} from '@ezcater/recipe';

5. EzTable with selection prop now requires a totalRowsSelected value.

This change allows us to fix some existing bugs for tables with bulk selection.

Migration steps

Installation

You can update your Recipe installation using a package manager like npm or yarn.

npm install @ezcater/recipe@latest

or

yarn upgrade @ezcater/recipe@latest

Current theme

Theme

Contents