Changelog tags
- 💥 - Breaking change
- 🔖 - Release notes
- 💖 - New feature
- ✨ - Updates
- 🛠 - Fixes
3.4.1 (2020-05-28)
useTheme
throwing errors in valid use cases.- Sass merge logic combining padding, margin, borders values instead of overwriting them.
3.4.0 (2020-05-14)
- Types updated to strict type checking
- Add missing utility prop types
3.3.1 (2020-03-21)
- Flex SASS filename casing mismatch
3.3.0 (2020-03-21)
- Text component shorthand props
align
andcolor
added for setting text alignment and color. - Types added for all components for
fontColor
,textAlign
,width
,backgroundColor
andborderColor
. - Module augmentation to override utlity prop types added to library.
- Styles only entry
_index.scss
added to ensure library styles can be imported as~componentry/styles
- Misc className mismatches resulting from TS updates.
3.2.0 (2020-03-10)
- Styles only entry added at
~componentry/styles
for convenience setting up the library.
- Responsive and flex classes mismatched between styles and component output.
3.1.0 (2020-02-28)
Componentry is now written in TypeScript 🎉🎉🎉
Adding types has been a wishlist item for a long time. Types provide such a great developer experience upgrade, and increase the quality of the codebase.
Although this is a minor release it is a little spicy 🌶 because updating to TS required changing every file in the library 😬.
- The
classnames
package has been replaced withclsx
for a performance boost.
3.0.0 - 2020-05-17
After nearly two years of tinkering and optimizing, Componentry v3 is released 🎉
v3 is essentially a new library, so breaking changes aren't listed. The recommended migration path is to install both the v2 and v3 branches simultaneously, using a git tag for the v2 branch. The v3 components and styles are prefixed and shouldn't cause conflicts when both are used.
- Components are using the latest React features, including the updated context API and hooks. As a result the code for handling components with active state is smaller and easier to maintain.
- Styles are fully customizeable. The library base theme and component styles are now written with SASS maps and every line of component styles can be overridden.
- Component behavior and appearance styles have been split into base and variant classes. A few useful variants ship with Componentry, and it's possible to add additional style variants without having to figure out how to extend behaviors like visibility.
- System props provide convenience methods for setting Tailwind CSS inspired utility classes. Each component accepts system props, and the utility styles can be used stand-alone.
- New Block, Flex, and Text components make creating layouts and consistent text elements faster. These base components provide convenient building blocks for composing custom components.
The initial v3 release offically includes the Block
, Flex
, Icon
, Text
,
and Theme
components. The remaining components can be imported, but their
styles still need to be transitioned to SASS maps and variants so there will
be changes.
The Anchor
and Button
components will be released next.
The active components, including Active
, Drawer
, Dropdown
, Tooltip
and
Popover
will be released after that.
Remaining components will be queued and released after that.
Build something radical 💖
- Added
position
prop to handle position utility classes. - Added
.text-line-through
utility class for line through decoration - Added
button
prop to Anchor component to toggle button styles - Fixed modal footer bg variable usage
- The Modal.Header now uses the
close
props (instead ofClose
) as the flag to render a close element, and internally renders theModal.Close
subcomponent instead of the Close prop. - Dropdown util
.dropdown-menu-right
renamed to.dropdown-content-right
to align with subcomponent naming. - All Active.Trigger subcomponent classnames have been renamed from
.elem-toggle
to.elem-trigger
to align with subcomponent naming.
-
Fixed mx/y and px/y props failing to return appropriate styles
-
Added the ButtonGroup component 🎉
-
Added
.justify-content-evenly
class to match Flex justify propevenly
-
Added
$font-size-monospace
SASS var -
Active elements now accept a
size
prop that will include an.element-size
className -
Dropdown Sass vars added for size variants:
$dropdown-font-size(-sm/lg), $dropdown-font-weight(-sm/lg), $dropdown-item-padding-(x/y)-(sm/lg)
- Remove references to
prop-types
in lib src - Fix publishing references
-
The updated atomic styles handling passes values directly through, so spacing number values are no longer converted to classNames,
eg:
m={3}
will now returnmargin: 3px
instead ofclassName="m-3"
-
The
content
styles are no longer included by default in the basecomponentry
styleset. These styles have not been evaluated and are completely opt-in now. -
The
size
mixin has been deleted. It doesn't seem to be needed...
- Added a Block component to complement the Flex component
- Added componentry library atomic styles utility in
/src/utils/componentry
- Added initial library typings for Active, Button and Dropdown components
- Added
border
border color to create a utility border class - Fixed the Active.Trigger elements failing to render anchor nodes when passed an href.
- Fixed items with tabindex showing outlines on click
- Added
.flex-basis-0
and.flex-basis-1
atomic classes - Added
.min-100vw
and.min-100vh
atomic classes for working with page level containers - Moved all typography related classes to
/atomic/text
- Refactored subcomponent assignment to be more explicit
- Following the pattern of explicit classNames usage, the outline button variant is now used without the color modifier class. The color modifier class and the outline class are not additive, so it doesn't make sense to use them in an additive way. The outline prop now takes the color of the outline button!
- The
btn-container-<x/y>
classes have been added to automatically create spacing between buttons in a container. - An issue where using the FaCC render pattern with active containers wouldn't render the containing wrapper is fixed.
- The text utility class
.suppress-text-decoration
was added.
- Button disabled theme vars have been replaced with the new state maps.
- State maps added to buttons and alerts to allow granular overrides by theme color and state.
- Anchor styles updated to style active and disabled states.
- Library no longer inserts CSS Variables by default, they can be used for SASS vars where needed.
- Fix using
defaultProps
overriding context - Add
btn-bg-states
config mechanism - Add `Input component
$icon-color
variable added to define default icon color.- Active.Trigger components handle button style API props.
- The Button
link
prop is renamed toanchor
. This more closely reflects the use of classesbtn-link
andbtn-anchor
. - The Icon component now adds class
icon-NAME
instead oficon NAME
. This is to ensure icon classes are always properly scoped and prevent issues for icons with ids likealert
. - The library now uses size props
sm
andlg
for all size classes. This is breaking for Button and Modal component.
- Components with mouse events can now be disabled with prop
mouseEvents
- Button component now supports all typography props
- Close
$close-decoration
and$close-hover-decoration
- Modal
$enable-modal-transform
- Type props added to Button and Type components
$btn-disabled-border
fixed to$btn-disabled-border-color
- Modal header is now align to flex start instead of center
- The active trigger factory no longer uses the
Button
component as the render element. This fixes issues with Button context being applied to incorrect elements, but also means you can no longer use Button api props directly with active triggers unless you use anas={Button}
. Adding these props back is planned. - Nav.Item classes have been updated to match List.Item classes. Previously the
nav item classes were targeted at anchors, the new
nav-item-action
class is targeted at anchor and button elements. - Tab component styles have been completely rewritten. They're more explicitly mapped to the Tab component, and have more theming variables available.
- Modal theming for header, title and footer
- Modal body clicks are now managed with a stop propagation handler on the modal body.
- All library components now support space util props.
- The
Text
component has been added and shares the same API as theAnchor
andHeader
compoents. These type components are considered stable enough to begin using and tracking changes against. - Theme variables
background
andforeground
added to simplify dynamic theming of type elements.
- Button custom mixins have been replaced with appropriate SASS variables
- Anchor styles have been moved out of
reboot.scss
intoType/anchor.scss
- Reboot styles have been condensed to only output one ruleset per element to clean up debugging.
- Packages
hoist-non-react-statics
andprop-types
have been removed from project dependencies and peer-deps.
- React 16.3 now required!
- Alert and Button outline classes refactored to work WITH color classes instead of REPLACING them.
- Use React context
- Component factories required for clarity and consistency
- Element factory refactored to only handle returning JSX
- Theme, Active, and Visible states/data separated into individual HOCs
See the v3 migration doc for in progress updates.
- Popover content alignment styles fixed for left direction popovers.
- Active.Trigger components now accept a
decoration
prop that is rendered after the component children. The ThemeProvider can be used to include a decoration in all instances of any trigger component by default. - The ModalHeader component now accepts a
Close
prop of type component that will be passed anonClick
that will call the modal instance'sdeactivate
prop. The ThemeProvider can be used to set the Close component for all modal headers by default.
- Ensure svg icons show in Safari with
xlinkHref
- Styles for right aligned menu added to the dropdown styles.
- Dropdown chevron icon flip added to Jetpack collection.
- Corrected npm publish ignore files.
- Fix checking list group children props validation.
Componentry v2 is the first stable release of the library (lesson learned: be cautious initializing packages at 1.0.0). Going forward any change to component APIs or classes or any change to the Bootstrap styles will follow semver and be considered breaking changes.
- All non-essential styles have been moved to the Jetpack collection. This collection allows us to provide useful enhancements and utility classes in an opt-in fashion.
- So. much. documentation. goodness. 📖 🎉 💯
- ✨ New
<Close />
component 🎉 - ✨ New
<Icon />
component 🎉 - Utility gray classes for backgrounds, borders and text added to
jetpack/grays
. - Library
no-scroll
class added to replacemodal-open
, theno-scroll
class can be used by any component that needs to freeze scroll (eg freeze scroll on mouseenter for scrollable dropdowns)
- Modal
ariaTitle
is removed, theModal.Title
component should be used with classsr-only
for modals without visual titles.
- Update Bootstrap styles to v4 🎉
- Poppers now use a content container to create a positioned ancestor with width equal to popper max, this allows removal of hacky width calculations inside the popper content component 🎉
- Props and context classNames passed through to
<NavItem />
- Bundled Bootstrap styles updated to Bootstrap v4 beta.3
- Modal component updated to better align with Bootstrap
- Update of Bootstrap styles includes all breaking changes made in the Bootstrap beta.3 update
- The modal component uses the
<Fragment />
component with the modal and modal-backdrop as siblings with no root. React with Fragments (^16.2) required
- Body is now frozen on modal open allowing long modals to scroll.
<Alert/>
components now render visible by default. ThewithActive
HOC has been updated to accept adefaultActive
configuration to enable this.
- The
<State/>
component has been renamed to<Active/>
for better semantics. - The
withState
HOC is removed. The<State>
component supports yielding active state and handlers through function as a child.
- Display names for
Alert
,Modal
andModalTitle
components fixed. - Correctly handle passing active props directly to
withState
. - Remove event listeners in
state-container
components oncomponentWillUnmount
.