February 2024 Summary

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 calciteCardGroupSelect event, and control of selection modes using the selectionMode property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 ngModel, and detaching Angular component wrappers from change detection.

Explore the Angular wrapper with Calcite's Angular example or Codesandbox template for a cloud-based environment.

Form validation

Calcite is working towards support for validation with the introduction of properties status, validationMessage, and validationIcon. The validationMessage and validationIcon 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 "Please fill out this field" and "exclamation-mark-triangle" icon, or a customized validationMessage and validationIcon. 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 setCustomValidity 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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:

• CSS property names
• Button loading and disabled states
• Modal and Dropdown widthScale pattern

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.

Button loading and disabled states

As of 2.0 components loading and disabled states are separate. 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.

1
2
3
4
5
6
7
8
<!-- 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 widthScale pattern

The Dropdown and Modal components now use the widthScale 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 filterEnabled property is present, named filter-no-results. When no filtered results are found, the component's slotted contents will display.

1
2
3
4
5
6
7
8
9
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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.

1
2
3
4
5
6
7
8
<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.

1
2
3
4
5
6
7
8
9
10
11
12
<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 interactionMode 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-headers and table-cells 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
  <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
• Features
• Bug fixes

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 and arabext. 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 includeImportCustomElements. Make sure to import components from @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 set disabled along with loading. (#8292) (db3c5c7)
• dropdown, modal: For consistency, renames the width property to widthScale. (#8251) (ab12968), (#8252) (6b09245)
• card: Removed the deselect message property – this property was deprecated in #6657 as it is no longer being rendered. This is no longer overrideable via messageOverrides. (#8099) (1bab172)
• dropdown: Dropdown's default display was changed from inline-flex to inline-block to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width or setting width: 100% or display: block on the dropdown of a width-constrained parent). (#8253) (7c96e9f)
• stepper-item: Removed both previousStep and nextStep message properties. These are no longer overrideable via messageOverrides. (#8234) (331aafb)
• 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 to corner-radius

  • Remove unnecessary border-width tokens none, 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
    • 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 now border.width.none (--calcite-border-width-none)
        • border.border-width.1 is now border.width.sm (--calcite-border-width-sm)
        • border.border-width.2 is now border.width.md (--calcite-border-width-md)
        • border.border-width.3 is now border.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 is semantic.corner.radius.default
        • Core.border.border-radius.1 is now semantic.corner.radius.sharp
        • Core.border.border-radius.4 is now semantic.corner.radius.round
        • Core.border.border-radius.5 is now semantic.corner.radius.pill
    • Sizing
      • core.sizing. tokens are now core.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 now shadow.none
        • box-shadow.1 is now shadow.sm
        • box-shadow.2 is now shadow.md
    • Colors
      • Remove "palette" from core color paths
      • core.color.palette.high-saturation is now core.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 via calcite-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

Features

• angular-wrapper: Add angular wrapper (npm)
• Add no-dynamic-createelement rule (#8656) (c7e9444)
• action-bar, action-pad, block, flow-item, panel: Add overlayPositioning prop for built-in menus (#8633) (714b889)

• 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 and validation-icon attributes to form components for new internal calcite-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:
  • Set max height of the action menu (#8275) (ca1be28)
  • Support action-groups (#8273) (c07144f)
  • Close menu on blur instead of on tab key. (#8577) (ccfbd0c)

• 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)

• dropdown-item: Add disabled support (#8312) (4c311c6)
• handle:
  • Add disabled property (#8283) (7aeecd5)
  • Add blurUnselectDisabled property to disable unselecting handle on blur. (#8483) (4d665cc)
  • Add selected property and calciteHandleChange event. (#8484) (d2e9880)

• 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 dragDisabled property (#8285) (f091f26)
  • 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 calciteListOrderChange event detail. (#8123) (3e81d7e)
  • Support multiple selection using the shift key (#8301) (79538be)
  • Add calciteListDragStart and calciteListDragEnd events for when a drag starts and ends. (#8361) (1314605)
  • Add drag event details to calciteListDragStart and calciteListDragEnd events (#8438) (e199c08)
  • Add "filter-no-results" slot to display content when no filtered items are shown (#8569) (f1fc7f6)
  • Introduce clearer unselected state (#8510) (f1e836c)
• navigation-logo: Adds icon and iconFlipRtl properties (#8054) (049056d)
• 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:
  • Enable responsive layout (#7744) (687ca2b), (556b8bc)
  • Add horizontal-single layout (#8742) (c34bc4f)
• table:
  • Add interactionMode property to control focus behavior (#8686) (0cb78c0)
  • Improve accessibility of interaction-mode: static Table (#8754) (eead1b5)

• table-header: Add style when within a selected Table Row (#8449) (13cfe75)

• tab: Add --calcite-tab-content-block-padding to override built-in block-padding (#8629) (7dae525)

• tabs: Emit selection-related events when selection is modified after closing the selected tab (#8582) (b15c940)
• tile:
  • Add visual scales (#8496) (7638ec4)
  • Add responsive layout features (#8691) (f4f872e)

• tile-group: Add Tile Group component (#8806) (4f65bdd)

• 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:
  • Add back legacy token for calcite-ui-focus-color (#8694) (1d1b933)
  • Calcite—color-brand to calcite-color-brand (#8809) (ee2cf4e)

• Allow users to control tabindex on interactive components (#8166) (b15c052)

• 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)

• Use Stencil watchers instead of global attributes util (#8407) (c531d81)
• floating-ui:
  • Improve floating element performance (#8409) (4d8cfb8)
  • Dragging floating ui components (#8230) (5a81f6c)

• angular: Publish from the dist directory (#8151) (d813f14)

• Design tokens:
  • Align tokens with figma variables (#8311) (8d7cf3f)
  • color tokens: Fix errors in schema (#8446) (f36a90e)
  • color-context tokens: Only apply when .calcite-mode-auto is applied (#8344) (19de817)
  • Replace "\n" to support Windows for tokens output (#8352) (02cf5d5)
• 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:
  • Ensure action content is correctly spaced (#8184) (b18dcc8)
  • Update transparent action styles (#8194) (0f12489)
  • Update component tokens to support transparent (#8532) (81cb5cc)

• action-menu:
  • Filter hidden or disabled actions via keyboard. (#8336) (11c0007)
  • Fix closing action menu after a drag occurs (#8339) (dcb8548)
  • Keep internal popover open property in sync (#8387) (38dff7c)
  • Clicking an action menu item should call click event. (#8627) (b12ef6b)

• block-section: Wraps long text over to a new line when toggle switch is displayed (#8101) (3f90780)

• button:
  • Sets aria-disabled instead of disabled on internal anchor element (#8270) (0926eb6)
  • Avoid needlessly overwriting title (#8491) (350a983)

• checkbox: Make label property public (#8181) (d3b9c1f)
• chip: Prevent rendering internal icon if not necessary. (#8663) (8ca2929)

• color-picker:
  • Emit color change when nudging color channels by using the shift key (#8579) (4250598)
  • Alpha-channel slider scope updates to reflect current opacity (#8700) (cd0b532)

• 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:
  • Change display to inline-block to ease truncation setup (#8253) (7c96e9f)
  • Restore trigger container height (51d1ea8)
• dropdown-item: Avoid hover/active styling when disabled (#8398) (35817dc)

• filter:
  • Corrects the accessible label (#8069) (c203084)
  • Prevent console warning from displaying to end users (#8458) (0de7646)
• 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 when type="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-message: Add missing margin to scale="s", spacing CSS variable has effect (#8592) (49b0a20)

• 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)

• label: Associate label to component when for prop is set after initialization (#8309) (e81b650)

• list-item, stack:
  • Stretch action-menu and handle when placed inside a list-item or stack. (#8185) (8a16a69)
  • Stretch dropdown when placed inside a list-item or stack (#8204) (05e6b65)

• 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:
  • Add live region for dynamically changing list items (#8148) (e3c0c06)
  • Correct selectedItems value when list is filtered (#8481) (9de1922)
  • Fix event detail newIndex when down arrow pressed to sort (#8462) (b3d5169)
  • Fix keyboard arrow navigation (#8470) (57fdaa4)

• loader: Optimize animation performance (#8714) (1ed8a01)

• menu-item: Improve keyboard navigability when href populated (#8408) (5b44798)
• modal:
  • Ensure document overflow styles are properly restored when multiple modals are closed/removed (#8390) (f2c6b09)
  • Ensure focus trapping in dynamically created, subsequently opened modals (#8593) (4ec6b94)

• 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 calciteStepperItemChange event when switched to first step (#8422) (508979f)
  • No longer adds default min-width for items when layout='horizontal' (#8758) (23a7439)

• tab: Prevent vertical scrollbar on content pane when the height of outer elements are specified (#8399) (9e6d901)

• table:
  • Improve scrollbar display (#7967) (593a1bf)
  • Fix double border on bordered Table Rows in table-footer (#8509) (c16ea33)
  • Improve Table overflow behavior (#8424) (79743e1)
  • Ensure border are correctly applied with complex rowSpan (#8779) (69f05d4)

• table-cell: Fix background css variable (#8439) (9e5c59b)
• text-area: Prevent infinite render loop when max-length property is defined (#8610) (f30d933)

• tile-select: Ensure supporting components are auto-defined (#8648) (2c27f40)

Reverts

• Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper (#8392) (#8471) (4bedf99)

• Fix(panel, flow-item): remove overflow rule (#8711) (21226ce)

CSS variable comparison tables

Colors

Z-indexes

Breakpoints

Spacing and sizing

Opacity

Borders

Fonts

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 minor 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.