All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog. Currently, this project is using an 0.x versioning system to indicate its preview status. As such, it does not currently adhere to Semantic Versioning. Once we reach production readiness, we will
follow semver beginning with our 1.0 release. In the meantime, please read this changelog for information on breaking changes!
- Tooltip: fix unexpected truncating and breaking of tip content in Safari [#1736]
- Avatar: fix infinite loop when
imageprop missing and gravatar fails [#1733] - update Input actions to have align-items: center [#1731]
- update styled-components to v5.2.0 [#1728]
- update http-proxy to v1.18.1 [#1727]
- update read-only checkbox styles [#1727]
- update read-only select styles [#1727]
- Use not-allowed cursor to components in read only mode [#1716]
- Add new icons. [#1717]
- (Breaking 💥) Updated to styled-components v5 [#1697] (See the Upgrade Guide for changes required.)
- (Breaking 💥)
CssBaseline: AddedCssBaselineComponent to render global styles [#1699] - SSR Support: [#1704], [#1703], [#1702]
- Icon: added
danger-fillicon. [#1701]
- Form.Field: Add
requiredprop. [#1695]
- Select: Add
onFocusandonBlurprops. [#1693] - TextArea: Add
name,onFocusandonBlurprops. [#1692]
- Update dependencies. [#1691]
- Add
lodash.isemptymissing dependency in the published package. [#1689]
- Fix not being able to remove and add the same file in FileInput. [#1665]
- Fix extra rendering in FormGroup. [#1678]
- Adds deprecation text to the ResourceList and Stack components. [#1659]
- Remove empty element from FileInput when there are no files. [#1667]
- Change '0 files selected' to 'No files selected' in FileInput. [#1666]
- Added TSLint. [#1654]
- Fix icons library referencing in documentation. [#1658]
- Fix typo in RowLayout documentation. [#1671]
- Fix symlink error with Yarn in CircleCI. [#1686]
- Alert: Remove
typeprop in favor ofappearance. [#1655] - Text: Always return a
<span>element as root. [#1653]
- Security: Updated
lodashto 4.17.14. [#1647]
- Introduced FileInput component [#1646]
- Docs: Added more examples for Checkbox [#1648]
- Docs: Added plain examples of Form.Field [#1644]
- Docs: Limit exposure of prop switching to string literal union types [#1641]
- Cache metadata for faster rebuilds in development mode [#1640]
- Reset missing metadata component count in console warnings on recompilation [#1637]
- Icon: Add 'groups' icon (#1634) (#1635)
- EmptyState: Add JSX support. [#1632]
- Breadcrumb: Accessibility improvements. [#1621][#1624]
- Icon: added 'brand-aws', 'brand-firebase' icons. [#1622]
- Updated typo in the Table documentation example. [#1616][#1618]
- Update node and yarn versions in the CI server. [#1620]
- Update
webpack-dev-serverto the latest version. [#1617][#1619]
- Icon: added 'page', 'page-check', 'page-minus', 'page-add' and 'brand-apple' icons. [#1609]
- Icon: added "eye" and "eye-slash" icons. [#1606]
- Pager: Do not enable next page if there are no items. [#1604]
- Icon: added "layout-col-left" icon. [#1598]
- TextArea: add
valueanddefaultValie,spellChecknative input props. [#1590]
- Select: add
chageOptionsand pass down to react-select. [#1590] - TextInput: add
autoComplete,autoCorrect,spellChecknative input props. [#1590] - Pager: add
showInfoboolean property to allow no info mode between the controls. [#1592]
- Pager: fix issue where
onPageChangedprovided function would not be called. [#1592] - Docs: fix typo on import line for
Linkcomponent. [#1588]
- Pager: change
pageproperty to be required. [#1592] - Pager: change Newer / Older buttons to be disabled when on first / last page. [#1592]
- Pager: improve internal test coverage. [#1592]
- Docs: improve
Listcomponent docs. [#1569] - Internal: moved to CircleCI for CI/CD. [#1580]
- Select: add
autoFocussupport. [#1586] - Icon: added
expand-arrows,compress-arrows,history,lock-cancel,lock-check,reload-cancel,reload-check,keyicons. [#1583]
- Select: pass down
nameproperty to react-select. [#1586]
- [Text Input] Add
onBlurandonFocusnative input props. [#1584]
- [Avatar Block] Fixed issue with title prop typing.
- [Alert] Fixed issue with title prop typing.
- Refactored Cosmos using Typescript. [#1576]
- List: Cover other drawer related helper functions on check for null. [#1571]
- Select: Add custom value renderer option. [#1553]
- Select: Improve styling to match design system specs. [#1563]
- List: Fix null handling in List.Drawer. [#1568]
- List: Fix React Fragment custom props warning (onItemClick). [#1565]
- List: Use hooks to handle drawer internal state. [#1566]
- React: Update to v16.8.4. [#1558]
- Avatar: Fix avatarUrl helper and add tests. [#1561]
- Navigation: Fix submenu not being opened when subitem is selected. [#1560].
- Avoid displaying a native tooltip in elements with a
titleprop. [#1557].
- Introduced new List component (experimental). [#1364]
- Select: add
getOptionValuesupport. [#1555]
- Do not try to clone null elements. [#1554]
- Navigation: Add null checks. [#1551]
- Navigation: Add
targetlink prop toNavigation.Item. [#1549]
- Form.Field: Do not require only one child [#1547]
- Introduce Navigation component. [#1539]
- Select: Add async support. [#1538]
- EmptyState: Add variant without actions. [#1543]
- Make cosmos locally linkable. [#1476][#1484]
- API: Consistent appearance prop. [#1488]
- Docs: Remove automation glossary. [#1545]
- Forms: Internal output improvement. [#1468]
- Alert: Component is no longer unstable. [#1544]
- Field: Fix field actions prop type to support raw buttons. [#1531]
- StackLayout: Check for null when distributing children spaces. [#1532]
- Select: Use
react-selectwrapper only onmultipleand/orsearchableselects. [#1528]
- Layouts: avoid rendering empty children. [#1529]
- Select: Fix dialog overflow when using a
react-selectbased Select. [#1527] - TextArea: Add a space when using actions in Textarea. [#1523]
- Select:
react-selectwrapper. [#1512] - Tooltip: new variant for input action tooltips. [#1522]
- Docs: Display Layouts section [#1510][#1511]
- PageHeader: Support passing React nodes as
title. [#1518]. - Avatar: Add image resolution failover. [#1515]
- Docs: New authoring guide. [#1513]
- Docs: Document build pipeline. [#1514]
- Form.Field: Automatically add id to fields. [#1439]
- Checkbox: Improve
readOnlyvisual state. [#1517]
- Image: Rename
sourcetosrc(via soft deprecation) [#1505] - Switch: Rename
onToggletoonChange(via soft deprecation) [#1506]
- Tooltip: Use Popper.js' position fixed mode. [#1501]
- Sidebar: Fix styles not changing when selected link prop changed. [#1500]
- Sidebar: Fix sidebar linkgroup item colored when open but no subitems selected [#1498]
- Tooltip: Apply z-index back to Tooltip Element [#1497]
- Dialog: Revert Composable actions for Tabs in Dialog [#1496]
- Icon: Fixed typo in icon ‘brand-weibo’ [#1495]
- Docs: Start migration guide [#1490]
- Dialog: Composable actions for Dialog + Tabs [#1458]
- Sidebar: Fixed selected color for Link group and added basic stories [#1493]
- Select: Allow using empty string as a value [#1483]
- Checkbox: Fix onClick event firing twice [#1473]
- ResourceList: Add check for onItemClick [#1491]
- ResourceList: Fix Item body width validator [#1481][#1482]
- Layouts: Update gutter sizes prop-type [#1480]
- Table: Fix story image source [#1479]
- Remove sketch files [#1485]
- Layouts: Fix rendering undefined/null children nodes. [#1470]
- PageHeader: Support buttons as actions in Page Header [#1429]
- Checkbox: Fix case when label is too long [#1462][#1466]
- Tooltip: Make it accessible [#1372]
- Tooltip: Fix popper.js warning in console [#1448][#1450]
- Switch: Make it have a consistent width [#1449]
- Docs: Add prop replacement right next to deprecated prop [#1435]
- Base for Tokens v2 [#1431]
- Add event handler tests for molecules [#1459]
- Add replacement to deprecation warning (in dev console) [#1434]
- Adds new sizes for gutters [#1464]
- Tabs, List: Fixed list bullets appearing in apps that use Styleguide along Cosmos.
- Tooltip: Use react-popper instead of a custom solution [#1371]
- ResourceList: Fix item being undefined on onClick and onItemClick, fix onItemClick being fired on action onClick [#1443]
- Form.Field: Implement new API based on RFC [#1287]
- Release proces: add quick guide [#1397]
- Testing: Test event handlers [#1311]
- Added missing icons [#1406]
- IE 11 fix: Use insertBefore instead of prepend in global style injection [#1412]
- Form.Label: Replaces the default value to be an empty string [#1411]
- Sidebar: Add object branch presence check [#1420][#1423]
- Page Header: Fixed link hover and added stories [#1409]
- Radio: Fix onChange callback firing twice [#1403]
- Icon: Re-uploaded user-add icon [#1428]
- Pager: Do not enforce totals [#1404]
- Adds StackLayout [#1363]
- Icon: Add “application” icon. [#1401]
- Alternate implementation for uniqueId: This improves snapshot testing experience by removing random hashes from components attributes. [#1374] (Warning: You may need to update some snapshots and remove any uniqueId mock.)
- Breadcrumb: Fix automation attribute naming. [#1309] (Warning: You may need to update some tests.)
Breadcrumb change
We have renamed the Breadcrumb.Link automation attribute from this:
<a data-cosmos-key="link">clicky</a>
to this:
<a data-cosmos-key="breadcrumb.link">clicky</a>
Please update your tests (if any) accordingly.
UniqueId helper change
In the past, we used to randomly generate an id for some attributes that were required to link components. Now we're using a global counter, which will lead to improve snapshot testing since each test is run in an isolated environment, and then each test run will have a fresh and pure start.
If you were using a mock for uniqueId as a workaround:
jest.mock('../../../core/components/_helpers/uniqueId', () => () => 'abcdef1234')Please, remove it since is no longer needed.
- Radio: Fixed rendering of label [#1393]
- Testing: Custom prop tests [#1308][#1312]
- ResourceList: Adds a prop to set the width to the resource list body [#1314]
- Image: Images are now responsive by default [#1244]
- Image: Added fit properties to scale images to a container proportionally [#1244]
- Avatar: Images in avatar fit to cover the container. This allows to display portrait and landscape images inside the avatar. [#1244]
- (Internal) Layouts: Row, Gallery, Columns and Page [#1282]
- Icon: Fixed chevron up not facing up [#1391]
- Tabs: Quick aria labels fix [#1375]
- Tooltip: Adds z-index to tooltips [#1369]
- Security upgrades [#1387]
- Move actions API to Input [#1281]
- Sortable Resource List [#1098]
- Integration tests for Tabs [#1278]
-
Implement attrs to styled API [#1263]
-
Make Tabs accessible [#1264]
-
Examples: react + react-dom should have same version [#1284]
-
Tooltip: Fix wrapping for long text [#1262]
-
Fix dialog [#1260]
-
Fix react router dom dependency [#1300]
-
Fix Resource List columns [#1192]
-
Fix docs links [#1280]
-
Fix version switcher [#1256]
-
Fix button action onClick handler not including the item [#1276]
-
Internal: Clean up code for masked TextInput [#1283]
-
Internal: Add module to all stories [#1288]
- Internal: Massive find and replace for styled [#1249]
- Remove line height declaration on tables [#1286]
- Replace extend with styled [#1279]
- Remove pointer events from icon [#1298]
- Changes the Page Header from grid to flex [#1285]
- Fixes dialog not catching pointer events [#1260]
- Switch: Add support for label position by @m4tr1k + alignment fixes [#1171]
- Styling: Add styled-components-with-helpers [#1208]
- Styling: Add styled-margin [#1248]
- Responsive PageHeader [#1138]
- Fix FormGroup warning when only one child is passed [#1221]
- Select arrow icon color fix [#1220]
- Switch.onToggle stopPropagation of event [#1233]
- Added stories around page header [#1230]
- Updates dropbox icon [#1240]
- Upgrade to latest 3.x styled-components [#1241]
- Removes space when the switch label is empty [#1234]
- Removes pointer events on the overlay component [#1243]
- Fixed accordions in Contribution guide [#1246]
- Manage PoC: Fix Security issue and fix error on example when opening Applications [#1253]
- Fix callHandler is not defined issue in ResourceList [#1210]
- Improved examples in Pagination toolbar docs [#1207]
- Fix appearance of select in Firefox [#1143]
- Docs: Make it easier to add a guide [#1201]
- Docs: Hidden placeholder for layout + overriding guides [#1202]
- Form Actions: Change the role of secondary actions to
button[#1172] - Button: Fix alignment issues in
Buttonwith href [#1178]
- Resource List: Added support for
Buttonasactionsin items (soft deprecation) [#1133] - Internal: Migrate components to dotElement syntax [#1080]: What we did was to migrate all internal subcomponent names. The benefit of this is that we don’t have to export multiple components but only the
Componentand you have all internal subcomponents for free. We kept exportingStyledComponents asComponent.Element's aliases so we don’t break any of your apps. These aliases will be supported until Cosmos 1.0.
- Global styles: Set the global line height to
1.6. [#1176]
- Table: Add support for truncating table cell text [#1011]
- Icons: Add social icons [#1146]
- Dialog: Making dialog responsive and accessible [#1102]
- Examples: Fix warnings in Manage POC by @jvelezpo [#1135]
- Remove out of sync prop-types to typescript declarations module [#1136]
- Icons: Fix indexing of names [ae43a6]
Shoutout to all the hacktoberfest contributions we received!
- Accessibility: Fix focus styles for Tabs [#1055]
- Accessibility: Made checkbox, radio and switch accessible with a keyboard via @DCzajkowski [#1029]
- Accessibility: Makes the list HTML semantically correct [#1028]
- Accessibility: Make tabs accessible by @jvelezpo [#1052]
- Alert: Match styles of close button with styleguide by @mrewers [#1031]
- Avatar: Batch of fixes and enhancements! [#985]
- Button: Fix vertical alignment in button and it's uses [#947]
- Button: Fix margins for Safari [#1020]
- Pagination: Fix selected state for pagination button [#1061]
- Pagination toolbar: Hide toolbar if there are zero items by @astanciu [#1051]
- Table: Make the field prop optional [#1088]
- Table: Table columns can not be passed as a variable by @sanketsingh24 [#1035]
- Docs: Fix typo in contribution guide by @Gotham13121997 [#1022]
- Docs: Improve readme with material from docs website by @Tranquilled [#1039]
- Docs: Fix
Form.Radioexample by @jvelezpo [#1032] - Docs: Make experimental notice permanent via @lopno [#1030]
- Docs: Fix sidebar scrolling in Firefox by @fer22f [#1027]
- Examples: Match names from manage dashboard by @rkhoriander [#1034]
- Examples: Fix typo in webpack-hello example by @radlinskii [#964]
- Table: Add width prop to Table Header [#1053]
- Select: Add disabled + disabled options + groups by @rakhi2104 [#1067]
- Icons: Improve precision for svg optimisation [#1095]
- Icons: Added UI icons (policy, ip address, email, database, block) [#1122]
- Icons: Added UI icons (add user, usage, search, chevron up, arrow up, arrow down)
- Docs: Adds system guidelines [#1079]
- Fix compatibility issue with
cosmos-fonts[#1015]
- Add LICENSE file: MIT [#1011]
- Component: New
Spinnervariants (small, medium, large) [#939] - Component: Introduce loading state for
Table[#978] - Icons: Added undo icon [#968]
- Icons: Added more icon [#984]
- Docs: Add example for
actionsinTable[#982]
- (Breaking 💥) Move fonts to a different package [#991]
- Icons: Fixed lock fill icon [#968]
- Components: Add support for icons in Alerts [#919]
- Components: Add placeholder for
Select[#934] - Icons: Add missing icons for manage [#953]
- Documentation: Add option to switch between versions [#945]
- Components: Add support for icons in Alerts [#919]
- Components: Add placeholder for
Select[#934] - Icons: Add missing icons for manage [#953]
- Documentation: Add option to switch between versions [#945]
Alertdoesn't break with no children/text [#930]- Enforced
Iconsize to fix icon vertical alignment [#931]
- Make
descriptionoptional inPageHeader[#885] - Support
targetin link forEmptyStateandAvatarBlock[#771]
- Fix vertical alignment of actions inside
Input[#866] - Fix selected tab color for
Tabs[#886] - Fix margin for single button in
ButtonGroup[#905]
- Component: Danger Zone (experimental) [#847]
- Table: Add support for a Table that isn't sortable + improve documentation [#865]
- Docs: Fix production version + implement cache busting [#876]
- Testing: Adding support for attributes for automation [#850]
- Manage Example: Update Page Header usage [#822]
- Pagination toolbar: disable buttons on edge pages & hide on one page [#845]
- Docs: Add deprecated tag in prop table [#852]
- Table: Improve interactivity of rows [#830]
- Website: Fix nav version in navigation [#834]
- Page Header: Fixed learn more arrow icon on hover [#844]
- Style and documenation improvements for
Pagination[#750] - Add automatic sorting for
Table[#758] - Support free texts in Page Header, Empty State and Alert [#782]
- Primary action handler is now optional in
Form[#790]
- Fixed styles for
Breadcrumbs[#773] - Fixed background color for loading states in
Button[#777] - Fixed border color for input to match Manage [#786]
- Fixed alignment for
AvatarBlockwith link [#810] - Fixed issues with global styles and resets in styleguide [#814]
- Add support for multiple links in
Breadcrumbs[#695] - Added click handler props to ResourceList and Table [#735]
- Add document playground for folks to report issues [#738]
- Add support for
sizeprop toTextInput[#739]
- Unstable: Style improvements to
Pagination[#741] - Bring manage PoC closer to real manage [#745]
- Pass
Formactions through to underlyingButton[#718] - Fix
Buttonappearance with url prop [#728] - Fix wrapping for long text in Button [#751]
- BREAKING: Fix state updates inside
Tabs(end support for uncontrolled state) [#754]
- Fix deployment tooling [#726]
- Add
Checkboxcomponent [#612] - Add support for disabling actions in
ResourceListItem[#647] Avatarnow accepts an<svg>for its image prop [#650]- Support
<Button/>in dialog actions [#660] - Alerts can now be dismissed [#688]
- Support text in
loading+successstate forButton[#714] - Add option to disable global styles [#719]
- Add documentation for using
styled[#629] - Unstable: Pagination component base [#666]
- Add documentation for contributing components [#638]
- BREAKING: Use color name instead of hex codes for
Icon[#684] - DEPRECATED: Replace input
errorprop withhasError[#690] - Rename clients to applications in manage PoC [#636]
- Change
Overlayto be a hidden component [#693] - Make the sidebar foldable in documentation [#686]
- Update PoC link in docs [#646]
- Default
<input>totype=text[#691] - Fix
styledexport [#701] - Fix form layouts leaking into each other [#716]
- Unstable: Added
Badgecomponent. [#548] - Unstable: Added
Tagcomponent. [#549] - Unstable: Added
AvatarBlockcomponent. [#561] Tooltipnow supports newleftandrightvalues for thepositionprop. [#576]Stacknow supports aspace-betweenvalue for itsalignprop, resulting in behavior similar to the flexbox property of the same name. [#591]Tabsmay now optionally operate as a controlled component via newselectedandonSelectprops. [#585]- Cosmos now exports its copy of styled-components to avoid conflicts where consumers would use their own copy. [#614, #610]
- Added TypeScript definitions for all components. (Thanks @jcenturion!) [#632]
- BREAKING: Actions have now been standardized across the library. Any actions which previously expected a
textproperty now expect alabelproperty instead. [#559] - BREAKING:
Thumbnailhas been removed, and its functionality has been merged withAvatarfor simplicity. [#561] - BREAKING:
Formnow supports only a single destructive action via thedestructiveActionprop, which replaces the previousdestructiveActionsprop that accepted an array of actions. [#601] - BREAKING: React
16.xis now referenced as a peer dependency to avoid conflicts. [#604] - Reorganized code, making docs and examples independent from the core library. [#575, #607]
PageHeaderwill now render a secondary action even if there is no primary action specified. [#590]- Switched to nps to manage scripts that had previously been in
package.json. [#615] - Replaced placeholder screenshot for
Dialogwith a real working example. [#620]
- Fixed issue with
Radio.Groupresulting from filtering children by type. [#581] - Fixed various PropTypes validation warnings. [#582]
- Fixed issue where sidebar groups would not display as open even when a child was marked as
selected. [#583] - Fixed issue where the search in the documentation sidebar would throw an error in response to certain user input. [#593]
- Fixed issue where form inputs would lose their styling when surrounded by container elements [#619]
- Fixed issue where the preview in the documentation sandbox was not being correctly updated in response to user input in the props table [#637]
- Fixed misalignment of tooltips on
Buttons. [#617]
- Fixed problem where fonts are not loading [#571]
- Added
Radiocomponent to Forms [#511] - Added
Labelcomponent [#544] - Added support for custom Form fields [#530]
- Added prop to make tooltips visible by default [#562]
-
BREAKING
methodhas been renamed tohandlerfor all components that accept actions as a prop [#551]<Form.Actions primaryAction={{ label: 'Save Changes', handler: () => {} }} />
-
Documentation improvements for
EmptyStateandAlert[#491] + [#534]
- Added missing id to Switch for accessibility [#558]
- Fixed path for tokens in helpers [#564]
- New information on defaults and required fields in docs [#533]
- Fixed persistent warning in
Form.Actions[#529]
- Unstable: New
ResourceListcomponent. [#504] - Unstable: New
Tablecomponent. [#519]
- Expanded routes in Manage proof of concept to permit additional pages to be added. [#503]
Tabscomponent now ignoresnullchildren instead of throwing an error. [#518]- Fixed incorrect layout of "Learn More" link in
EmptyState. [#514]
- BREAKING Make cosmos babel preset an optional dependency [#497]
The babel preset is no longer available in
@auth0/cosmos/babel, use@auth0/babel-preset-cosmosinstead - An improved client list for manage proof of concept [#441]
- Better naming + urls [#493] and permalinks for docs[#492]
- New
ctaappearance forButton, to be used for primary calls to action. [#425] - New "link mode" for
Button. Passing anhrefprop toButtonwill cause it to render as an<a>instead of a<button>. [#425] - Unstable: New
AvatarandThumbnailcomponents. [#398] - Unstable: New
Textcomponent for styled text. [#392]
- BREAKING: Colliding Boolean props governing appearance of
Buttonwere replaced with anappearanceenum. [#400] - BREAKING:
line-height: 1.6has been moved from global reset to a scope specific to cosmos components