Skip to content

Upgrade Guide: RM2 to RM3

Jump to bottom
Laura Silva edited this page Aug 22, 2022 · 12 revisions

NOTE: react-magma-dom version 3.0.0 was an accidental release. Please use ^3.1.x.

Summary of Changes

react-magma-dom

  • Updates all components to use a new color palette and font (Work Sans)
  • Focus states changed from dotted to solid outlines

react-magma-docs

  • Face lift! New logo, home page and sidebar to match new colors
  • All design pages and guidelines have been updated
  • All components should display their props table
  • Updated many examples to fix the broken CodeSandboxes

@react-magma/dropzone

  • Updates with new colors

@react-magma/header

  • Updates with new colors

@react-magma/schema-renderer

  • Updates with new colors, uses ButtonGroup.
  • NOTE: this package is still in BETA.

@react-magma/charts

  • This is the only component that doesn't support isInverse at this time

List of all Changes

Breaking Changes

Alert / Banner / Toast

  • variant muted has been removed => Check with your team's designer to determine replacement

Buttons

  • Margins from buttons have been removed => Use ButtonGroup component to wrap multiple buttons or dropdowns together
  • Variant outline and color success have been removed => Replace with primary or secondary

ProgressBar

  • ProgressBarColor pop and pop02 have been removed => Replace with primary

Tag

  • variants success and danger have been removed => Replace with default or primary

Theme Colors

magma.theme.colors object has changed: there are no foundation, pop, neutral02-09, tint, shade colors. Instead, colors were simplified and restructured to be more flexible for any future changes to the color palette.

Click to expand 
const colors = {
 primary: primaryColors.primary500,
 secondary: secondaryColors.secondary500,
 tertiary: tertiaryColors.tertiary500,
 neutral: neutralColors.neutral500,
 info: infoColors.info500,
 danger: dangerColors.danger500,
 warning: warningColors.warning500,
 success: successColors.success500,

 primary100: '#E8E9F8',
 primary200: '#BABDE9',
 primary300: '#8B91DA',
 primary400: '#5D65CB',
 primary500: '#3942B0',
 primary600: '#292F7C',
 primary700: '#1A1E51',

 secondary500: '#FEE449',
 secondary600: '#FEDA0D',
 secondary700: '#ECC901',

 tertiary500: '#CDDEFF',
 tertiary600: '#A2C1FF',
 tertiary700: '#79A5FF',

 neutral100: '#FFFFFF', // white
 neutral200: '#F5F5F5',
 neutral300: '#D4D4D4',
 neutral400: '#8D8D8D',
 neutral500: '#707070',
 neutral600: '#5A5A5A',
 neutral700: '#454545',
 neutral800: '#2D2D2D',
 neutral900: '#000000', // black

 info100: '#E8F5FC',
 info200: '#A6DEFF',
 info300: '#2FB3FF',
 info400: '#009AF3',
 info500: '#0074B7',
 info600: '#005F96',
 info700: '#004A75',

 danger100: '#FDEFEE',
 danger200: '#FAAEB0',
 danger300: '#E8716D',
 danger400: '#E24943',
 danger500: '#D32821',
 danger600: '#A91F1A',
 danger700: '#7F1714',

 warning100: '#FCEEE5',
 warning200: '#F6CDB2',
 warning300: '#E98B4C',
 warning400: '#E06A1C',
 warning500: '#AD5115',
 warning600: '#8D4311',
 warning700: '#6E340E',

 success100: '#E3FAEA',
 success200: '#ACF0C1',
 success300: '#3EDD6E',
 success400: '#21B94E',
 success500: '#178037',
 success600: '#136A2D',
 success700: '#0F5323',

 focus: infoColors.info500,
 focusInverse: infoColors.info200,

 border: neutralColors.neutral300,
 borderInverse: 'rgba(255,255,255,0.25)',
};

New

  • Badge: Adds isInverse support. No longer has hover/focus styles.
  • Banner: Adds isInverse support
  • ButtonGroup: New component. Should be used to wrap more than one Button or Dropdown.
  • Card: Adds a cardCalloutType of info
  • DatePicker: Adds isInverse support
  • Heading: expressive has a new size, heading2XLarge
  • Modal: Adds isInverse support
  • TablePagination: Adds isInverse support
  • Spinner: Adds isInverse support

Bug Fixes

  • Input: Fixes position overlap when isClearable={true} && iconPosition="top"
  • Table: Sortable tables have the pointer cursor
  • TimePicker: onChange is now called on Backspace key press
  • Toast: Fixes misalignment with closing X
  • Tooltip: Fixes z-index bug

Removed Deprecations

  • Dropdown: onBeforeShiftFocus prop

Cengage Specific FAQ

Do I need to upgrade my app?

The reason for this change was to bring the new Cengage branding into React Magma, an ask from the marketing team. Teams looking to apply this branding to their apps should look to upgrade to RM3. However, if your team does not need this new look and feel, there is no urgency or requirement to upgrade.

Will RM2 receive future updates?

We will continue to fix critical bugs in RM2. All new features will be considered individually to determine if they will be part of RM2 or be exclusive to RM3.

Have other teams upgraded?

The FXT team spiked on the level of effort to upgrade their app to RM3: wiki. All other teams looking to upgrade can use that documentation as a reference.

How often does RM plan to introduce breaking changes?

Our goal is to not introduce breaking changes when possible, so we don't expect this to happen again in the foreseeable future.

Is there an easy color mapping to replace RM2 colors with RM3 colors?

No. Please work with your team's designer to determine what colors to use.

Clone this wiki locally