Updates since 1.9
Card Group
Calcite has added a new component, Card Group, offering accessible keyboard navigation, consistent spacing and layout handling of Cards, access to the calcite
event, and control of selection modes using the selection
property.
<calcite-card-group label="pets" selection-mode="multiple">
<calcite-card label="Bear">
<img slot="thumbnail" alt="Bear" src="https://placebear.com/220/170" />
<h3 slot="heading">Tiny</h3>
<span slot="description">by
<calcite-link href="https://example.com/user/bearnecessities">BearNecessities</calcite-link>
</span>
</calcite-card>
<calcite-card label="Dog">
<img slot="thumbnail" alt="Puppy" src="https://placedog.net/220/170" />
<h3 slot="heading">Oreo</h3>
<span slot="description">by
<calcite-link href="https://example.com/user/pawesome_sauce">Pawesome_Sauce</calcite-link>
</span>
</calcite-card>
<calcite-card label="Cat">
<img slot="thumbnail" alt="Cat" src="https://placekitten.com/220/170" />
<h3 slot="heading">Mittens</h3>
<span slot="description">by
<calcite-link href="https://example.com/user/mr_whiskers">Mr_Whiskers</calcite-link>
</span>
</calcite-card>
</calcite-card-group>
Angular wrapper
An Angular wrapper was introduced in 1.11.0
. The wrapper facilitates the integration of Calcite into your Angular apps with support for converting web component events to RxJS observables, form control integration with reactive forms or ng
, and detaching Angular component wrappers from change detection.
Explore the Angular wrapper with Calcite's calcite-components-examples repository or Codesandbox template for a cloud-based environment.
Form validation
Calcite is working towards support for validation with the introduction of properties status
, validation
, and validation
. The validation
and validation
properties enable you to customize validation messages and icons that display when the components status
property is "invalid"
.
Form validation messages are displayed with Input Message, ensuring uniformity across different browsers, and additional constraint validation properties have been implemented for preventing form submissions, and improving your UI/UX.
Further enhancements to validation capabilities across Calcite's components are expected to be introduced later in 2024.
Components will display a validation message of "
and "exclamation-mark-triangle"
icon, or a customized validation
and validation
. For instance, in the sample below the form's first three fields feature custom messages and icons, while the last two utilize the default values.
The validation constraints are stored as a list of objects that define constraints for specified fields using the field's id
. For example, the set
function in the sample below sets custom validation messages and icons for form fields based on the validation-related attributes. If a field's value matches a pattern or falls outside specified range, such as a min
or max
, a custom message and icon are displayed.
View code snippet
<form id="form">
<fieldset>
<legend>Questionnaire</legend>
<ol>
<!-- Input Number with a custom validation icon and message -->
<li>
<calcite-label>
How many Calcite components have you seen in the wild?
<calcite-input-number id="numberSeen" name="numberSeen" min="5" max="109" required validation-message="Provide your best estimation." validation-icon="number"></calcite-input-number>
</calcite-label>
</li>
<!-- Date Picker with default validation icon and message -->
<li>
<calcite-label>
When did you hear about Calcite components?
<calcite-input-date-picker id="when" name="when" required></calcite-input-date-picker>
</calcite-label>
</li>
</ol>
<!-- Submit Button -->
<calcite-button id="submit" type="submit">Submit</calcite-button>
</fieldset>
</form>
<!-- Successful submission Alert -->
<calcite-alert id="alert" icon kind="success" label="success">
<div slot="message">
<strong>Success!</strong>
Thank you for your feedback.
</div>
</calcite-alert>
<script>
// Set this to false to only show validation messages after submitting the form
const SHOW_VALIDATION_MESSAGES_ON_BLUR = true;
const validationConstraints = [
{
id: "numberSeen",
min: {
value: 5,
message:
"There are 5 Calcite components used in this form, which is the minimum number you've seen.",
icon: "minimum"
},
max: {
value: 109,
message:
"There are 109 Calcite components, which is the maximum number you could have seen.",
icon: "maximum"
}
}
];
// Update the validation message, icon, and status of a form element based on the provided message and icon parameters.
function setCustomValidity(el, message, icon = false) {
if (message) {
el.validationMessage = message;
el.validationIcon = icon;
if (SHOW_VALIDATION_MESSAGES_ON_BLUR) {
el.status = "invalid";
}
} else {
el.validationMessage = "";
el.validationIcon = false;
el.status = "idle";
}
}
window.onload = () => {
validationConstraints.forEach((constraint) => {
document
.querySelector(`#${constraint.id}`)
?.addEventListener("blur", ({ target }) => {
// set custom validation message for the 'min' constraint
if (constraint?.min?.value > target.value) {
setCustomValidity(
target,
constraint?.min.message,
constraint.min?.icon ?? true
);
return;
}
// set custom validation message for the 'max' constraint
if (constraint?.max?.value < target.value) {
setCustomValidity(
target,
constraint.max?.message,
constraint.max?.icon ?? true
);
return;
}
// clear custom validation message if all of the constraints are met
setCustomValidity(target, "");
});
});
/* Check validation status on components */
const datePicker = document.getElementById("when");
datePicker.maxAsDate = new Date();
datePicker.min = "2021-01-01";
datePicker.addEventListener("calciteInputDatePickerChange", (evt) => {
console.log(evt);
if (evt.target.value) {
evt.target.status = "valid";
} else {
evt.target.status = "invalid";
}
});
// Form submission
const form = document.getElementById("form");
const submit = document.getElementById("submit");
const alert = document.getElementById("alert");
form.onsubmit = (event) => {
event.preventDefault();
submit.loading = true;
setTimeout(() => {
submit.loading = false;
alert.open = true;
}, 300);
};
};
</script>
Responsive design
Responsive design supports a user behavior response and accommodates to its environment based on screen size, platform, and orientation. Responsive web design is a way of thinking about design, in addition to accommodating screen resolutions and resizing content.
As of 2.6
, Calcite supports responsive design across the design system. All components were built with responsive design in mind to support more workflows, devices, and use cases.
Width breakpoints
- Extra extra small (xxs): Less than
320px
- Extra small (xs):
321 - 476px
- Small (sm):
477 - 768px
- Medium (md):
769 - 1152px
- Large (lg):
1153 - 1722px
- Extra large (xl): Greater than
1722px
Height breakpoints
- xxs: Less than
154px
- xs:
155 - 328px
- sm:
329 - 504px
- md:
505 - 678px
- lg:
679 - 853px
- xl: Greater than
853px
Consistency improvements in 2.0
Changes that support patterns across components include:
Consistency patterns were considered breaking changes as part of the November 2.0.0
release. Explore all of the 2.0 breaking changes below.
CSS property names
CSS property names were updated to provide meaningful names representing their usage in 2.0.0
.
There is legacy support for the deprecated property names available in the 2.1.0
release. For the full list of property name changes, refer to the CSS variable comparison tables.
Use | Updated variable name example | Deprecated variable name example |
---|---|---|
Color | --calcite-color-brand | --calcite-ui-brand |
Z-index | --calcite-z-index | --calcite-app-z-index |
Breakpoint | --calcite-container-size-content-fixed | --calcite-app-breakpoint-content-fixed |
Spacing | --calcite-spacing-md | --calcite-app-spacing-5 |
Sizing | --calcite-size-md | --calcite-app-sizing-5 |
Opacity | --calcite-opacity-light | --calcite-app-opacity-40 |
Border | --calcite-border-width-none | --calcite-app-border-width-none |
Font | --calcite-font-size | --calcite-app-font-size-2 |
Button loading and disabled states
As of 2.0 components loading
and disabled
states are seperate. In cases where loading
is present and a disabled
state is desired, developers can add both attributes, or properties to achieve the desired use case where a Button is in its loading state and disabled.
<!-- The Button is loading, but clickable -->
<calcite-button id="loading" loading>Add layer</calcite-button>
<!-- The Button is disabled -->
<calcite-button id="disabled" disabled>Add layer</calcite-button>
<!-- The Button is loading and disabled -->
<calcite-button id="disabledLoading" loading disabled>Add layer</calcite-button>
Modal and Dropdown width Scale
pattern
The Dropdown and Modal components now use the width
property - previously named scale
. The change is in alignment with other components, Sheet and Panel for a consistent pattern across Calcite, where the width of the component is scaled.
Component functionality
Enhancements to support component functionality are now available, which include:
- List slot for no filtered results
- List Item content-bottom slot
- Dropdown Item disabled property
- Customize Tab's built-in padding
- Table static interaction mode
- Table Header styling added for selected table row
List slot for no filtered results
A new slot is available in List when the filter
property is present, named filter-no-results
. When no filtered results are found, the component's slotted contents will display.
<calcite-list filter-enabled filter-text="banana" selection-appearance="border" selection-mode="single">
<calcite-notice slot="filter-no-results" icon kind="warning" scale="s" open>
<div slot="title">No fruits found</div>
<div slot="message">Try a different fruit?</div>
</calcite-notice>
<calcite-list-item label="Apples" value="apples"></calcite-list-item>
<calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
<calcite-list-item label="Pears" value="pears"></calcite-list-item>
</calcite-list>
List Item content-bottom slot
A new slot, "content-bottom"
is available for List Item that allows the placement of content below the component's label and description.
<calcite-list selection-mode="none" selection-appearance="icon">
<calcite-list-item
label="Birds of Prey"
description="Species known for hunting"
open
>
<span slot="content-bottom">
Found in various habitats
</span>
<calcite-list>
<calcite-list-item
label="Eagles"
description="Large, powerful raptors"
open
>
<span slot="content-bottom">
Wingspan: Up to 2.5 meters
</span>
</calcite-list-item>
<calcite-list-item
label="Falcons"
description="Swift, agile hunters"
>
<span slot="content-bottom">
Top Speed: 240 mph
</span>
</calcite-list-item>
<calcite-list-item
label="Owls"
description="Nocturnal birds of prey"
>
<span slot="content-bottom">
Adapted for silent flight
</span>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
Dropdown Item disabled property
The disabled
property is supported in the Dropdown Item component.
<calcite-dropdown>
<calcite-button slot="trigger">Create chart</calcite-button>
<calcite-dropdown-group group-title="Chart and graph types">
<calcite-dropdown-item icon-start="graph-bar">Box chart</calcite-dropdown-item>
<calcite-dropdown-item icon-start="heat-chart">Heat chart</calcite-dropdown-item>
<calcite-dropdown-item icon-start="graph-histogram" disabled>Histogram</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
Customize Tab's built-in padding
Tab now includes a CSS variable, --calcite-tab-content-block-padding
, which allows the ability to override the component's built-in padding.
<calcite-tabs>
<calcite-tab-nav slot="title-group">
<calcite-tab-title>Volcanoes</calcite-tab-title>
<calcite-tab-title selected>Earthquakes</calcite-tab-title>
</calcite-tab-nav>
<calcite-tab style="--calcite-tab-content-block-padding:0;">
<arcgis-map id="volcano-map"></arcgis-map>
</calcite-tab>
<calcite-tab style="--calcite-tab-content-block-padding:0;">
<arcgis-map id="earthquake-map"></arcgis-map>
</calcite-tab>
</calcite-tabs>
Table "static" interaction mode
A new property interaction
is available for Table where two values - the default value, "interactive"
allows focus and keyboard navigation and "static"
disables keyboard navigation and focus of table-header
s and table-cell
s when assistive technologies are not active. Slotted content within a cell that should be focusable is not be impacted and will continue to be work as expected.
<calcite-table caption="Simple table" selection-mode="multiple" page-size="5" bordered interaction-mode="static">
<calcite-action-bar slot="selection-actions" layout="horizontal" expand-disabled>
<calcite-action text="Analyze" icon="layer"></calcite-action>
<calcite-action text="Copy" icon="copy"></calcite-action>
</calcite-action-bar>
<calcite-table-row slot="table-header">
<calcite-table-header heading="Travel destinations" description="Choose the cities you wish to visit"></calcite-table-header>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>New York</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>London</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>Tokyo</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>Paris</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>Seoul</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>Athens</calcite-table-cell>
</calcite-table-row>
</calcite-table>
Table Header styling added for selected table row
Table Header has styling applied when it is within a selected Table Row.
<calcite-table caption="Crop Statistics Table" selection-mode="multiple" bordered>
<calcite-table-row slot="table-header">
<calcite-table-header heading="Plot"></calcite-table-header>
<calcite-table-header heading="Sunny days" description="(yearly)"></calcite-table-header>
<calcite-table-header heading="Size" description="(area in ft)" alignment="end"></calcite-table-header>
<calcite-table-header heading="Fruits" description="(yield in lbs)" alignment="end"></calcite-table-header>
<calcite-table-header heading="Vegetables" description="(yield in lbs)" alignment="end"></calcite-table-header>
</calcite-table-row>
<calcite-table-row>
<calcite-table-header heading="N-1A" description="North zone"></calcite-table-header>
<calcite-table-cell>
<calcite-meter fill-type="single" value-label label="sunlight" value="280" max="365"
value-label-type="units" scale="s"></calcite-meter>
</calcite-table-cell>
<calcite-table-cell alignment="end">177</calcite-table-cell>
<calcite-table-cell alignment="end">185</calcite-table-cell>
<calcite-table-cell alignment="end">543</calcite-table-cell>
</calcite-table-row>
<calcite-table-row selected>
<calcite-table-header heading="N-1B" description="North zone"></calcite-table-header>
<calcite-table-cell>
<calcite-meter fill-type="single" value-label label="sunlight" value="236" max="365"
value-label-type="units" scale="s"></calcite-meter>
</calcite-table-cell>
<calcite-table-cell alignment="end">132</calcite-table-cell>
<calcite-table-cell alignment="end">954</calcite-table-cell>
<calcite-table-cell alignment="end">312</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-header heading="N-1C" description="North zone"></calcite-table-header>
<calcite-table-cell>
<calcite-meter fill-type="single" value-label label="sunlight" value="160" max="365"
value-label-type="units" scale="s"></calcite-meter>
</calcite-table-cell>
<calcite-table-cell alignment="end">94</calcite-table-cell>
<calcite-table-cell alignment="end">214</calcite-table-cell>
<calcite-table-cell alignment="end">432</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-header heading="N-2A" description="North zone"></calcite-table-header>
<calcite-table-cell>
<calcite-meter fill-type="single" value-label label="sunlight" value="280" max="365"
value-label-type="units" scale="s"></calcite-meter>
</calcite-table-cell>
<calcite-table-cell alignment="end">183</calcite-table-cell>
<calcite-table-cell alignment="end">1,255</calcite-table-cell>
<calcite-table-cell alignment="end">747</calcite-table-cell>
</calcite-table-row>
</calcite-table>
Changes since October 2023
Below is a full list of changes since October, which include:
Breaking changes
- Stencil's version is set to version 4, previously set to version 2. (#8108) (bcbb79f)
- Internationalization: Reduced numbering system support to
latn
,arab
andarabext
. The following numbering systems were removed:bali
,beng
,deva
,fullwide
,gujr
,guru
,hanidec
,khmr
,knda
,laoo
,limb
,mlym
,mong
,mymr
,orya
,tamldec
,telu
,thai
,tibt
. (#8217) (9946ac1) - React wrapper: Disabled
include
. Make sure to import components fromImport Custom Elements @esri/calcite-components
in addition to the React wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined in the browser. (#8248) (0948c1a) - button, list, pick-list, value-list: Setting
loading
prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please setdisabled
along withloading
. (#8292) (db3c5c7) - dropdown, modal: For consistency, renames the
width
property towidth
. (#8251) (ab12968), (#8252) (6b09245)Scale - card: Removed the
deselect
message property – this property was deprecated in #6657 as it is no longer being rendered. This is no longer overrideable viamessage
. (#8099) (1bab172)Overrides - dropdown: Dropdown's default
display
was changed frominline-flex
toinline-block
to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width or settingwidth
or: 100% display
on the dropdown of a width-constrained parent). (#8253) (7c96e9f): block - stepper-item: Removed both
previous
andStep next
message properties. These are no longer overrideable viaStep message
. (#8234) (331aafb)Overrides - Design tokens: Changes to
@esri/calcite-design-tokens
, including the names of CSS variables used to customize component styling. (#8311) (8d7cf3f), (#8299) (4050a91), (#8215) (335d010)-
Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (
import * as tokens from "@esri/calcite-design-tokens";
) -
Use font name in core font family tokens
-
Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens
-
Core size tokens now use their pixel size in their name
-
Change
border-radius
tocorner-radius
-
Remove unnecessary
border-width
tokensnone
,sm
,md
,lg
-
Platform output
- Remove component tokens from global output
- Add new platform output
- css
- index
- global
- light
- dark
- core
- breakpoint
- typography classes
- scss
- index
- global
- light
- dark
- core
- breakpoints
- typography mixins
- css
- Replace "headless" with "global"
- Remove "calcite" from filenames
-
Package.json exports
@esri/calcite-design-tokens/css/headless
is now@esri/calcite-design-tokens/css/global
@esri/calcite-design-tokens/scss/headless
is now@esri/calcite-design-tokens/scss/global
@esri/calcite-design-tokens/js/headless
is now@esri/calcite-design-tokens/js/global
@esri/calcite-design-tokens/es6/headless
is now@esri/calcite-design-tokens/es6/global
-
Token paths and values
- Border
- Use t-shirt sizing for border width tokens
Border.border-width.0
is nowborder.width.none
(--calcite-border-width-none)border.border-width.1
is nowborder.width.sm
(--calcite-border-width-sm)border.border-width.2
is nowborder.width.md
(--calcite-border-width-md)border.border-width.3
is nowborder.width.lg
(--calcite-border-width-lg)border.border-width.4
is removed
- Remove unused border radius tokens
Core.border.border-radius.0
Core.border.border-radius.2
Core.border.border-radius.3
- Use t-shirt sizing for border radius (now called corner radius) tokens
semantic.ui.border.border-radius
issemantic.corner.radius.default
Core.border.border-radius.1
is nowsemantic.corner.radius.sharp
Core.border.border-radius.4
is nowsemantic.corner.radius.round
Core.border.border-radius.5
is nowsemantic.corner.radius.pill
- Use t-shirt sizing for border width tokens
- Sizing
core.sizing.
tokens are nowcore.size.default
- Breakpoints
- Move breakpoint tokens to their own separate output file for most platform outputs (except JS)
- Update breakpoint token path from
.breakpoint.
to.container-size.
- Delete unused
breakpoint.cols
tokens
- Box Shadow
- Use t-shirt sizing for global box shadow tokens
box-shadow.0
is nowshadow.none
box-shadow.1
is nowshadow.sm
box-shadow.2
is nowshadow.md
- Use t-shirt sizing for global box shadow tokens
- Colors
- Remove "palette" from core color paths
core.color.palette.high-saturation
is nowcore.color.high-saturation
- Light Mode and Dark Mode
- Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens.
.calcite-mode-light
and.calcite-mode-dark
classes as well as the color scheme media queries are now provided viacalcite-design-tokens/css/index.css
- Provide light and dark mode mixins via
calcite-design-tokens/css/index.scss
- Remove "ui" from output platform names in favor of "color"
--calcite-ui-background
is now--calcite-color-background
--calcite-ui-brand
is now--calcite-color-brand
--calcite-ui-success
is now--calcite-color-status-success
--calcite-ui-danger
is now--calcite-color-status-danger
--calcite-ui-warning
is now--calcite-color-status-warning
--calcite-ui-hint
is now--calcite-color-status-hint
--calcite-button-transparent-hover
is now--calcite-color-transparent-press
- Border
-
Features
- angular-wrapper: Add angular wrapper (npm)
- Add
no-dynamic-createelement
rule (#8656) (c7e9444) - action-bar, action-pad, block, flow-item, panel: Add
overlay
prop for built-in menus (#8633) (714b889)Positioning
- checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select: Add required property (#8517) (72a1ce4)
- combobox, checkbox, input-time-zone, select, text-area: Add
status
property (#8304) (a44e9fe) - handle, block, list-item: Improve drag handle tooltip to include item label (#8584) (6e643e2)
- radio-button-group, segmented control: Add validationMessage, validationIcon, and status properties (#8561) (d4c5efc)
- Add
validation-message
andvalidation-icon
attributes to form components for new internalcalcite-input-message
(#8305) (a554cfd) - Provide legacy CSS custom props for backwards compatibility (#8355) (b0f063e)
- Use input-message to display validation messages for invalid fields after form submission (#8574) (fd392fe)
- Reflect validationIcon property (#8583) (b3d38b3)
- action-menu:
- block: Ensure chevron is always displayed (#8014) (95fecb2)
- card-group: Add Card Group component (#8749) (b012324)
- combobox: Limit display of selected items with new selection-display prop (#7912) (58317ae)
- date-picker: Make component responsive (#7872) (f131218)
- input, input-date-picker, input-number, input-text, input-time-picker: Truncate value and placeholder when input is narrow (#8160) (533eff3)
- list-item:
- Add content-bottom slot for placing content below the label and description of the component (#8183) (7d400fb)
- Add
drag
property (#8285) (f091f26)Disabled - Add calciteListItemToggle event. (#8433) (1d2fa04)
- Add dragSelected property and calciteListItemDragHandleChange event (#8524) (4db2eb7)
- Add tooltip for expanding and collapsing (#8612) (4964491)
- list:
- Specify the element types in the
calcite
event detail. (#8123) (3e81d7e)List Order Change - Support multiple selection using the shift key (#8301) (79538be)
- Add
calcite
andList Drag Start calcite
events for when a drag starts and ends. (#8361) (1314605)List Drag End - Add drag event details to
calcite
andList Drag Start calcite
events (#8438) (e199c08)List Drag End - Add "filter-no-results" slot to display content when no filtered items are shown (#8569) (f1fc7f6)
- Introduce clearer unselected state (#8510) (f1e836c)
- Specify the element types in the
- navigation-logo: Adds
icon
andicon
properties (#8054) (049056d)Flip Rtl - pagination: Introduce responsive design for xxsmall breakpoint (#8150) (ab20eb0)
- stepper,stepper-item: Adds support for built-in translations (#8002) (bb91624)
- stepper-item: Remove support for previousStep and nextStep in messages (#8222) (213b31d)
- stepper:
- table:
- tabs: Emit selection-related events when selection is modified after closing the selected tab (#8582) (b15c940)
- tile:
- Design tokens:
- Reduce global design tokens in calcite.css (#8215) (335d010)
- Add json to design token output (#8290) (753061f)
- Reduce global design tokens in calcite.css (#8215) (335d010)
- Update default main file output for design tokens (#8299) (4050a91)
- Update json shape for docs (#8308) (6fac3e9)
- font tokens: Add font family fallbacks (#8389) (b2fd255)
- Update tokens for better documentation (#8395) (ff19630)
Bug fixes
- preset:
- Don't override existing validationMessage when displaying after form submission (#8690) (3076220)
- Ensure ui-icons are copied from correct path (#8761) (3015a46)
- Fix dragging items on a mobile device (#8751) (dc11612)
- Fix styling when dragging items on a mobile device (#8750) (7c01e6e)
- Floating components will now get an initial position even if they are not opened (#8001) (78b680d)
- Only show validation message when status='invalid' (#8649) (7eac8d7)
- Prevent interaction when component is disabled after initialization (Firefox) (#8746) (aa84182)
- Prevent package patching on install (#8766) (fe18b1b)
- Design tokens:
- React wrapper: Disable includeImportCustomElements to resolve initial render issues (#8248) (0948c1a)
- button, fab, inline-editable, split-button: Prevent redundant opacity when button is both loading and disabled (#8015) (3a1d3fd)
- button, list, pick-list, value-list: Prevent loading prop from affecting interactivity (#8292) (db3c5c7)
- color-picker, popover, shell-panel, slider, tooltip: Register events on the window instead of the document (#8247) (2aaf592)
- combobox, dropdown, input-date-picker, popover, tooltip: Fix positioning of component when component is moved (#8296) (2b2506d)
- input, input-number, input-text, text-area: Ensure all applicable props are considered in form validation (#8655) (6de8534)
- accordion-item: Update expanded chevron color (#8087) (d3d7688)
- action:
- action-menu:
- button:
- checkbox: Make label property public (#8181) (d3b9c1f)
- chip: Prevent rendering internal icon if not necessary. (#8663) (8ca2929)
- color-picker:
- combobox:
- Fix issue causing value to be cleared when selecting an item (Windows + trackpad) (#7954) (557d658)
- Clear custom input value on blur (#8070) (327ff06)
- Ensure icon scales are consistent (#8075) (babba3b)
- Only allow deleting visible chips with the keyboard (#8603) (2d38241)
- Ensure supporting components are auto-defined (#8657) (e6d792b)
- Avoid inline-start padding on combobox label when icon is displayed (#8672) (9eb680a)
- Long text truncates on single and single-persist modes (#8731) (8fc42b1)
- combobox-item: Hide disabled item icon (#8095) (36552f3)
- date-picker: Prevent console error when selecting just an end date for input date picker (#8444) (c0e51c3)
- dropdown:
- dropdown-item: Avoid hover/active styling when disabled (#8398) (35817dc)
- filter:
- flow-item: Update collapsed property when collapse button is clicked (#7960) (f6fd55f)
- icon: Use pixel sizes for icons (#8009) (49085d5)
- input, input-number, input-text: Restore focus on input after browser validation error is displayed and user continues typing (#8563) (5897965)
- input: Prevents mutating value on
blur
whentype="number"
(#8245) (58ededd) - input, input-number: Support setting value property to Infinity (#8547) (f6ac698)
- input-date-picker, input-time-picker: Adjust chevron scale accordingly (#8012) (f894f80)
- input-date-picker:
- Fix date-picker wrapper displaying beyond its bounds (#8172) (01ec024)
- Ensure range input toggling is consistent (#8414) (cd92586)
- No longer emits redundant change event (#8341) (cd5b92b)
- Respect the numberingSystem property when rendering the input (#8383) (395b538)
- Ensure range icon toggles open corresponding date-picker (#8554) (cfafd15)
- Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. (5f4fa3e)
- input-number: Prevents mutating value on blur (#8226) (b89a893)
- input-time-zone:
- Fix handling of unknown and cityless time zones from offset display mode (#7947) (75e0302)
- Allow searching offsets by Etc/x time zone (#7978) (2c34b42)
- Fix error caused by time zone group filtering (#7971) (521673e)
- Fix city translations (#8058) (7df7e1f)
- Fix Indian/Christmas time zone translation (#8096) (d79d591)
- Update time zone items when item-dependent props change (#8271) (f77532e)
- list-item, stack:
- list, list-item, list-item-group: Honor hidden attribute on list-item and list-item-group (#8541) (3851dc6)
- list-item:
- Restore tabbability when an item's disabled prop is toggled (#8042) (c970603)
- Adds border between grouped and ungrouped list-items (#8134) (b3c331c)
- Fix rendering of open icon. (#8207) (a6e1766)
- Adds border between grouped and ungrouped list-items (#8134) (ae9b083)
- Adds border between last item in a group and slotted item (#8262) (9b5cf76)
- An item with an empty slotted list should be openable. (#8240) (d615b39)
- Focus on the first focusable element within the component when using arrow keys (#8291) (b902365)
- Reserve space for empty open lists. (#8239) (484a5aa)
- Drag grid cell should be accessible via arrow keys. (#8353) (2718ab3)
- Store last focused cell from focusing on elements within a cell. (#8494) (28f93b4)
- Always show hover and pointer styling (#8622) (4a8a91a)
- Do not focus on item cells on focusIn (#8665) (ce9c9ae)
- Fix slotted list border styling. (#8712) (855f98d)
- list:
- navigation-logo: No longer changes icon color when
href
is parsed (#8830) (16d456f) - pagination: Prevents console error when page-size is set to zero (#8017) (d09d485)
- panel, flow-item: Remove overflow rule (#8055) (d0c3ed2)
- panel: Fix collapse action title and reverse icon direction (#7927) (5f620f8)
- segmented-control-item: Fix text color contrast (#8036) (ede8c43)
- shell, shell-panel: Support resizing shell panel when there is an iframe slotted in shell content (#8317) (e0f69c9)
- shell-panel: Adds border at the start when slotted in
panel-end
(#8314) (2d1a1e2)
- split-button: Fix width layout (#8133) (051f332)
- stepper:
- Selects next enabled stepper-item when first one is disabled (#8004) (e0ed54e)
- Typo in CSS variable for step bar's fill (#8255) (2e643aa)
- Emits
calcite
event when switched to first step (#8422) (508979f)Stepper Item Change - No longer adds default
min-width
for items whenlayout='horizontal'
(#8758) (23a7439)
- tab: Prevent vertical scrollbar on content pane when the height of outer elements are specified (#8399) (9e6d901)
- table:
- table-cell: Fix background css variable (#8439) (9e5c59b)
- text-area: Prevent infinite render loop when
max-length
property is defined (#8610) (f30d933)
Reverts
- Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper (#8392) (#8471) (4bedf99)
CSS variable comparison tables
Colors
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-color-brand | --calcite-ui-brand |
--calcite-color-brand-hover | --calcite-ui-brand-hover |
--calcite-color-brand-press | --calcite-ui-brand-press |
--calcite-color-brand-underline | |
--calcite-color-background | --calcite-ui-background |
--calcite-color-foreground-1 | --calcite-ui-foreground-1 |
--calcite-color-foreground-2 | --calcite-ui-foreground-2 |
--calcite-color-foreground-3 | --calcite-ui-foreground-3 |
--calcite-color-foreground-current | --calcite-semantic-ui-color-foreground-current |
--calcite-color-foreground-current | --calcite-ui-foreground-current |
--calcite-offset-invert-focus | --calcite-ui-focus-offset-invert |
--calcite-color-transparent | |
--calcite-color-transparent-press | |
--calcite-color-transparent-hover | |
--calcite-color-transparent-scrim | |
--calcite-color-transparent-tint | |
--calcite-color-text-1 | --calcite-ui-text-1 |
--calcite-color-text-2 | --calcite-ui-text-2 |
--calcite-color-text-3 | --calcite-ui-text-3 |
--calcite-color-text-inverse | --calcite-ui-text-inverse |
--calcite-color-text-link | --calcite-ui-text-link |
--calcite-color-border-1 | --calcite-ui-border-1 |
--calcite-color-border-2 | --calcite-ui-border-2 |
--calcite-color-border-3 | --calcite-ui-border-3 |
--calcite-color-border-input | --calcite-ui-border-input |
--calcite-color-border-white | |
--calcite-color-border-ghost | |
--calcite-color-status-info | --calcite-ui-info |
--calcite-color-status-info-hover | --calcite-ui-info-hover |
--calcite-color-status-info-press | --calcite-ui-info-press |
--calcite-color-status-success | --calcite-ui-success |
--calcite-color-status-success-hover | --calcite-ui-success-hover |
--calcite-color-status-success-press | --calcite-ui-success-press |
--calcite-color-status-warning | --calcite-ui-warning |
--calcite-color-status-warning-hover | --calcite-ui-warning-hover |
--calcite-color-status-warning-press | --calcite-ui-warning-press |
--calcite-color-status-danger | --calcite-ui-danger |
--calcite-color-status-danger-hover | --calcite-ui-danger-hover |
--calcite-color-status-danger-press | --calcite-ui-danger-press |
--calcite-color-inverse | --calcite-ui-inverse |
--calcite-color-inverse-press | |
--calcite-color-inverse-hover |
Z-indexes
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-z-index | --calcite-app-z-index |
--calcite-z-index-tooltip | --calcite-app-z-index-tooltip |
--calcite-z-index-popup | --calcite-app-z-index-popup |
--calcite-z-index-modal | --calcite-app-z-index-modal |
--calcite-z-index-overlay | --calcite-app-z-index-overlay |
--calcite-z-index-dropdown | --calcite-app-z-index-dropdown |
--calcite-z-index-toast | --calcite-app-z-index-toast |
--calcite-z-index-header | --calcite-app-z-index-header |
--calcite-z-index-sticky | --calcite-app-z-index-sticky |
Breakpoints
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-app-breakpoint-cols-lg | |
--calcite-app-breakpoint-cols-md | |
--calcite-app-breakpoint-cols-sm | |
--calcite-app-breakpoint-cols-xs | |
--calcite-container-size-content-fixed | --calcite-app-breakpoint-content-fixed |
--calcite-container-size-content-fluid | --calcite-app-breakpoint-content-fluid |
--calcite-container-size-width-lg-max | --calcite-app-breakpoint-width-lg |
--calcite-container-size-width-md-max | --calcite-app-breakpoint-width-md |
--calcite-container-size-width-sm-max | --calcite-app-breakpoint-width-sm |
--calcite-container-size-width-xs-max | --calcite-app-breakpoint-width-xs |
--calcite-container-size-width-xxs-max | --calcite-app-breakpoint-width-xxs |
--calcite-container-size-width-lg-min | |
--calcite-container-size-width-md-min | |
--calcite-container-size-width-sm-min | |
--calcite-container-size-width-xs-min | |
--calcite-container-size-width-xxs-min |
Spacing and sizing
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-app-spacing-none | |
--calcite-app-spacing-28 | |
--calcite-app-spacing-27 | |
--calcite-app-spacing-26 | |
--calcite-app-spacing-25 | |
--calcite-app-spacing-24 | |
--calcite-app-spacing-23 | |
--calcite-app-spacing-22 | |
--calcite-app-spacing-21 | |
--calcite-app-spacing-20 | |
--calcite-app-spacing-19 | |
--calcite-app-spacing-18 | |
--calcite-app-spacing-17 | |
--calcite-app-spacing-16 | |
--calcite-app-spacing-15 | |
--calcite-app-spacing-14 | |
--calcite-app-spacing-13 | |
--calcite-app-spacing-12 | |
--calcite-spacing-xxxl | --calcite-app-spacing-11 |
--calcite-app-spacing-10 | |
--calcite-app-spacing-9 | |
--calcite-spacing-xxl | --calcite-app-spacing-8 |
--calcite-spacing-xl | --calcite-app-spacing-7 |
--calcite-spacing-lg | --calcite-app-spacing-6 |
--calcite-spacing-md | --calcite-app-spacing-5 |
--calcite-app-spacing-4 | |
--calcite-spacing-sm | --calcite-app-spacing-3 |
--calcite-spacing-xs | --calcite-app-spacing-2 |
--calcite-spacing-xxs | --calcite-app-spacing-1 |
--calcite-spacing-base | --calcite-app-spacing-0 |
--calcite-spacing-px | |
--calcite-app-sizing-none | |
--calcite-app-sizing-28 | |
--calcite-app-sizing-27 | |
--calcite-app-sizing-26 | |
--calcite-app-sizing-25 | |
--calcite-app-sizing-24 | |
--calcite-app-sizing-23 | |
--calcite-app-sizing-22 | |
--calcite-app-sizing-21 | |
--calcite-app-sizing-20 | |
--calcite-app-sizing-19 | |
--calcite-app-sizing-18 | |
--calcite-app-sizing-17 | |
--calcite-app-sizing-16 | |
--calcite-app-sizing-15 | |
--calcite-app-sizing-14 | |
--calcite-app-sizing-13 | |
--calcite-app-sizing-12 | |
--calcite-size-xxxl | --calcite-app-sizing-11 |
--calcite-app-sizing-10 | |
--calcite-size-xxl | --calcite-app-sizing-9 |
--calcite-size-xl | --calcite-app-sizing-8 |
--calcite-size-lg | --calcite-app-sizing-7 |
--calcite-size-md-plus | --calcite-app-sizing-6 |
--calcite-size-md | --calcite-app-sizing-5 |
--calcite-size-sm-plus | --calcite-app-sizing-4 |
--calcite-size-sm | --calcite-app-sizing-3 |
--calcite-size-xs | --calcite-app-sizing-2 |
--calcite-size-xxs | --calcite-app-sizing-1 |
--calcite-size-xxxs | --calcite-app-sizing-0 |
--calcite-size-px |
Opacity
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-opacity-full | --calcite-app-opacity-100 |
--calcite-app-opacity-96 | |
--calcite-app-opacity-92 | |
--calcite-app-opacity-90 | |
--calcite-opacity-dark | --calcite-app-opacity-85 |
--calcite-app-opacity-80 | |
--calcite-app-opacity-70 | |
--calcite-app-opacity-60 | |
--calcite-opacity-half | --calcite-app-opacity-50 |
--calcite-opacity-light | --calcite-app-opacity-40 |
--calcite-app-opacity-30 | |
--calcite-app-opacity-20 | |
--calcite-app-opacity-10 | |
--calcite-app-opacity-8 | |
--calcite-app-opacity-4 | |
--calcite-app-opacity-0 |
Borders
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-border-width-none | --calcite-app-border-width-none |
--calcite-app-border-width-4 | |
--calcite-app-border-width-3 | |
--calcite-border-width-lg | --calcite-app-border-width-2 |
--calcite-border-width-md | --calcite-app-border-width-1 |
--calcite-border-width-sm | --calcite-app-border-width-0 |
--calcite-corner-radius-pill | --calcite-app-border-radius-full |
--calcite-app-border-radius-half | |
--calcite-corner-radius-sharp | --calcite-app-border-radius-none |
--calcite-app-border-radius-6 | |
--calcite-app-border-radius-5 | |
--calcite-app-border-radius-4 | |
--calcite-app-border-radius-3 | |
--calcite-app-border-radius-2 | |
--calcite-corner-radius-round | --calcite-app-border-radius-1 |
--calcite-corner-radius-0 | --calcite-app-border-radius-0 |
Fonts
Updated/new variable name | Deprecated variable name |
---|---|
--calcite-font-text-case-capitalize | --calcite-app-font-text-case-capitalize |
--calcite-font-text-case-lowercase | --calcite-app-font-text-case-lowercase |
--calcite-font-text-case-uppercase | --calcite-app-font-text-case-uppercase |
--calcite-font-text-case-none | --calcite-app-font-text-case-none |
--calcite-font-text-decoration-underline | --calcite-app-font-text-decoration-underline |
--calcite-font-text-decoration-none | --calcite-app-font-text-decoration-none |
--calcite-font-paragraph-spacing-normal | --calcite-app-font-paragraph-spacing-normal |
--calcite-font-letter-spacing-wide | --calcite-app-font-letter-spacing-wide |
--calcite-font-letter-spacing-normal | --calcite-app-font-letter-spacing-normal |
--calcite-font-letter-spacing-tight | --calcite-app-font-letter-spacing-tight |
--calcite-app-font-size-15 | |
--calcite-app-font-size-14 | |
--calcite-app-font-size-13 | |
--calcite-app-font-size-12 | |
--calcite-app-font-size-11 | |
--calcite-app-font-size-10 | |
--calcite-app-font-size-9 | |
--calcite-app-font-size-8 | |
--calcite-app-font-size-7 | |
--calcite-font-size-xxl | --calcite-app-font-size-6 |
--calcite-font-size-xl | --calcite-app-font-size-5 |
--calcite-font-size-lg | --calcite-app-font-size-4 |
--calcite-font-size-md | --calcite-app-font-size-3 |
--calcite-font-size | --calcite-app-font-size-2 |
--calcite-font-size-sm | --calcite-app-font-size-1 |
--calcite-font-size-xs | --calcite-app-font-size-0 |
--calcite-font-line-height-relative-loose | --calcite-app-font-line-height-relative-loose |
--calcite-font-line-height-relative-relaxed | --calcite-app-font-line-height-relative-relaxed |
--calcite-font-line-height-relative-normal | --calcite-app-font-line-height-relative-normal |
--calcite-font-line-height-relative-snug | --calcite-app-font-line-height-relative-snug |
--calcite-font-line-height-relative-tight | --calcite-app-font-line-height-relative-tight |
--calcite-font-line-height-relative | --calcite-app-font-line-height-relative |
--calcite-app-font-line-height-fixed-12 | |
--calcite-app-font-line-height-fixed-11 | |
--calcite-app-font-line-height-fixed-10 | |
--calcite-app-font-line-height-fixed-9 | |
--calcite-app-font-line-height-fixed-8 | |
--calcite-app-font-line-height-fixed-7 | |
--calcite-app-font-line-height-fixed-6 | |
--calcite-app-font-line-height-fixed-5 | |
--calcite-app-font-line-height-fixed-4 | |
--calcite-font-line-height-fixed-xl | --calcite-app-font-line-height-fixed-3 |
--calcite-font-line-height-fixed-lg | --calcite-app-font-line-height-fixed-2 |
--calcite-app-font-line-height-fixed-1 | |
--calcite-font-line-height-fixed-sm | --calcite-app-font-line-height-fixed |
--calcite-app-font-weight-heavy | |
--calcite-app-font-weight-black | |
--calcite-app-font-weight-extrabold | |
--calcite-font-weight-bold | --calcite-app-font-weight-bold |
--calcite-font-weight-semibold | --calcite-app-font-weight-demi |
--calcite-app-font-weight-medium-italic | |
--calcite-font-weight-medium | --calcite-app-font-weight-medium |
--calcite-font-weight-regular | --calcite-app-font-weight-regular |
--calcite-font-weight-normal | |
--calcite-font-weight-light | --calcite-app-font-weight-light |
--calcite-app-font-weight-thin | |
--calcite-app-font-weight-ultralight | |
--calcite-font-family-code | --calcite-app-font-family-code |
--calcite-app-font-family-secondary | |
--calcite-font-family-primary | --calcite-app-font-family-primary |
Compatibility
The 4.29 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 2.4.0. In your application, we recommend using the same version or any version greater than ^2.4.0
. For example, ArcGIS Maps SDK for JavaScript is using 2.5.1 in the following Calcite samples.
If you are using version 4.27 it is recommended to use Calcite's 1.9.2 release.