Mattress Firm Component Library
Changelogv. 4.0.0v. 3.0.0v. 2.0.0v. 1.0.0
Components
Getting Started
Icons
Styling

Changelog

[v 4.4.0]

  • connecting control buttons to shift carousel when using disableAutoShift prop
  • this prop does not support boundary control so needs to be used with infinite
  • specifically tested this fix with same props used in D365 mobile carousel

Kathryn Costantin

[v. 4.3.0]

  • Adding disableAutoShiftProp to carousel component
  • this prop is not yet perfect, it is just to test

Kathryn Costantin

[v. 4.2.4]

  • Adding onCloseAction() on the cleanup function for the dialog hook.

Carlos Rangel

[v. 4.2.3]

  • Removed dialog-marker data attribute for controlling dialog positioning

Carlos Rangel

[v. 4.2.2]

  • Fix dialog positioning for ios/safari
  • Fix nested modal overflow issue

Carlos Rangel

[v. 4.2.1]

  • Pass background opacity by ref to modal/drawer components.

Franklyn

[v. 4.2.0]

  • Adding new icons to Mattress Features

Carlos Rangel

[v. 4.1.1]

  • Added whitespace detection and adjustment for non-infinite carousel

Carlos Rangel / Sergio Herrera

[v. 4.0.4]

  • Added aria label override in Step.

Andrew Hahn

[v. 4.0.3]

  • Added itemID to Step to make it queryable.

[v. 4.0.2]

  • Added toggle for focus() on AccordionItem.

[v. 4.0.1]

  • Added null check for Carousel component.

Franklyn

[v. 4.0.0]

  • Revamped Price component
  • updated existing props. added new props.
  • updated styling
  • added helper functions
  • updated documentation

Mo Mustafa

[v. 3.9.3]

  • added dark variation to Info Icon

Jason Campbell

[v. 3.9.2]

  • updated Chat Bubble Icon

Mo Mustafa

[v. 3.9.1]

  • fixed backdrop prop type

Mo Mustafa

[v. 3.9.0]

  • Added option to add a backdrop to tooltip

Mo Mustafa

[v. 3.8.2]

  • Typescript Select Component

Craig Walker

[v. 3.8.1]

  • Fixed the following issues when using the textarea character limit prop:
    • Border radius styling
    • When used in conjunction w/inputMessage
    • Updating character count when valueDerived is cleared

Carlos Rangel

[v. 3.8.0]

  • Added character count/limit to Textarea

Carlos Rangel

[v. 3.7.6]

  • Bugfix for initial focus on Accordion Item

Christy Koesters

[v. 3.7.5]

  • Fixed Input label animation lag for iOS devices

Lee Collins

[v. 3.7.4]

  • Carousel swiping on mobile more flick like than drag.

Zoe Jablow

[v. 3.7.3]

  • Fixed the label on Input component to reset with form clear

Lee Collins

[v. 3.7.2]

  • Preventing scroll when modals and drawers are open

Craig Walker

[v. 3.7.1]

  • Added fix to remove shadows inside inputs on iOS devices

Lee Collins

[v. 3.7.0]

  • Updated Portal to be able to create nested portals
  • Updated Modal, Drawer and Tooltip logic to allow for nested components
  • Updated Documentation for Modal and Drawer to showcase nested capabilities
  • Added props to Modal, Drawer and Tooltip to allow for granular control over backdrop and z-index

Mo Mustafa

[v. 3.6.1]

  • Update Tabs initial focus state

Christy Koesters

[v. 3.5.18]

  • Update carousel disabled arrows

Christy Koesters

[v. 3.5.17]

  • Bugfixes and additional options for carousel

Christy Koesters

[v. 3.5.16]

  • Update checkbox label to allow ReactNode

Mo Mustafa

[v. 3.5.15]

  • Update tooltip on hover

Christy Koesters

[v. 3.5.14]

  • Added aria label to Drawer wrapper div

Carlos Rangel

[v. 3.5.13]

  • Added aria label prop to Portal

Carlos Rangel

[v. 3.5.11-12]

  • Added modalRef prop to Modal

Chris Carrillo

[v. 3.5.10]

  • Added tooltip aria role
  • Added aria role prop to Portal

Mo Mustafa

[v. 3.5.9]

  • Added children prop to Popper

Craig Walker

[v. 3.5.8]

  • Updated modal scroll bar styling
  • Added back borderStyle prop
  • Updated header/subheader props to accept React Elements

Carlos Rangel

[v. 3.5.7]

  • Added ToddlerBedding SVG

Carlos Rangel

[v. 3.5.6]

  • Added rightText prop on Price component

David Bradshaw

[v. 3.5.5]

  • ProgressBar styles

Craig Walker

[v. 3.5.4]

  • Updated Accordion Title to allow ReactNode types

Mo Mustafa

[v. 3.5.3]

  • Added capture propagation prop to Carousel

Carlos Rangel

[v. 3.5.2]

  • Added null check in carousel utils to account for null ref

Carlos Rangel

[v. 3.5.1]

  • Updated Nighttime Icon with stroke prop

Mo Mustafa

[v. 3.5.0]

  • Updated Carousel with the following:
    • Added variable width capability
    • Added built-in carousel for chips
    • Added disable control prop

Carlos Rangel

[v. 3.4.7]

  • Updated PanelItem for ADA compliance

Mo Mustafa

[v. 3.4.6]

  • Add checkmark outline icon.

Zoe Jablow

[v. 3.4.5]

  • Add border options to popper

Zoe Jablow

[v. 3.4.4]

  • Clean up Modal on unmount

Craig Walker

[v. 3.4.3]

  • Added a discount percentage in the Price component

Jason Campbell

[v. 3.4.2]

  • Tooltip controlled from inside the container

Craig Walker

[v. 3.4.1]

  • A bothersome bug fixed with the Tooltip and React reconciliation

Craig Walker

[v. 3.4.0]

  • Revamped tooltip by adding: borderColor, closeBtn, maxWidth, dynamic height

Craig Walker

[v. 3.3.2]

  • Fixed hyphen case in icon SVGs

Mo Mustafa

[v. 3.3.1]

  • Added Social Icons' red variants
  • Added Info, Nighttime and Cart Icons

Mo Mustafa

[v. 3.3.0]

  • Updated Tabs component to represent styles

Craig Walker

[v. 3.2.2]

  • Reverted pagination logic when total items changes.

Carlos Rangel

[v. 3.2.1]

  • Updated pagination total and current items to be stateful.

Carlos Rangel

[v. 3.2.0]

  • Skeleton Component added.

Carlos Rangel

[v. 3.1.0]

  • Popper Component added.

Zoe Jablow

[v. 3.0.1]

  • Adjusted pagination element structure for better screen reader compliance

Mo Mustafa

[v. 3.0.0]

  • Deleted ProductCard:
    • Not used
    • Every app has different styling
    • We already have the basic components to build one (Rating, Pricing) the rest is just CSS.
    • You would have to override it constantly which defeats the purpose of the component.

Craig Walker

[v. 2.9.8]

  • Updated ProductCard reivew and price props to be optional

Mo Mustafa

[v. 2.9.7]

  • Updated ProductCard with:
    • Alternate layout orientation
    • Lazy loaded brand and comfort logos
    • Various class props for granular style overriding

Mo Mustafa

[v. 2.9.6]

  • updated pagination item count to be stateful

Mo Mustafa

[v. 2.9.5]

  • pagination hotfix - removed console logs

Mo Mustafa

[v. 2.9.4]

  • Updated the pagination item count verbiage logic

Mo Mustafa

[v. 2.9.3]

  • Added ellipses prop to Pagination

Mo Mustafa

[v. 2.9.2]

  • Add id prop to modal and drawer

Christy Koesters

[v. 2.9.1]

  • Fix Carousel loading new slides

Christy Koesters

[v. 2.9.0]

  • Init Chip Component

Craig Walker

[v. 2.8.4]

  • Added title className props to tabs and accordion to update title styles

Christy Koesters

[v. 2.8.3]

  • Remove "enter" keypress to close things (modals, drawer, tooltip) as sometimes we need "enter" for form inputs. It's also not part of accessibility.

Craig Walker

[v. 2.8.2]

  • Fixed Modal controlled closing bug

Craig Walker

[v. 2.8.1]

  • Fixed Modal controlled closing bug

Craig Walker

[v. 2.8.0]

Modal:

  • Fixed default width and css bugs, esp with mobile
  • Removed borderStyle and just made round as default
  • Fixed Safari scroll bug

Craig Walker

[v. 2.7.5]

  • Added More icons and made all icons' width/height customizable

Craig Walker

[v. 2.7.4]

  • Removed !important from disabled Button styling

Mo Mustafa

[v. 2.7.3]

  • Updated Carousel to handle capture click event while dragging
  • Added legacy control button option
  • Added control button class prop

Carlos Rangel

[v. 2.7.2]

  • Updated Modal and Drawer class props

Christy Koesters

[v. 2.7.1]

  • Added horizontal style accordion.

Carlos Rangel

[v. 2.7.0]

  • Added brands (like Serta, Purple, etc) to icons

Craig Walker

[v. 2.6.8]

  • Updated accordion item id. Added aria labels for stepper steps

Mo Mustafa

[v. 2.6.7]

  • Added single item carousel property/styling. Adjusted button link styling.

Zoe Jablow

[v. 2.6.6]

  • added forwardRef to Button

Craig Walker

[v. 2.6.5]

  • Updated props on accordionItem to have className & alignment properties on checkbox.

Zoe Jablow

[v. 2.6.5]

  • Updated props on accordionItem to have className & alignment properties on checkbox.

Zoe Jablow

[v. 2.6.4]

  • Updated styles of buttons (type links) to not have importants.

Zoe Jablow

[v. 2.6.3]

  • Updated styles to Product Card and added children prop to it

Lee Collins

[v. 2.6.2]

  • Add disabled prop to Stepper

Mo Mustafa

[v. 2.6.1]

  • Add size prop to Checkbox
  • useForwardRefHasValue hook

Craig Walker

[v. 2.6.0]

  • Rewrote the Checkbox component:
    • Click on label for onChange
    • Add controlled and uncontrolled capability
    • Added backgroundColor, labelPlacement, wrapperClass, labelClass props
    • Forward Ref

Craig Walker

[v. 2.5.1]

  • Updated Styling and Functionality of Select Component

Lee Collins

[v. 2.5.0]

  • Init Slider Component

Craig Walker

[v. 2.4.1]

  • Fix Stepper border

Christy Koesters

[v. 2.4.0]

  • Init Breadcrumbs Component

Craig Walker

[v. 2.3.9]

  • Fixed icon svg sizes
  • Removed masks on svgs

Zoe Jablow

[v. 2.3.8]

  • Made sure all props have a description
  • Badge: removed height/width prop and added them as styles
  • Checkbox: renamed wrapperClass to className
  • NumberIncrementer: removed showLabel (just use label)
  • Select: Added forwardRef

Craig Walker

[v. 2.3.7]

  • Added modal props for subheader, border style, and content class names
  • Updated modal styling
  • Updated close icon SVG
  • Updated modal close button with close icon

Carlos Rangel

[v. 2.3.6]

  • Add sleepy's brand SVG
  • Added white as a color to Typography

Lee Collins

[v. 2.3.5]

  • Tooltip styles and ADA compliance

Zoe Jablow

[v. 2.3.4]

  • Updated Accordion styles and added props
  • Updated prop nomenclature for Accordion and Accordion Item

Carlos Rangel

[v. 2.3.3]

  • Added Carrier Logos to Icons
  • Added Shipping Status Icons to General Icons

Mo Mustafa

[v. 2.3.2]

  • Updated Stepper styles and added props

Craig Walker

[v. 2.3.1]

  • Fix container css

Christy Koesters

[v. 2.3.0]

  • Added Icons to the component library

Lee Collins

[v. 2.2.7]

  • H1 css update

Christy Koesters

[v. 2.2.6]

  • Fix Input Component to have correct style with default values

Christy Koesters

[v. 2.2.5]

  • Updated Carousel component with:
    • Updated styling for control buttons focus state

Carlos Rangel

[v. 2.2.4]

  • Updated Tab Component with:
    • Animated styles, value and defaultValue prop
    • Added controlled and uncontrolled behavior
    • Improved Typescript and documentation

Craig Walker

[v. 2.2.3]

  • Init Carousel Component

Carlos Rangel / Mo Mustafa

[v. 2.2.2]

  • Updated Typography Component

Lee Collins

[v. 2.2.1]

  • Init Tabs Component

Zoe Jablow

[v. 2.2.0]

  • Init Typography Component

Lee Collins

[v. 2.1.0]

  • Init Pagination Component

Lee Collins

[v. 2.0.4]

  • Fix input autofill style

Christy Koesters

[v. 2.0.3]

  • Remove duplication of Accordion styling

Craig Walker

[v. 2.0.1-2]

  • fixes to treeshaking
  • Moved everything in /src up a directory

Craig Walker

[v. 2.0.0]

  • Treeshaking capability (removes unused components)
  • All imports are now in this format import Button from 'mfcl/Button'

Craig Walker

[v. 1.15.2-7]

  • Treeshaking testing, but not quite there :)

Craig Walker

[v. 1.15.1]

  • Accordion styles and added collapse to the Accordion
  • Docz correct styling

Craig Walker

[v. 1.15.0]

  • Rewrite Input internals
    • Changed inputMessage to just a string
    • Added forwardRef to input
    • added onChange, className, rightSide props
    • deleted inputClass, addBtn, btnLabel, btnProps, focus props

Craig Walker

[v. 1.14.1]

  • Adjust Input style

Christy Koesters

[v. 1.14.0]

  • Adjust Input style

Christy Koesters

[v. 1.13.1]

  • Update Input with new styles

Lee Collins

  • Add Grid Component Prop

Christy Koesters

[v. 1.13.0]

  • Init Panel Component
  • Init PanelItem Component

Mo Mustafa

[v. 1.12.0]

  • Init Grid Component

Christy Koesters

[v. 1.11.0]

  • Init Number Incrementer

Lee Collins

[v. 1.10.0]

  • Init Stepper

Craig Walker

[v. 1.9.0]

  • Init Textarea Component

Mo Mustafa / Carlos Rangel

[v. 1.8.0]

  • Init Input Component

Carlos Rangel / Mo Mustafa

[v. 1.7.0]

  • Init Badge Component

Lee Collins

[v. 1.6.0]

  • Modal Component
  • Portal Component

Zoe Jablow

[v. 1.5.0]

  • Init Flag Component

[v. 1.4.1]

  • Init Tooltip Component

Craig Walker

[v. 1.4.0]

  • Init Price Component

Lee Collins

[v. 1.3.0]

  • Init ProductCard Component

Lee Collins

[v. 1.2.0]

  • Updated Button Component Designs

Christy Koesters

[v. 1.1.0]

  • Init Accordion Component

Christy Koesters

[v. 1.0.0]

  • SSR for all modules
  • Init Rating Component

Craig Walker

[v. 0.1.0]

Created the build, the website, documentation and the following components:

  • Alert
  • Button
  • Checkbox
  • Collapse
  • Drawer
  • Dropdown
  • Fade
  • Loading
  • ProgressBar
  • Select

Craig Walker