iconColor
and hover
options for super radio and super checkbox button custom themes
style: update focus outline style for all interactive components
style: update EzCheckbox
styles and adds hover state to super checkbox buttons
style: update EzRadio
styles
style: update EzField
input and select styles
style: add additional colors to stitches theme gray250
, gray350
, and gray650
style: update emotion common.disabled
color to neutral140
style: replace custom check and chevron icons with FontAwesome icons
style: replace EzTable
icons with EzIconButton
[sha]EzBadge
, EzButton
, EzCheckbox
, EzChip
, EzIcon
, EzIconButton
, EzRadio
, and EzRating
to clarify that examples only show a subset of colors available [sha]totalRowsSelected
to selection
prop for EzTable (to fix selection banner count) [sha]totalFilteredRows
to pagination
prop for EzTable (to update pagination when filtering) [sha]totalSelectedRows
and totalFilteredRows
fields with filtering [sha]onChange
methods to match the function signature from MUI [sha]useId
hook for unique IDs if present, falling back to our custom unique ID implementation when using React 17 [sha]slidesPerPage
, gap
, and peek
, require title
and description
for EzCarousel
[sha]EzFlashMessage
to "alert" with appropriate aria-live attribute [sha]title
and description
and removed props slidesPerPage
, gap
, peek
[sha]yarn
and yarn workspaces
with lerna
[sha]react
(>= 16.14.0
) may be required with the addition of new dependencies (mui/material
, @emotion/react
, @emotion/styled
, @fortawesome/fontawesome-svg-core
and @fortawesome/react-fontawesome
). [sha]autohide
, autohideDuration
, and onAutohide
for EzFlashMessage [sha]autohide
, autohideDuration
, and onAutohide
to EzFlashMesssage to allow flash messages to disappear after a certain amount of time [sha]autohide
, autohideDuration
, and onAutohide
for EzFlashMessage [sha]feat: Added optional props to EzField for time inputs
displayAsNoon: <boolean>
: Replaces the "12:00 PM" label with "Noon"focusLabel: <string>
: Determines which option is guaranteed to be within view when the dropdown opens and an option isn't already selected [sha]Add new component EzWell
fix: ignored id prop on EzField
textValue
warning from Multiple choice inputs [sha]feat: Add slots API support for EzModal
children
. [sha]feat: make ezlabel a first class component
fix: EzBlankState content doesn't wrap on IE
max-width: 100%
to EzBlankState
content to workaround a known IE flexbox issue. [sha]test: fixed flakey spec caused by scroll-snapping
refactor: reuse a single stitches theme for Recipe components
refactor: normalize snitches usage in EzBaseFontSizeCompatibility
fix: reduce SSR size of top-level EzAppLayout
fix: ensure EzProvider wraps children with snitches provider
fix: support for apps using TS3.0 and strictNullChecks
VariantsCall
type definition from Stitches for responsive props within Recipe in favor of using a custom VariantProps
type derived from the stitches style definitions."strictNullChecks": false
for generating lists of props; when strict null checks are enabled, calling keyof
on a nullable type returns unknown
instead of listing the keys of the Non-nullable version of the type. [sha]perf: update to @stitches/core v0.2.2
EzGlobalStyles
to facilitate css-based fallbacks for browser features. [sha]columns
styles should only apply to tile
layouts. Closes #616. [sha]docs: switch doc-site examples to use playroom
:with-playroom
instructions, since it's now part of npm run start
command.xlink:href
to xlinkHref
.playroom start
command to npm start
. [sha]<style>
tags within label elements. Closes #628. [sha]EzCard[imagePosition]
(instead of max-width queries), to avoid SSR order-of-insertion issues. [sha]EzLayout[layout="stack"]
to horizontally collapse instead of filling the width of the parent element. Closes #619. [sha]sort-css-media-queries
(which isn't built with es5 compatible syntax). [sha]{base: 'cluster', medium: 'basic'}
to EzLayout's responsive layout prop, the actual media query applied for the "cluster" style would apply only up-to the medium
breakpoint.EzProvider
will now be de-duplicated.undefined
classname appearing on EzLink
instancesclassName
prop in v11 will continue to accept a className
prop in v12, new specificity issues may occur if both the className
provided is generated by emotion AND the associate styles override Recipe's component styles.@recipe-ui/theme-marketplace
and later. The v1 version of the @recipe-ui/theme-marketplace
package is not compatible with Recipe v12, and should only be used on applications running Recipe v11.Object.entries()
polyfill.onSelectionChange
API for EzField[type=select]
, consistent with EzField[type=Autosuggest]
component.close
method was called when clicking inside of a nested popover's content. Closes #522.document.createEvent()
. Closes #523.jest-junit
will generate a junit xml file that Jenkins knows how to read.jest-standard-reporter
to allow the output of jest to be sent to stdout for CI.EzField[type=email]
.header
element.EzFlashMessage
.findIndex()
polyfill to Getting Started
, EzField
, EzProgressTracker
, and EzPageHeader
.findIndex()
polyfill to the doc-site for compatibility with IE11.EzGlobalStyles
component documentation.@recipe-ui/theme-marketplace
v1.1.2. EzCard has more clearly defined corners.Documented two common variations of clickable cards:
RequireAtLeastOne
utility type in build output.next-recipe-css
. The next-recipe-css
package enables @ezcater/recipe
to import css files by leveraging a custom webpack config in Next.js. See the next-recipe-css package readme for more info.@recipe-ui/legacy-theme
package, to provide access to the themes/standard
module from prior Recipe releases.themes/standard
, recommending direct use of @recipe-ui/legacy-theme
for backwards compatibility, or favoring locally defined variables where appropriate. The standard theme is no longer used by Recipe and is no longer maintained in this package.peek
buttons enabled will no longer reduce the item size to provision space for buttons if there is only one page.fix: accessibility improvements for carousel. Closes issue #455.
node_modules
.onClick
and no href
now render as buttons, rather than links.Significant restructuring of the doc-site to account for the v11 release changes:
@recipe-ui/theme-marketplace
.Element.prototype.scrollTo()
. See the carousel browser support documentation for more information.emotion-theming
and instead is powered by CSS custom properties. For applications that need to support IE11, a polyfill will be required to enable support for CSS custom properties. We recommend using the css-vars-ponyfill by jhildenbiddle.emotion-theming
. Instead the Recipe v10 "standard theme" breakpoint values will be used. The medium breakpoint is to 768px
and the large breakpoint is 1061px
.size="small"
variant to EzCard. Small cards are best for browsing content as part of a list or grid of cards.imageMaxHeight
and imageMaxWidth
options to EzCard to provide more granular control over the size of card images.@recipe-ui/theme-marketplace
package for customizing Recipe for marketplace applications.emotion-theming
devDependency from Recipe.@react-types/provider
(provides type definition only).parcel
and postcss
devDependencies for building standalone theme packages.css
to r
(for recipe). This change is only applied to styles generated during test runs and does not impact production. This change reduces the payload size of visual regression tests.jest.globals
in favor of using @testing-library/react
directly (we no longer need to wrap components in a theme provider).repository
and types
fields to Recipe's package.json.FocusScope
component (based on react-aria to manage focus containment, focus restoration and auto focus for descendant focusable elements.ScrollLock
component to avoid body scroll when modal dialogs are open.onClick
being called on EzField[type=select] when used inside EzModal. Closes issue #412.update internal dependency on reakit to 1.2.0.
update dev dependency on jsdom, as well as corresponding versions of @testing-library.
autosuggest
variation EzField. Supports typeahead-style filtering of drop-down lists to help users find what they're looking for in larger data-sets.@testing-library/dom
, @testing-library/react
and @testing-library/user-event
EzField[type=select]
highlighting incorrect option to assistive devices. Closes issue #398.babel-plugin-emotion
release that had been held back from an upgrade as it had an issue detecting component selectors. Switched away from using component selectors internally so that we could proceed with the upgrade to the v10 plugin (to avoid any potential pitfalls downstream of using a v9 plugin with v10 code).babel-plugin-emotion
. See PR#387 for more details.type="password"
, allowing the user to securely enter a password using the browsers default password input. Closes #332.to
prop now correctly supports. Closes #345.touched
and error
props.disabled
flag (Closes #369).New alignment options on EzLayout.
cluster
layout has a new alignX
option. This option allows the horizontal alignment to be changed to left
, right
, center
or conditionally based on the current screen size.stack
layout has a new alignX
option. This option allows the horizontal alignment to be changed to left
, right
, center
, or stretch
or conditionally based on the current screen size.alignY
option: basic
, right
, equal
, split
, tile
and cluster
. This option allows the vertical alignment to be changed to top
, bottom
, center
, stretch
or conditionally based on the current screen size.top
, left
or right
aligned, full-bleed images (i.e. image fills the card / no padding). By default, images will fill the width of the container while maintaining their aspect ratio, however images positioned to the right or left of the container will fill half of the card, clipping the image if to match the aspect ratio of the available space.horizontal
option for page sections, ideal for comparing content, such as in feature sections.left
, center
or right
. Alter the alignment for different screen sizes using {base: 'left', medium: 'center'}
.EzTextStyle
to allow any ReactNode content. This allows other text content, such as links, to be included within the component, allowing for control over alignment.options
prop and how options may be marked as disabled
.bordered
style variation for EzField[type=checkbox] options and EzField[type=radio].$
character (reserved for selector level-4 attribute selectors).options
prop and how options may be marked as disabled
.display: block
by default, allowing the margin/line-height of labels to be controlled via css.label
element and correctly apply the htmlFor
prop to associate the label element with the form control. This allows the label to increase the hit-surface to focus/activate the input, as well as allowing assistive technology to identify the label when the input is focused.onChange
multiple times on change as well as calling onChange
erroneously on render.EzModal
dialogs are present in a page.:hover
and :active
)minDate
or maxDate
restrictions or using a filterDate
function, allowing for more control over excluding restricted dates, such as weekends or holidays. (Closes #325).EzLayout
screen breakpoint bug causing layout items to have unwanted margin.<Dialog modal={false}>
.:focus
styles on close button for EzModal, EzBanner and EzFlashMessage.accessor
prop on EzTable in favor of separate key
and component
properties.size
optional (already has a default value of normal
)layout
prop. The type definition now represents our existing usage pattern. The default (EzLayout[layout=basic]) remains unchanged.event.target.value
. This bug impacted any usage of EzField[type=select] where an option value was of type Number or Boolean.innerRef
. You will need to upgrade React Router to at least v5.1 if your application passes refs to EzLink and uses EzLink's as
prop.Global
Component for global styles.event.target
element on the onChange
event of EzField[type=select|date|time] (fixes issue 257)active
as the activeClassName
in EzNavigation links. While we do not anticipate this being a breaking change for most consumers of Recipe, there maybe some observable changes due to the change in HTML generated by the component. In particular applications that contain a CSS rule that targets elements with a .active
selector may be affected.styled
helper instead of relying on the class name generated by the css
helper.aria-labelledby
attribute from combobox element. This attribute/value pair was already applied to the combobox input, causing the latest version of @testing-library/react
to fail to match a unique element.act()
(using react-dom/test-utils
instead of TestRenderer.act()
)loading
flag from EzButton to the underlying DOM element.Using kebab-case for css properties in objects is not supported. Did you mean marginBottom?
warning generated by the internal EzLabel component.javascript:urls
from component examples (deprecated in React 16.9)babel-core
dev dependency. We're using babel 7 (and @babel/core), so babel-core
is no longer being used.react-test-renderer
in favor of consistently using @testing-library/react
.@ezcater/eslint-plugin-recipe
) for using static analysis to track Recipe usage in downstream applications.@testing-library/react
.@ezcater/babel-plugin-recipe
) for using static analysis to track Recipe usage in downstream applications.EzBaseFontSizeCompatibility
component is provided to support a base font size of 14px.baseFontSize
changeable in downstream applications, even if spacing
, fontSize
or pageContentWidth
values are read from our theme module immediately on script import (rather than the intended use of reading from the theme within a theme provider). While we do not anticipate this being a breaking change for most consumers of Recipe, there maybe some observable changes, in particular, if an application performs math/calculations upon these values.baseFontSize
to be changeable in downstream applications. For applications that need to support IE11, to provide support for CSS custom properties a polyfill will be required. We recommend using the css-vars-ponyfill by jhildenbiddle.Fixes for Component Playground for FireFox
onLoad
has firedsrcDoc
to ensure onLoad
event is fireddisabledMessage
property to EzButton to make using buttons wrapped with an EzTooltip easier.e.target.selected
property from the onChange
callback of both EzField[type="radio"] and EzField[type="checkbox"] in favor e.target.value
for consistency with the onChange
event handlers for other EzField types.div
instead of a p
to prevent the style from being overriden by EzPageEzInlineFeedback
to prevent shifting in EzToggle
. This fixes #223onChange
if the selection causes a change to the initially provided value.updated contribution instructions and provided detailed guidelines for approaching development of new components
forwardRef
support to EzField
, EzCheckbox
, EzToggle
and EzStatus
to allow access to the underlying native DOM elements for providing support for tooltips. While we do not anticipate this being a breaking change for most consumers of Recipe, there maybe some observable changes, in particular, around exported type definitions. For more information, see: https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers.EzAppLayout
component to ensure applications use the correct font size/style/color/smoothing rules. While we do not anticipate this being a breaking change for most consumers of Recipe, any applications that use the EzAppLayout
component that do not already apply the necessary base font settings may experience observable changes in font appearance.EzGlobalStyles
component that enables the sharing of global styles rules for Recipe, so that these rules are applied consistently throughout your application. Note: Global Styles is automatically included by the EzAppLayout component, and direct usage of this component is typically unnecessary except to support backwards-compatibility.EzField[type="Select"]
to allow users to pick from a dropdown list of options.EzField[type="Select"]
.EzField[type="time"]
to allow users to pick from a list of times.fonts
object to standard theme with grouped styles.size
property to EzField with type textarea for changing the default size of the textarea.type="date"
, type="time"
and type="select"
.type="time"
and type="select"
.EzGlobalStyles
within the Component playgroundjest.config
in favor of using EzGlobalStyles
component.EzSearchInput
component to allow users to search for specific content by providing search terms or simple keywords.EzBanner
component to display a prominent, succinct message with a related link or action.EzNavigation
component. The navigation component provides the primary means for users to move between sections of the application. On small screens, the Navigation menu is presented as a top-bar, while on larger screens the Navigation menu is presented as a left side-bar.date
type to EzField
component.label
attribute to EzToggle
.EzModal
, EzFlashMessage
and EzBanner
to use a consistent button for dismissing.Design updates for input fields:
EzModal
and EzFlashMessage
to have a transparent color for :active
and :hover
click-surface styles.flex-grow
to EzPage
to ensure pages expand to fill the available space when placed inside a flex container.Element.prototype.closest()
.Reakit
to simplify building accessible components.onChange
to use (value: string) => void
instead of ((event: FormEvent<any>) => void) & ((value: string) => void)
.EzTable
API by moving/grouping the props onRowSelectClick
, onBulkSelectClick
and isRowSelected
under a new selection prop, rather than being individual props to EzTable
.onSelectAllClick
and onSelectNoneClick
to the selection
prop of EzTable
to handle the new interactions available from the table select all banner.rowsPerPageOptions
to use number[]
instead of [number]
.EzCheckbox
component.Removed export-to-sketch feature from doc-site due to some unexpected side-effects with how the feature rendered components "off screen":
updated checkbox styles to be consistent with radiobutton
:active
checkbox styles:focus-within
(for compatibility)--open
flag to gatsby develop
NPM target. This will launch the doc site during development similar to how create-react-app auto launches when running.actions
on EzTableforwardRef
on EzButton and EzLink components to allow access to underlying DOM elementstart
. npm start
runs both recipe
and the documentation site in the same terminal window. This command will also auto link the recipe
NPM package to the documentation site.jsxwide
examplesAdded support for sorting EzTable.
sortable
. EzTable will call onSortClick
when sortable columns are clicked.defaultSort: 'asc' | 'desc'
to indicate the default sort order for data setsmargin-right
from EzButton. To apply spacing between buttons, the preferred approach is to use an EzLayout as the direct parent of the buttons.tertiary
variant of EzButton. As with other buttons, spacing between sibling buttons should be applied via a direct parent EzLayout.onRowClick
property on EzTable with onRowSelectClick
to more closely align with the existing onBulkSelectClick
property.rowIsSelected
property on EzTable with isRowSelected
. Using question phrasing to more clearly indicate that this property is a function.React.MouseEvent
based handlers.Simplified EzTable examples in the documentation
Component
wrapper for state with useState
hooksComponent
wrapper from example that didn't use stateEzHeading
EzCard
to use EzHeading
for consistencyEzButton
onClick to MouseEventHandler
npm run build:watch
mode for TypeScript buildsactions
prop to EzCard component for rendering secondary calls-to-action.styled<Theme>
export from Recipe's public api. This undocumented api became available as part of the 2.0.0-alpha.0 release, but the api is too broad for the scope of Recipe.standard
theme to Recipe components where no ThemeProvider
is in use. This was a breaking change for the 2.0.0-alpha.0 release, but the impact on downstream projects would delayed the upgrade path to 2.0.0 with this change in place.EzFormLayout
and EzFormField
componentsLato
font import in the doc-sitenpm run build:watch
mode for TypeScript buildsUpdated structure of EzModal
docs to follow the same format of other components
EzLayout
type definition that prevented the base layout (mobile view) of a responsive layout from using any layout other than stackEzLayout
type definition that prevented multiple breakpoints being specified for responsive layoutsEzLayout
type definition to the breakpoints specified by the theme
, such that changes to the number of breakpoints don't require changes to EzLayout
.withTheme
wrapper around components; Recipe components must now be used inside a ThemeProvider
appElement
prop on EzModal componentUpdated formatting of changelog to conform to our changelog guidelines
appElement
prop on EzModal componentpeerDepenedency
requirements in Getting Started docsappElement
prop on EzModal componentdisplayName
and EzCard bug causing EzCardSection
to not render correctly.className
to EzAlertspacing.xl2
.theme
property for EzAlert