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-eventEzField[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 stateEzHeadingEzCard to use EzHeading for consistencyEzButton onClick to MouseEventHandlernpm 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 ThemeProviderappElement 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