diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml index 69c3a81da2f..b61e1b801e2 100644 --- a/.github/ISSUE_TEMPLATE/accessibility.yml +++ b/.github/ISSUE_TEMPLATE/accessibility.yml @@ -8,7 +8,7 @@ body: label: Check existing issues description: If someone has already opened an issue for what you are experiencing, please add a 👍 reaction to the existing issue instead of creating a new one. For support, please check the [community forum](https://developers.arcgis.com/calcite-design-system/community/). options: - - label: I have [checked for existing issues](https://github.com/Esri/calcite-design-system/issues) to avoid duplicates + - label: I have [checked for existing issues](https://github.com/Esri/calcite-design-system/issues) to avoid duplicates and reviewed the [Accessibility page](https://developers.arcgis.com/calcite-design-system/foundations/accessibility) for guidance. validations: required: true - type: textarea diff --git a/.husky/pre-commit b/.husky/pre-commit index be2b0e1d256..28467241bd1 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,32 +1,28 @@ -#!/usr/bin/env bash +#!/usr/bin/env sh ensure_types_are_up_to_date() { types_path="packages/calcite-components/src/components.d.ts" if [ -n "$(git diff --name-only -- "$types_path")" ]; then echo "Automatically staging changes to \"$types_path\"" - git add "$types_path" + git add "$types_path" >/dev/null 2>&1 || true fi } update_stylelint_config_if_sass_file_edited() { - staged_files="$(git diff --cached --name-only --diff-filter=ACM)" + staged_files="$( + git diff --cached --name-only --diff-filter=ACM -- packages/**/*.scss + )" - for file in $staged_files; do - if [[ "$file" == *.scss ]]; then - npm run util:update-stylelint-custom-sass-functions - break - fi - done - - if [ -n "$(git diff --name-only -- "packages/calcite-components/.stylelintrc.json")" ]; then - git add "packages/calcite-components/.stylelintrc.json" + if [ -n "$staged_files" ]; then + npm run util:update-stylelint-custom-sass-functions + git add "packages/calcite-components/.stylelintrc.cjs" >/dev/null 2>&1 || true fi + + unset staged_files } check_ui_icon_name_consistency() { - svg_icon_dir="packages/calcite-ui-icons/icons" - # this pattern checks for `-.svg` or `--f.svg` for filled icons # where `` is kebab-case, `` is 16, 24, or 32 valid_pattern="^[a-z0-9-]+-(16|24|32)(-f)?\\.svg$" @@ -34,27 +30,33 @@ check_ui_icon_name_consistency() { # this pattern will check for invalid use of "-f-" anywhere except right before the size invalid_pattern="-[a-z0-9]+-f-" - staged_files="$(git diff --cached --name-only --diff-filter=ACM)" + staged_files="$( + git diff --cached --name-only --diff-filter=ACM -- packages/calcite-ui-icons/icons/*.svg + )" - for file in $staged_files; do - if [[ "$file" == "$svg_icon_dir"* ]]; then - if [[ "$file" == *.svg ]]; then - filename="$(basename "$file")" + if [ -n "$staged_files" ]; then + for file in $staged_files; do + filename="$(basename "$file")" - # first, ensure the filename follows the valid pattern - if ! [[ "$filename" =~ $valid_pattern ]]; then - echo "Error: File '$file' does not follow the naming convention (-.svg or --f.svg)." - exit 1 - fi + # first, ensure the filename follows the valid pattern + if ! echo "$filename" | grep -qE "$valid_pattern"; then + printf "%s\n%s" \ + "error: file '$file' does not follow the naming convention:" \ + "(-.svg | --f.svg)" + exit 1 + fi - # then, ensure there's no invalid use of "-f-" anywhere except right before the size - if [[ "$filename" =~ $invalid_pattern ]]; then - echo "Error: File '$file' has an invalid '-f-' and does not follow the naming convention (-.svg or --f.svg)." - exit 1 - fi + # then, ensure there's no invalid use of "-f-" anywhere except right before the size + if echo "$filename" | grep -qE "$invalid_pattern"; then + printf '%s\n%s' \ + "error: file '$file' has an invalid '-f-' and does not follow the naming convention:" \ + "(-.svg | --f.svg)" + exit 1 fi - fi - done + done + fi + + unset staged_files } lint-staged diff --git a/.husky/pre-push b/.husky/pre-push index 22e73a356d9..c8ce7f89399 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,14 +1,20 @@ -#!/usr/bin/env bash -# from https://riptutorial.com/git/example/16164/pre-push - -protected_branch="main" -current_branch=$(git rev-parse --abbrev-ref HEAD) - -if [ "$protected_branch" = "$current_branch" ] && bash -c ': >/dev/tty'; then - read -p "You're about to push main, is that what you intended? [y|n] " -n 1 -r /dev/null; then - exit 0 - fi - exit 1 +#!/usr/bin/env sh + +if ! bash -c ': >/dev/tty'; then + exit 0 fi + +current_branch="$(git rev-parse --abbrev-ref HEAD)" + +case "$current_branch" in + dev | main | rc) + printf "You're about to push a protected branch, is that what you intended? [y|n] " + read -r response + + case "$response" in + y | Y) exit 0 ;; + *) exit 1 ;; + esac + ;; + *) exit 0 ;; +esac diff --git a/package-lock.json b/package-lock.json index e18197cac98..f4e15f1df69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3649,9 +3649,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", - "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" }, "node_modules/@glideapps/ts-necessities": { "version": "2.2.3", @@ -11492,9 +11492,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001660", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz", - "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==", + "version": "1.0.30001662", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz", + "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==", "dev": true, "funding": [ { @@ -35184,11 +35184,11 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-ui-icons": "3.32.0-next.4", - "@floating-ui/dom": "1.6.10", + "@esri/calcite-ui-icons": "3.32.0-next.5", + "@floating-ui/dom": "1.6.11", "@stencil/core": "4.20.0", "@types/color": "3.0.6", "@types/sortablejs": "1.15.8", @@ -35199,12 +35199,12 @@ "interactjs": "1.10.27", "lodash-es": "4.17.21", "sortablejs": "1.15.3", - "timezone-groups": "0.9.1", + "timezone-groups": "0.10.2", "type-fest": "4.18.2" }, "devDependencies": { "@esri/calcite-design-tokens": "2.2.1-next.4", - "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3", + "@esri/eslint-plugin-calcite-components": "1.2.1-next.4", "@stencil-community/eslint-plugin": "0.8.0", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", @@ -38860,10 +38860,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "2.13.0-next.14", + "@esri/calcite-components": "2.13.0-next.15", "tslib": "2.6.3" }, "peerDependencies": { @@ -38873,10 +38873,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "2.13.0-next.14" + "@esri/calcite-components": "2.13.0-next.15" }, "peerDependencies": { "react": ">=16.7", @@ -39260,11 +39260,12 @@ "license": "MIT" }, "packages/calcite-components/node_modules/timezone-groups": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/timezone-groups/-/timezone-groups-0.9.0.tgz", - "integrity": "sha512-6Os7VhGet5ZU5q7Sx5hxzyzyym5+IfVax5m6LBz1LqZGshlcDRykYyyD4j7yhN1yn/jjw4eJpd8KpzyPWKU+nQ==", + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/timezone-groups/-/timezone-groups-0.10.2.tgz", + "integrity": "sha512-01G9JdlIybA9Njp0wJcGenXKWAw+woWbv6W/oMexWyPs7Nr/S2p2n1NRrMHbHaFzdf+PNNStQp1WILdnAGjYXQ==", + "license": "MIT", "engines": { - "node": ">=20.0.0" + "node": ">=18.12.0" } }, "packages/calcite-components/node_modules/type-fest": { @@ -39310,7 +39311,7 @@ }, "packages/calcite-ui-icons": { "name": "@esri/calcite-ui-icons", - "version": "3.32.0-next.4", + "version": "3.32.0-next.5", "license": "SEE LICENSE.md", "bin": { "spriter": "bin/spriter.js" @@ -40057,7 +40058,7 @@ }, "packages/eslint-plugin-calcite-components": { "name": "@esri/eslint-plugin-calcite-components", - "version": "1.2.1-next.3", + "version": "1.2.1-next.4", "license": "SEE LICENSE.md", "dependencies": { "stencil-eslint-core": "0.4.1" diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index b9f9d3a2b6e..4f96b405d35 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.13.0-next.14...@esri/calcite-components-angular@2.13.0-next.15) (2024-09-18) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.13.0-next.13...@esri/calcite-components-angular@2.13.0-next.14) (2024-09-13) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 59bb1e353df..ff3272765ef 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "description": "A set of Angular components that wrap Esri's Calcite Components.", "homepage": "https://developers.arcgis.com/calcite-design-system/", "bugs": { @@ -17,7 +17,7 @@ }, "sideEffects": false, "dependencies": { - "@esri/calcite-components": "2.13.0-next.14", + "@esri/calcite-components": "2.13.0-next.15", "tslib": "2.6.3" }, "peerDependencies": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index b79271e182b..e87204af1cb 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.13.0-next.14...@esri/calcite-components-react@2.13.0-next.15) (2024-09-18) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.13.0-next.13...@esri/calcite-components-react@2.13.0-next.14) (2024-09-13) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 15863380815..210fdbe3904 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-react", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "description": "A set of React components that wrap calcite components", "homepage": "https://developers.arcgis.com/calcite-design-system/", "repository": { @@ -28,7 +28,7 @@ "tsc": "tsc" }, "dependencies": { - "@esri/calcite-components": "2.13.0-next.14" + "@esri/calcite-components": "2.13.0-next.15" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index c2364bb51f9..2e02214db54 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -3,7 +3,10 @@ // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT const customFunctions = [ "get-trailing-text-input-padding", - "scale-duration" + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale" ]; // ⚠️ END OF AUTO-GENERATED CODE diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 95b1542542a..b576c307567 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.13.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.13.0-next.14...@esri/calcite-components@2.13.0-next.15) (2024-09-18) + +### Features + +- **carousel:** Improve support for high item counts ([#10315](https://github.com/Esri/calcite-design-system/issues/10315)) ([6ad2612](https://github.com/Esri/calcite-design-system/commit/6ad261276c2a1ece4ce8f23cc29234becd4869c1)), closes [#9121](https://github.com/Esri/calcite-design-system/issues/9121) + +### Bug Fixes + +- **panel:** initially closed panel should be hidden ([#10308](https://github.com/Esri/calcite-design-system/issues/10308)) ([46de96b](https://github.com/Esri/calcite-design-system/commit/46de96b24926415ea71cf77d23699269be83d258)), closes [#10320](https://github.com/Esri/calcite-design-system/issues/10320) + ## [2.13.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.13.0-next.13...@esri/calcite-components@2.13.0-next.14) (2024-09-13) ### Features diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 0a9157385d0..35e4b356bb5 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.13.0-next.14", + "version": "2.13.0-next.15", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", @@ -60,8 +60,8 @@ "directory": "packages/calcite-components" }, "dependencies": { - "@esri/calcite-ui-icons": "3.32.0-next.4", - "@floating-ui/dom": "1.6.10", + "@esri/calcite-ui-icons": "3.32.0-next.5", + "@floating-ui/dom": "1.6.11", "@stencil/core": "4.20.0", "@types/color": "3.0.6", "@types/sortablejs": "1.15.8", @@ -72,12 +72,12 @@ "interactjs": "1.10.27", "lodash-es": "4.17.21", "sortablejs": "1.15.3", - "timezone-groups": "0.9.1", + "timezone-groups": "0.10.2", "type-fest": "4.18.2" }, "devDependencies": { "@esri/calcite-design-tokens": "2.2.1-next.4", - "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3", + "@esri/eslint-plugin-calcite-components": "1.2.1-next.4", "@stencil-community/eslint-plugin": "0.8.0", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss index 08e11b696e2..5470d9ebfba 100644 --- a/packages/calcite-components/src/assets/styles/includes.scss +++ b/packages/calcite-components/src/assets/styles/includes.scss @@ -152,3 +152,40 @@ } } } + +@mixin close-button($size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)", $padding: "0") { + .close { + @apply border-none + cursor-pointer + focus-base + items-center + m-0 + rounded-half + transition-default; + + background-color: var(--calcite-close-background-color, var(--calcite-color-transparent)); + -webkit-appearance: none; + display: flex; + align-content: center; + justify-content: center; + color: var(--calcite-close-icon-color, var(--calcite-color-text-1)); + block-size: #{$size}; + inline-size: #{$size}; + padding: #{$padding}; + + &:hover, + &:focus { + background-color: var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover)); + } + &:focus { + @apply focus-inset; + } + &:active { + background-color: var(--calcite-close-background-color-press, var(--calcite-color-transparent-press)); + } + + calcite-icon { + color: inherit; + } + } +} diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index bffc8ef3637..68d4f03e98e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; +import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; +export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index b9f07cf0e2a..7d241dfa3c1 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -532,6 +532,18 @@ describe("calcite-action-bar", () => { await page.waitForChanges(); expect(await group.getProperty("layout")).toBe("vertical"); + + actionBar.innerHTML = html` + + + `; + await page.waitForChanges(); + + const groups = await page.findAll("calcite-action-group"); + + groups.forEach(async (group) => { + expect(await group.getProperty("layout")).toBe("vertical"); + }); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts index 57a2968a2c7..d15b92509b0 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts @@ -347,6 +347,18 @@ describe("calcite-action-pad", () => { await page.waitForChanges(); expect(await group.getProperty("layout")).toBe("vertical"); + + actionPad.innerHTML = html` + + + `; + await page.waitForChanges(); + + const groups = await page.findAll("calcite-action-group"); + + groups.forEach(async (group) => { + expect(await group.getProperty("layout")).toBe("vertical"); + }); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 2c7bad43125..b38dfc4372e 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -172,12 +172,14 @@ export class ActionPad connectConditionalSlotComponent(this); connectLocalized(this); connectMessages(this); + this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } disconnectedCallback(): void { disconnectLocalized(this); disconnectMessages(this); disconnectConditionalSlotComponent(this); + this.mutationObserver?.disconnect(); } async componentWillLoad(): Promise { diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 2520e24855a..24b1fecf61a 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -206,6 +206,7 @@ describe("calcite-action", () => { expect(liveRegion.getAttribute("role")).toBe("region"); expect(liveRegion.textContent).toBe("Indicator present"); }); + describe("themed", () => { describe("default", () => { themed(html`calcite-action`, { @@ -285,5 +286,159 @@ describe("calcite-action", () => { }, ); }); + describe("corner radius", () => { + themed(html`calcite-action`, { + "--calcite-action-corner-radius": [ + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + { + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + { + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + { + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + { + targetProp: "borderStartStartRadius", + }, + ], + "--calcite-action-corner-radius-end-end": [ + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + { + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + { + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + { + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + { + targetProp: "borderStartStartRadius", + }, + ], + "--calcite-action-corner-radius-end-start": [ + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + { + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + { + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + { + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + { + targetProp: "borderStartStartRadius", + }, + ], + "--calcite-action-corner-radius-start-end": [ + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + { + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + { + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + { + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + { + targetProp: "borderStartStartRadius", + }, + ], + "--calcite-action-corner-radius-start-start": [ + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + { + targetProp: "borderEndEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + { + targetProp: "borderEndStartRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + { + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + { + targetProp: "borderStartStartRadius", + }, + ], + }); + }); }); }); diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 37936f0d69b..c3da22ceaa8 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -7,6 +7,11 @@ * @prop --calcite-action-background-color: Specifies the component's background color. * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused. * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active. + * @prop --calcite-action-corner-radius: Specifies the component's corner radius. + * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end. + * @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start. + * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end. + * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start. * @prop --calcite-action-text-color: Specifies the text color of the component. * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered. */ @@ -16,6 +21,26 @@ @apply flex bg-transparent; } +:host, +button { + border-end-end-radius: var( + --calcite-action-corner-radius-end-end, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-end-start-radius: var( + --calcite-action-corner-radius-end-start, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-start-end-radius: var( + --calcite-action-corner-radius-start-end, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-start-start-radius: var( + --calcite-action-corner-radius-start-start, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); +} + @mixin action-indicator() { position: relative; &::after { diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 436c1adfdb6..eff9d928c18 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -315,7 +315,6 @@ export class Action