calcite-design-system

⚠ BREAKING CHANGES

• calcite colors updated to v6.0.0 - this means several colors have new names, now. See the calcite-colors v6.0.0 release notes for more
• the two assets directories have moved to calcite/assets/calcite-date-picker/nls/ and calcite/assets/calcite-icon/ respectively
• rating: display-value => show-chip, also works now (#1481)
• date: Separate Date picker from input (#1404)
• All boolean attributes were updated to conform to the HTML5 spec, namely:

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

The following props were changed:

• calcite-action-bar + calcite-action-pad: dropped expand in favor of expand-disabled
• calcite-date: dropped proximity-selection in favor of proximity-selection-disabled
• calcite-link: removed user-select since it is not used by the component
• calcite-slider: changed default of snap to false

Features

• calcite-input: Allow setting "any" on step attribute for calcite-input (#1488) (f0dcfca)
• combobox: single select mode (#1482) (d0960d6)
• input-message: allow custom icons (#1433) (00dbad9)
• radio-group: pass selected value in change event (b6db8a8)
• unify all assets in distributable output (#1457) (31be391)

Bug Fixes

• calcite-checkbox: hidden input can no longer be forced to display with external css (#1483) (09985be)

• calcite-shell: Remove padding in the calcite-shell footer slot (#1505) (09be738)

• date: Separate Date picker from input (#1404) (dd10e9c)

• date-picker: Don't emit range change events on outside prop edits(#1484) (#1494) (a39eeb7)

• date-picker: Update placeholder text for all languages (#1265) (#1480) (55b6aff)

• date-picker, input-date-picker: fix hover style of date range, fix date demo page (#1486) (e62be93)

• date-picker, input-date-picker: fix missing range color, update demos (#1493) (e256508)

• deps: move runtime deps to dependencies (#1495) (4bdfd76)

• rating: display-value => show-chip, also works now (#1481) (7bfc32a)

• ensure boolean attribute usage is spec-compliant (#1411) (b82028d)

⚠ BREAKING CHANGES

• fab: default scale property to medium (m). #1427 (#1436)

Features

• color: allow setting color value format (#1439) (ccd5aed)
• color, color-hex-input, color-swatch: add support for no-color (#1410) (3affc0d), closes #917

Bug Fixes

• calcite-radio-button: radios now properly deselect when the selection changes while wrapped in a parent shadowRoot (#1422) (968a4e9)
• date: start Slovak calendar week on Monday, not Sunday (#1429) (5ffa56a)
• dropdown: use handler event argument (#1451) (49038ec)
• fab: default scale property to medium (m). #1427 (#1436) (027369c)
• label: enforce directionality with new alignment prop (#1428) (61b3d68), closes #1296
• modal: fix styling on mobile safari (#1412), use tailwind (#1440) (9618d03)
• radio-button: Add check for existing input before setting attribute (#1442) (8dac865)
• rating: clicking on a wrapping calcite-label focuses a rating item (#1432) (31ae80e)
• select: handle case where mutation observer fires before internal select is stored (#1441) (587be76)

⚠ BREAKING CHANGES

• date: date component no longer supports setting in input proxy
• button: Remove floating property from calcite-button in favor calcite-fab component. #1167 (#1299)

Features

• a11y: Adds aria labels to required roles (#1327) (e0d8fe3)
• action-bar, action-pad: Add setFocus method for the expand toggle #974 (#1309) (1d13c39)
• button: add alignment property (febaf82), closes #1267 #1267 #922 #922 #922 #922 #922 #922 #922 #922 #922 #922 #922
• card: Adds checkbox label props for selectable cards (#1307) (9a841b1)
• color: allow color input nudging by using ⬆ ⬇ (+shift) keys (#1295) (de83fa8), closes #866
• combobox: add custom-values prop that allows free entry of new tags (#1414) (ac8ecbd), closes #558
• combobox: add max-items prop for combobox (#1361) (bf471b0)
• combobox: improved interaction, a11y support (#1407) (13679fc), closes #1181
• date: support range in calcite-date (#1136) (1ee98d5)
• panel: setFocus to back button on calcite-panel. #1277 (#1293) (61023ff)
• select: add selectedOption convenience prop (#1339) (bb4b537), closes #1250
• tooltip, popover: Make Tooltip ❤️ Popover (#1351) (509afa6)
• tree: Update indicator styling (#1281) (94d7a83)
• value-list-item: add event emitter to value-list-item (#1311) (e8bddd0), closes #1306

Bug Fixes

• button: Remove floating property from calcite-button in favor calcite-fab component. #1167 (#1299) (ceac7b6)
• calcite-checkbox: space key works again on Firefox (#1291) (c83c003)
• calcite-dropdown: calcite-dropdown-item uses unsupported ARIA attribute (#1386) (8e4a4a6), closes #675
• calcite-label: label no longer gets repeated when re-rendering in preact apps (#1369) (5843b5f)
• calcite-radio-button: converting radio-button to a scoped component for simpler rendering which fixes re-rendering issues in maquette apps. (#1344) (6a5b83a)
• date: solve rerender issues in some timezones (#1111) (#1347) (27dfeb2)
• dropdown: Dropdown on RTL page causes long horizontal scroll #1381 (#1387) (236faa7)
• dropdown: Emit close event on trigger click (#1326) (236142b)
• dropdown: Set dropdown scale to 0 when inactive. #1381 (#1403) (971061a)
• icon, link: improve a11y markup for screen readers (#1337) (2cb97cd), closes #646
• input: Prevent error when changing the 'step', 'min', or 'max' properties. #1389 (#1390) (726554a)
• modal: Allow modal to focus on calcite components. (#1382) (7f6e2d7)
• modal: Remove overflow class when modal is removed from DOM (#1396) (80828af)
• pagination: point arrows the correct direction in RTL (#1342) (6063742)
• tab-nav: change rtl tab indicator position to fix nested layouts (#1393) (d00f920)
• tab-nav, tab-title: fix tab icons and active tab highlight in rtl (#1385) (bf0fffd)
• tab, tab-title, tabs: Emit unregister events on the document. (#1372) (a38647f)
• tooltip-manager: Fix race condition between focused and hovered … (#1315) (8057d51), closes #1269
• remove duplicate beta.42 entry from CHANGELOG (#1280) (cbbe345)

⚠ BREAKING CHANGES

• link: Remove red, light, and dark variants and color prop (#1237)
• switch: Remove red variant and color prop (#1236)

Features

• link: Remove red, light, and dark variants and color prop (#1237) (205e1af)
• pick-list, value-list: enhance lists to handle item removal (#1229) (d6940c9), closes #1219
• switch: Remove red variant and color prop (#1236) (ac2a17a)

Bug Fixes

• select: ensure select change event fires after render update (#1273) (8225df5), closes #1262
• fixing click issues when using calcite-label with calcite-checkbox and enabling interoperability with native labels and inputs (#1268) (6081b26)
• rating: fix ratings appearing vertically in certain sites (#1266) (c0da43f)

Bug Fixes

• button: Fix loading style in transparent / dark button (#1256) (5bc33a1)
• dropdown: Fix styles in Firefox and Safari (#1242) (e793d66)
• notice: prevent text overflow in smaller notices on ie11 (#1252) (e04108b)
• rating: add props for accessible labels, structure as radio button (#1264) (eb0bdde)
• select: Fix overlapping text with long options (#1239) (93cae17)

Bug Fixes

• date: fix prev/next month buttons not rendering (#1243) (357ade1)

⚠ BREAKING CHANGES

• icon: Updates prop name from "mirrored" to "flip-rtl" to better reflect the functionality

Features

• alert, notice: Allow custom calcite-ui-icon overrides (#1208) (8f57448)
• avatar: new avatar component to display user thumbnails ✨ (#1175) (bb71d6a)
• chip: allow passing avatar as chip image (#1184) (4fec516)
• icon: Update mirrored prop name, add pass-through props (#1132) (0d99dec)
• inline editable inputs: support inline editable text inputs. (#1188) (2443b15)
• panel, shell-panel: adds width-scale default to panel. adds width-scale property and styles to shell-panel (2f85c8e), closes #1107 #1107
• popover: adds flex-direction and slotted styles for panel and flow (31588b3)
• rating: Add rating component (#821) (176c58e)
• tile-select: Add disabled styling for tile select, updates hover and focus style (#1223) (88c2a0e)
• updates a shortlist of components with new font-sizes for each scale (9b09c9d), closes #1186 #1186 #1137 #1186 #1137 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186 #1186
• select, option, option-group: add calcite-select, calcite-option, calcite-option-group components (#1112) (0227cb1), closes #302
• split-button: Add support for appearance (#1141) (79bb81d)

Bug Fixes

• a11y: Fixes for accessibility to various components (#1153) (e3c512e)
• calcite-checkbox: resets to initial checked state when form reset event is triggered (#1154) (01b6b7d)
• calcite-radio-button: all children text nodes render inside a single calcite-label (#1195) (6c8e828)
• calcite-radio-button: last checked wins (#1170) (d64982f)
• calcite-radio-button: radio buttons and groups reset to initial state when a form reset event occurs (#1173) (0251531)
• calcite-tile-select, calcite-radio-button: adding an internal calciteRadioButtonCheckedChange event so that tile-select can restore correct selection styling (#1072) (32c98b2)
• combobox: calciteComboboxChipDismiss event not firing #1179 (#1183) (ef7460d)
• date: use correct props for next/previous month labels (#1122) (#1135) (147520e)
• dropdown-item, dropdown-group: adds missing anchor styles. updates missed group-title styles. (#1206) (723354d), closes #1186 #1186
• icon: Explicitly set dir on components with pass-through flip-rtl (#1148) (5747e0a)
• input: Emit calciteInputInput on clear (#1117) (16fd4f6)
• label: only render id on parent calcite-label (#1120) (11f9589)
• modal: Allow re-opening of modal when close button is clicked (#1139) (2f61d90)
• pagination: fix next button when last page has 1 element (#1180) (#1189) (16acc5d)
• panel: removes default width-scale and lets panel default width to be 100% (9a5a299), closes #1126 #1126 #1126 #1126
• panel, block, block-section: updates font-sizes and refactor block-section toggle to use a button (5eb5805), closes #1131 #1131 #1131 #1131
• select: prevent duplicate entries when updating options and option groups (#1227) (d3de3f0), closes #1226
• shell-panel: adds auto bottom margin to make height dynamic. (#1231) (555c0fa)
• stepper: Fix rendering of styled horizontal stepper content (#1199) (7913404)

Features

• action, action-group, action-bar, action-pad, block, block-section, flow, panel, shell, shell-panel, tip, tip-group, tip-manager: add calcite app components to distributable (#903) (6f8bb6e), closes #687
• calcite-shell-panel: adds detached-height-scale property (5974010), closes #1029 #1029
• tabs: animate active tab underline (#1093) (072b761)
• tile-select: add width prop to tiles for full width option (#1071) (7039f1f)
• tile-select-group: add layout prop for vertical tile select groups (#1020) (#1066) (4c3ca95)
• value-list-item, pick-list-item: adds start slots, uses conventional slot names, removes non-conventional slot names (f410938), closes #1039 #1039 #1039 #1039 #1039 #1039 #1039

Bug Fixes

• block-section: use expand/collapse tooltips as a section's native tooltip. (#1087) (1cea565), closes #1074
• date: stop date from closing on month next/previous buttons in safari (#1091) (937f555)
• label: prevent calcite-input-message from always showing in disabled label (#1095) (2281be4)

⚠ BREAKING CHANGES

• dropping prop validation helps keep components lean and should not be necessary with existing component documentation and typings.

Features

• calcite-radio-button-group: calciteRadioButtonGroup change event (#1056) (662173d)
• date: add full localization support (#585, #979) (#1043) (4c95292)
• date: respect order of year and month in date-header (#908) (#1046) (18ffe9a)
• dom: allow prop lookup to go beyond shadow boundary (#982) (51b2f8e)
• dropdown: Update styling of dropdown groups (#1024) (eb08309)

Bug Fixes

• calcite-radio-button, calcite-checkbox: no longer fires custom change event when the checked attribute is controlled (#1019) (3fabd6d)

• color: initial user-defined value gets set properly (#1038) (0482868)

• date: allow 3 digit years in input #905 (#1047) (8c7717c)

• date: don't fire event on outside value update (#722) (#1053) (3b7912a)

• date: fire date change on interactions with calcite-date-hmonth-header element (#1017) (#1048) (df380eb)

• date: fix display of year in languages with year unit - ja,ko,ch (#907) (#1045) (7f233c0)

• pagination: prev/next disabled, page 1 shown (#1030) (8f17589)

• shell-panel: fixes height styling for panel and flow in undetached shell-panel (#1028) (16c01a5)

• drop prop validation in favor of documentation and types (#954) (3986771), closes #637

Bug Fixes

• calcite-radio-button: fixing issue where input isn't properly initialized in some cases (#1011) (e25921d)
• dropdown: Adjust display of slotted full width buttons (#1013) (511cda0)

Features

• label: Adjust spacing (#956) (63fe1f3)

Bug Fixes

• calcite-checkbox: visibility of hidden input controlled by inline styles to prevent outside CSS from affecting its display (#999) (c29585a)
• color: ensure color object values are rounded (#883) (de9b242)
• dropdown: fix item selection when dropdown is in a shadow DOM context (#995) (dc843db), closes #992
• tooltip: Add a11y improvements for hovering over a tooltip (#987) (6705110), closes #938
• tooltip: Keep tooltip visible if focus occurs after hover #938 (#1005) (9df2502)

Features

• calcite-label: adds disable-spacing property also updates label-text spacing (2cca2c6), closes #916 #916
• label: Adds disabled prop to label, radio-group (#923) (cc34b51)
• label: Updates alignment and spacing (#914) (943e5c2)
• split-button: add secondary click event (#889) (bb3b141)
• tabs: add tab-title disabled state (#879) (adef10f)

Bug Fixes

• dropdown: fix tab through (#880) (acbef6f)
• input: emit calcite input input on up and down click on number input #886 (#888) (01a140b)
• input: No longer set clearable by default on type date or time (#895) (d5d9d6a)
• tree: change tabindex to 0 to prevent forced first tab stop on page (#911) (ef4a7ad), closes #634

Features

• calcite-checkbox: label support (#849) (30db0f3)
• color: allow hiding sections (#841) (f31fbb3), closes #763
• input: Update default icon of input type email (#865) (be42e9e)
• switch: add disabled prop (#856) (d00cb5e)
• tabs: Add support for content positioning (tabs can now be positioned above (default) or below the tab content with the position prop) (#809) (3b0fc79)
• tabs: Add support for icons in tab-title (tabs can now be positioned above (default) or below the tab content with the position prop) (#807) (5afc650)
• tooltip: Dismiss calcite-tooltip via ESC key #877 (#878) (5b2262e)

Bug Fixes

• calcite-checkbox: cleaning up hidden input when checkbox is unmo… (#813) (2bc35e8)
• calcite-icon: Fixing issue where calcite-icon being rendered in a flex container wasn't sizing properly or not appearing at all. (#805) (2b1c528)
• calcite-radio-button: removing css class on host element (#854) (831b9f4)
• color: ensure color change event is emitted when color is modified via API or interaction (#881) (13d796f), closes #822
• input: Removed calciteInputInput event on componentWillUpdate (#830) (10ccd62)
• loader: ensure fallback id for loaders is generated properly (#836) (9136777)
• pagination: prevent page one rendering twice when total is smaller than num (#835) (bbc74a0)
• storybook: fix split button storybook (#794) (da8f90a)
• storybook: fix stepper storybook (#793) (685cea1)
• tabs: ensure proper ARIA roles (#832) (12467a7), closes #831

Added

• Added custom element bundle for tree-shaking bundlers like rollup
• calcite-color - new appearance prop to support embedded use case (#750)

Fixes

• calcite-dropdown - fix regression where multiple triggers didn't work (#774)

Fixes

• Added @types/color as a dependency, so public types resolve properly

Added

• New component calcite-color
• New component calcite-color-hex-input
• New component calcite-color-swatch

Fixes

• calcite-modal - fix styling for modal when there are no footer buttons
• calcite-popover - prevent tooltip-manager selector conflicting with popover-manager selector
• calcite-tabs - uses proper aria-labelledby attribute

Breaking Changes

• calcite-alert - open and close methods have been removed. You can use the active prop to open or add an alert to the queue.
• calcite-alert - currentAlert prop has been removed
• calcite-alert - alertQueue prop has been removed (queue is emitted as a detail of the calciteAlertOpen and calciteAlertClose events)
• calcite-alert - alertQueueLength prop has been removed

Fixes

• calcite-modal - turn off pointer events on hidden modals to prevent interaction (#549)

Added

• calcite-modal - add background-color property for light grey backgrounds (#527)
• calcite-alert - intlClose prop has been added to optionally provide a translated override of the English "close" text

• calcite-stepper - calciteStepperItemHasChanged event has been renamed to calciteStepperItemChange
• calcite-stepper-item - calciteStepperItemSelected event has been renamed to calciteStepperItemSelect
• calcite-stepper-item - registerCalciteStepperItem event has been renamed to calciteStepperItemRegister

Breaking Changes

• calcite-modal - close-label prop is now renamed to intl-close for consistency (#466)
• calcite-modal - open and close methods removed in favor of active prop (#466)
• calcite-modal - size => width, which can be passed standard (s/m/l) or custom width in px (#239)
• calcite-modal - fullscreen made it's own prop (#466)
• calcite-modal - new scale prop for setting UI scale of modal (#466);
• calcite-date - prevMonthLabel and nextMonthLabel updated to intlPrevMonth and intlNextMonth (#97)
• calcite-switch - switched boolean has been added to calciteSwitchChange event detail

Breaking Changes

• calcite-label - calciteLabelSelectedEvent event has been renamed to calciteLabelFocus
• calcite-button - icon-position and icon props have been removed - you can now use icon-start and icon-end props to position up to two icons.
• calcite-link - icon-position and icon props have been removed - you can now use icon-start and icon-end props to position up to two icons.
• calcite-split-button - primary-icon prop has been removed - you can now use primary-icon-start and primary-icon-end props to position up to two icons.
• calcite-tab - isActive prop is now active to be consistent with other components
• calcite-tab-title - isActive prop is now active to be consistent with other components
• calcite-loader - isActive prop is now active to be consistent with other components
• calcite-popover textClose has been changed to intlClose.
• calcite-card - event name change calciteCardSelected => calciteCardSelect (#459)

Added

• Generate new types for using components inside a Preact + TypeScript
• calcite-loader - add scale for both standard and inline loaders (#465)
• calcite-dropdown now has a disable-close-on-select attribute that allows dropdowns to remain open on selection when calcite-dropdown-group selection-mode is set to single or multi
• calcite-dropdown now emits calciteDropdownClose when it closes.
• calcite-dropdown now emits calciteDropdownOpen when it opens.
• calcite-dropdown now has a disabled prop.
• calcite-input - adds clearable prop to display a clear button when field has a value - this also enables clearing of value while focused and using Escape key.
• calcite-input - adds disabled prop
• calcite-button - icon-start and icon-end props have been added for explicit positioning of up to two icons.
• calcite-link - icon-start and icon-end props have been added for explicit positioning of up to two icons.
• calcite-split-button - primary-icon-start and primary-icon-end props have been added for explicit positioning of up to two icons.
• calcite-split-button - dropdown-icon-type prop now accepts an overflow value for an additional icon option.
• calcite-notice now has a intl-close attribute that allows the title of the close button to be set. It defaults to the English "Close".
• calcite-modal - added disable-close-button prop for hiding X (#669)
• calcite-popover - added disable-close-button prop for hiding X (#669)

Fixed

• calcite-dropdown - will now correctly focus the slotted dropdown-trigger element when the dropdown is closed
• calcite-input - fixes inconsistencies in height of inputs with various configurations
• calcite-label - fixes inconsistencies in layout=inline padding applications
• calcite-slider - fixes positioning of handles and labels, better focus styles (#660)
• calcite-split-button - fixed split button triggering of dropdown
• calcite-tab-title - improve focus state

Updated

• calcite-dropdown - a dropdown will now close if another dropdown is opened
• calcite-dropdown - mouse clicks on calcite-dropdown-group titles will no longer close the dropdown
• calcite-slider - improved disabled styles (#676)

Fixed

• fix NPM release issue