From a6bb7da936014b0f5514dea8951ff6cde0d7a604 Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Wed, 11 Jan 2023 18:49:00 -0800 Subject: [PATCH 01/12] fix(accordion-item): bumping the scale of icon to M when parent accordion is scale L (#6252) **Related Issue:** #5698 ## Summary Bumping the scale of the icon to M when the parent `accordion-item` is `scale="l"` for a visual distinction between larger and smaller components without affecting the height of the `accordion-item` when icon(s) are added or removed. Added a _testOnly snapshot. --- .../accordion-item/accordion-item.tsx | 15 +++++++---- src/components/accordion/accordion.stories.ts | 26 +++++++++++++++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx index d037e9bf0ba..25d99b21c9a 100644 --- a/src/components/accordion-item/accordion-item.tsx +++ b/src/components/accordion-item/accordion-item.tsx @@ -16,9 +16,9 @@ import { } from "../../utils/conditionalSlot"; import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom"; import { CSS_UTILITY } from "../../utils/resources"; -import { FlipContext, Position } from "../interfaces"; +import { SLOTS, CSS } from "./resources"; +import { FlipContext, Position, Scale } from "../interfaces"; import { RegistryEntry, RequestedItem } from "./interfaces"; -import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s. @@ -93,6 +93,7 @@ export class AccordionItem implements ConditionalSlotComponent { this.selectionMode = getElementProp(this.el, "selection-mode", "multiple"); this.iconType = getElementProp(this.el, "icon-type", "chevron"); this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition); + this.scale = getElementProp(this.el, "scale", this.scale); connectConditionalSlotComponent(this); } @@ -142,7 +143,7 @@ export class AccordionItem implements ConditionalSlotComponent { flipRtl={iconFlipRtl === "both" || iconFlipRtl === "start"} icon={this.iconStart} key="icon-start" - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ) : null; const iconEndEl = this.iconEnd ? ( @@ -151,7 +152,7 @@ export class AccordionItem implements ConditionalSlotComponent { flipRtl={iconFlipRtl === "both" || iconFlipRtl === "end"} icon={this.iconEnd} key="icon-end" - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ) : null; const { description } = this; @@ -191,7 +192,7 @@ export class AccordionItem implements ConditionalSlotComponent { ? "minus" : "plus" } - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> {this.renderActionsEnd()} @@ -260,6 +261,10 @@ export class AccordionItem implements ConditionalSlotComponent { /** handle clicks on item header */ private itemHeaderClickHandler = (): void => this.emitRequestedItem(); + + /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */ + scale: Scale = "m"; + //-------------------------------------------------------------------------- // // Private Methods diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts index a08319fe3cf..4ce407c52b2 100644 --- a/src/components/accordion/accordion.stories.ts +++ b/src/components/accordion/accordion.stories.ts @@ -263,3 +263,29 @@ export const withIconStartAndEnd_TestOnly = (): string => )} ` ); + +export const mediumIconForLargeAccordionItem_TestOnly = (): string => html` + + + + + + + +`; From d73b376cb98c56bf0bc6e317f66c717b24a460bc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 12 Jan 2023 03:07:11 +0000 Subject: [PATCH 02/12] 1.0.0-next.721 --- CHANGELOG.md | 28 +++++++++++++++------------- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8e96365727..ad29805bb7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -87,31 +87,33 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Bug Fixes -- **combobox-item:** bumping the scale of icon to M when parent combobox is scale L ([#6253](https://github.com/Esri/calcite-components/issues/6253)) ([051cb3f](https://github.com/Esri/calcite-components/commit/051cb3f498b2f43339aa2d973dcd257098d84fd6)), closes [#5698](https://github.com/Esri/calcite-components/issues/5698) +- **accordion-item:** bumping the scale of icon to M when parent accordion is scale L ([#6252](https://github.com/Esri/calcite-components/issues/6252)) ([a6bb7da](https://github.com/Esri/calcite-components/commit/a6bb7da936014b0f5514dea8951ff6cde0d7a604)), closes [#5698](https://github.com/Esri/calcite-components/issues/5698) -- **button:** neutral and outline button now has correct border color ([#6269](https://github.com/Esri/calcite-components/issues/6269)) ([24e6d32](https://github.com/Esri/calcite-components/commit/24e6d3268855bd5f00f04b5c52bc62c8cb6724e0)), closes [#5331](https://github.com/Esri/calcite-components/issues/5331) +* **combobox-item:** bumping the scale of icon to M when parent combobox is scale L ([#6253](https://github.com/Esri/calcite-components/issues/6253)) ([051cb3f](https://github.com/Esri/calcite-components/commit/051cb3f498b2f43339aa2d973dcd257098d84fd6)), closes [#5698](https://github.com/Esri/calcite-components/issues/5698) -- **input, input-number, input-text:** allow slotted action to be independently disabled ([#6250](https://github.com/Esri/calcite-components/issues/6250)) ([8197c18](https://github.com/Esri/calcite-components/commit/8197c185c1fb23ebc5e7b0ff3bb6594c445d8736)), closes [#6241](https://github.com/Esri/calcite-components/issues/6241) +* **button:** neutral and outline button now has correct border color ([#6269](https://github.com/Esri/calcite-components/issues/6269)) ([24e6d32](https://github.com/Esri/calcite-components/commit/24e6d3268855bd5f00f04b5c52bc62c8cb6724e0)), closes [#5331](https://github.com/Esri/calcite-components/issues/5331) -- **input, input-number:** nudge buttons increment/decrement once per interaction ([#6240](https://github.com/Esri/calcite-components/issues/6240)) ([fd10ac5](https://github.com/Esri/calcite-components/commit/fd10ac5976e00c30b9acbbe9ea19b2ab284eac6d)), closes [#5785](https://github.com/Esri/calcite-components/issues/5785) +* **input, input-number, input-text:** allow slotted action to be independently disabled ([#6250](https://github.com/Esri/calcite-components/issues/6250)) ([8197c18](https://github.com/Esri/calcite-components/commit/8197c185c1fb23ebc5e7b0ff3bb6594c445d8736)), closes [#6241](https://github.com/Esri/calcite-components/issues/6241) -- **tree-item:** overflow slotted elements are no longer hidden ([#5261](https://github.com/Esri/calcite-components/issues/5261)) ([4aa1f7e](https://github.com/Esri/calcite-components/commit/4aa1f7eaa437f7bf25c5bbced8559b41944e32fb)), closes [#5168](https://github.com/Esri/calcite-components/issues/5168) +* **input, input-number:** nudge buttons increment/decrement once per interaction ([#6240](https://github.com/Esri/calcite-components/issues/6240)) ([fd10ac5](https://github.com/Esri/calcite-components/commit/fd10ac5976e00c30b9acbbe9ea19b2ab284eac6d)), closes [#5785](https://github.com/Esri/calcite-components/issues/5785) -- **list-item:** use pointer cursor when selection mode is none ([#6213](https://github.com/Esri/calcite-components/issues/6213)) ([6b43b91](https://github.com/Esri/calcite-components/commit/6b43b916a1ee3908635ab0b682d7a2d209545b22)), closes [#6123](https://github.com/Esri/calcite-components/issues/6123) +* **tree-item:** overflow slotted elements are no longer hidden ([#5261](https://github.com/Esri/calcite-components/issues/5261)) ([4aa1f7e](https://github.com/Esri/calcite-components/commit/4aa1f7eaa437f7bf25c5bbced8559b41944e32fb)), closes [#5168](https://github.com/Esri/calcite-components/issues/5168) -- **alert:** Correctly dismiss after hovering ([#6228](https://github.com/Esri/calcite-components/issues/6228)) ([66dd692](https://github.com/Esri/calcite-components/commit/66dd692d6030b2e6957603101a78f728ff31c6e2)), closes [#6222](https://github.com/Esri/calcite-components/issues/6222) +* **list-item:** use pointer cursor when selection mode is none ([#6213](https://github.com/Esri/calcite-components/issues/6213)) ([6b43b91](https://github.com/Esri/calcite-components/commit/6b43b916a1ee3908635ab0b682d7a2d209545b22)), closes [#6123](https://github.com/Esri/calcite-components/issues/6123) -- **input, input-number:** increment/decrement to the min/max when value is below/above ([#6207](https://github.com/Esri/calcite-components/issues/6207)) ([d9eb215](https://github.com/Esri/calcite-components/commit/d9eb215f423f68dfa67d9a69b38d7328a8580b86)), closes [#6201](https://github.com/Esri/calcite-components/issues/6201) +* **alert:** Correctly dismiss after hovering ([#6228](https://github.com/Esri/calcite-components/issues/6228)) ([66dd692](https://github.com/Esri/calcite-components/commit/66dd692d6030b2e6957603101a78f728ff31c6e2)), closes [#6222](https://github.com/Esri/calcite-components/issues/6222) -- **modal:** close button does not change header height ([#6205](https://github.com/Esri/calcite-components/issues/6205)) ([f1d73a8](https://github.com/Esri/calcite-components/commit/f1d73a8c92678f3429fe2ac7215a15cf45c87692)), closes [#1707](https://github.com/Esri/calcite-components/issues/1707) [#5210](https://github.com/Esri/calcite-components/issues/5210) +* **input, input-number:** increment/decrement to the min/max when value is below/above ([#6207](https://github.com/Esri/calcite-components/issues/6207)) ([d9eb215](https://github.com/Esri/calcite-components/commit/d9eb215f423f68dfa67d9a69b38d7328a8580b86)), closes [#6201](https://github.com/Esri/calcite-components/issues/6201) -- **input-date-picker:** update input value when changing locale ([#6197](https://github.com/Esri/calcite-components/issues/6197)) ([65478be](https://github.com/Esri/calcite-components/commit/65478be957a20cc4bbc36d52c166c132467e57e4)), closes [#5886](https://github.com/Esri/calcite-components/issues/5886) [#5969](https://github.com/Esri/calcite-components/issues/5969) +* **modal:** close button does not change header height ([#6205](https://github.com/Esri/calcite-components/issues/6205)) ([f1d73a8](https://github.com/Esri/calcite-components/commit/f1d73a8c92678f3429fe2ac7215a15cf45c87692)), closes [#1707](https://github.com/Esri/calcite-components/issues/1707) [#5210](https://github.com/Esri/calcite-components/issues/5210) -- **date-picker:** modify weekStart value for ar locale ([#6154](https://github.com/Esri/calcite-components/issues/6154)) ([f9fe230](https://github.com/Esri/calcite-components/commit/f9fe230ba07d4c581993efacff04303700c07106)) +* **input-date-picker:** update input value when changing locale ([#6197](https://github.com/Esri/calcite-components/issues/6197)) ([65478be](https://github.com/Esri/calcite-components/commit/65478be957a20cc4bbc36d52c166c132467e57e4)), closes [#5886](https://github.com/Esri/calcite-components/issues/5886) [#5969](https://github.com/Esri/calcite-components/issues/5969) -- **time-picker:** high contrast visibility of outlines in focus and hover states ([#6129](https://github.com/Esri/calcite-components/issues/6129)) ([90ddff1](https://github.com/Esri/calcite-components/commit/90ddff10b712758bd4c60b8279b45e4c9997748d)) +* **date-picker:** modify weekStart value for ar locale ([#6154](https://github.com/Esri/calcite-components/issues/6154)) ([f9fe230](https://github.com/Esri/calcite-components/commit/f9fe230ba07d4c581993efacff04303700c07106)) -- **tooltip:** Fix hover logic for elements within shadowRoot. ([#6119](https://github.com/Esri/calcite-components/issues/6119)) ([f490e5e](https://github.com/Esri/calcite-components/commit/f490e5ee0a4ae75f0e3b727f4ce0f7925bc8e53c)) +* **time-picker:** high contrast visibility of outlines in focus and hover states ([#6129](https://github.com/Esri/calcite-components/issues/6129)) ([90ddff1](https://github.com/Esri/calcite-components/commit/90ddff10b712758bd4c60b8279b45e4c9997748d)) + +* **tooltip:** Fix hover logic for elements within shadowRoot. ([#6119](https://github.com/Esri/calcite-components/issues/6119)) ([f490e5e](https://github.com/Esri/calcite-components/commit/f490e5ee0a4ae75f0e3b727f4ce0f7925bc8e53c)) diff --git a/package-lock.json b/package-lock.json index 4730d71815b..220955a561d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.720", + "version": "1.0.0-next.721", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.720", + "version": "1.0.0-next.721", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index f9a0078e14b..1f08aa681a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.720", + "version": "1.0.0-next.721", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 828fcc384aab75cff43c1b9d6c3239d7d0f0862c Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 12 Jan 2023 12:08:46 -0600 Subject: [PATCH 03/12] refactor(input-time-picker)!: remove string payload from event. (#6275) BREAKING CHANGE: Removed event payload information. - Removed the event payload from `calciteInputTimePickerChange` event. --- src/components/input-time-picker/input-time-picker.tsx | 2 +- src/components/input-time-picker/readme.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index 8df3058a772..b154d247fe9 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -213,7 +213,7 @@ export class InputTimePicker /** * Fires when the time value is changed as a result of user input. */ - @Event({ cancelable: true }) calciteInputTimePickerChange: EventEmitter; + @Event({ cancelable: true }) calciteInputTimePickerChange: EventEmitter; //-------------------------------------------------------------------------- // diff --git a/src/components/input-time-picker/readme.md b/src/components/input-time-picker/readme.md index f5bafced629..0d8bb686077 100644 --- a/src/components/input-time-picker/readme.md +++ b/src/components/input-time-picker/readme.md @@ -34,9 +34,9 @@ ## Events -| Event | Description | Type | -| ------------------------------ | --------------------------------------------------------------- | --------------------- | -| `calciteInputTimePickerChange` | Fires when the time value is changed as a result of user input. | `CustomEvent` | +| Event | Description | Type | +| ------------------------------ | --------------------------------------------------------------- | ------------------- | +| `calciteInputTimePickerChange` | Fires when the time value is changed as a result of user input. | `CustomEvent` | ## Methods From 6cf1264c2e0e343f57a8bdde174b109bd363711b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 12 Jan 2023 18:30:30 +0000 Subject: [PATCH 04/12] 1.0.0-next.722 --- CHANGELOG.md | 30 +++++++++++++++++------------- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 20 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ad29805bb7f..86fc4fc198f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,17 +9,21 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### ⚠ BREAKING CHANGES -- **styles:** Use "mode" nomenclature instead of "theme" +- **input-time-picker:** Removed event payload information. + +* Removed the event payload from `calciteInputTimePickerChange` event. + +* **styles:** Use "mode" nomenclature instead of "theme" - `.calcite-theme-auto`, `.calcite-theme-dark`, and `.calcite-theme-light` CSS classes have been replaced with `.calcite-mode-auto`, `.calcite-mode-dark`, and `.calcite-mode-light ` -- **modal, panel, popover**: Removed `focusId` parameter from `setFocus` methods. +* **modal, panel, popover**: Removed `focusId` parameter from `setFocus` methods. When the `setFocus` method is called the first focusable element will be focused. -- **panel, shell-panel, flow-item:** Update available css variables. +* **panel, shell-panel, flow-item:** Update available css variables. - Removes `heightScale` and `widthScale` properties from Panel and Flow Item. @@ -27,50 +31,50 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm available width of parent component. - Documents public css variables for Shell Panel. -- **accordion:** +* **accordion:** - Removed `"default"` value for the `appearance` property, use `"solid"` instead. - Removed `"minimal"` value for the `appearance` property. -- **card:** +* **card:** - Removed `footer-leading` and `footer-trailing` slots, use `footer-start` and `footer-end` instead. -- **combobox-item:** +* **combobox-item:** - Removed `toggleSelected` method, use the `selected` property instead. -- **date-picker:** +* **date-picker:** - Removed the property `startAsDate`, use `valueAsDate` instead. - Removed the property `endAsDate`, use `valueAsDate` instead. -- **pagination:** +* **pagination:** - Removed the `--calcite-pagination-spacing` css variable -- **popover:** +* **popover:** - Removed the `toggle` method, use the `open` property instead. -- **radio-button-group:** +* **radio-button-group:** - Added property `selectedItem`. - Removed the `event.detail` property on the event `calciteRadioButtonGroupChange`, use `event.target` and the property `selectedItem` instead. -- **radio-group, radio-group-item:** Renames components. +* **radio-group, radio-group-item:** Renames components. - `calcite-radio-group` has been renamed to `calcite-segmented-control`. - `calcite-radio-group-item` has been renamed to `calcite-segmented-control-item`. -- **segmented-control:** Updates `segmented-control` event to `calciteSegmentedControlChange`. +* **segmented-control:** Updates `segmented-control` event to `calciteSegmentedControlChange`. -- **stepper:** +* **stepper:** - Added property `selectedItem`. - Removed the `event.detail` property on the event diff --git a/package-lock.json b/package-lock.json index 220955a561d..00ae2ab3431 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.721", + "version": "1.0.0-next.722", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.721", + "version": "1.0.0-next.722", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 1f08aa681a7..a1d57cfe545 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.721", + "version": "1.0.0-next.722", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 90be19c52bcb4cdeb39b0b75b4392a414ab35db9 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 12 Jan 2023 11:15:03 -0800 Subject: [PATCH 05/12] refactor(color-picker)!: remove appearance property (#6276) BREAKING CHANGE: removed `appearance` property - Removed `appearance` property, use `--calcite-ui-border-1: transparent` to remove the border instead of the `"minimal"` value Co-authored-by: Kitty Hurley --- src/components/color-picker/color-picker.e2e.ts | 8 -------- src/components/color-picker/color-picker.scss | 6 ------ src/components/color-picker/color-picker.tsx | 7 +------ src/components/color-picker/usage/Basic.md | 2 +- src/components/color-picker/usage/Minimal.md | 5 ----- src/components/interfaces.ts | 2 +- src/demos/color-picker.html | 6 +++--- 7 files changed, 6 insertions(+), 30 deletions(-) delete mode 100644 src/components/color-picker/usage/Minimal.md diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts index bb513404e7b..00620d16002 100644 --- a/src/components/color-picker/color-picker.e2e.ts +++ b/src/components/color-picker/color-picker.e2e.ts @@ -44,10 +44,6 @@ describe("calcite-color-picker", () => { it("reflects", async () => reflects("calcite-color-picker", [ - { - propertyName: "appearance", - value: "minimal" - }, { propertyName: "scale", value: "m" @@ -62,10 +58,6 @@ describe("calcite-color-picker", () => { propertyName: "allowEmpty", defaultValue: false }, - { - propertyName: "appearance", - defaultValue: "solid" - }, { propertyName: "format", defaultValue: "auto" diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss index 1ab3ce15aff..5edbf284a3e 100644 --- a/src/components/color-picker/color-picker.scss +++ b/src/components/color-picker/color-picker.scss @@ -93,12 +93,6 @@ $gap--large: 12px; } } -:host([appearance="minimal"]) { - .container { - border: none; - } -} - .container { @apply bg-foreground-1; display: inline-block; diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index f47b200ecd3..61ced82ce9e 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -15,7 +15,7 @@ import { import Color from "color"; import { throttle } from "lodash-es"; import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; -import { Appearance, Scale } from "../interfaces"; +import { Scale } from "../interfaces"; import { ColorMode, ColorValue, InternalColor } from "./interfaces"; import { CSS, @@ -87,11 +87,6 @@ export class ColorPicker */ @Prop({ reflect: true }) allowEmpty = false; - /** - * Specifies the appearance style of the component - - */ - @Prop({ reflect: true }) appearance: Extract<"minimal" | "solid", Appearance> = "solid"; - /** * Internal prop for advanced use-cases. * diff --git a/src/components/color-picker/usage/Basic.md b/src/components/color-picker/usage/Basic.md index 4084c7d701a..055e256ecfb 100644 --- a/src/components/color-picker/usage/Basic.md +++ b/src/components/color-picker/usage/Basic.md @@ -1,3 +1,3 @@ ```html - + ``` diff --git a/src/components/color-picker/usage/Minimal.md b/src/components/color-picker/usage/Minimal.md deleted file mode 100644 index 21d4e564815..00000000000 --- a/src/components/color-picker/usage/Minimal.md +++ /dev/null @@ -1,5 +0,0 @@ -For a minimal design, you can hide unused color formats and options: - -```html - -``` diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts index fec95ded3e3..1e60623df8f 100644 --- a/src/components/interfaces.ts +++ b/src/components/interfaces.ts @@ -1,6 +1,6 @@ /* Note: using `.d.ts` file extension will exclude it from the output build */ export type Alignment = "start" | "center" | "end"; -export type Appearance = "minimal" | "outline" | "outline-fill" | "solid" | "transparent"; +export type Appearance = "outline" | "outline-fill" | "solid" | "transparent"; export type Columns = 1 | 2 | 3 | 4 | 5 | 6; export type FlipContext = "both" | "start" | "end"; export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success"; diff --git a/src/demos/color-picker.html b/src/demos/color-picker.html index d70b168befc..25166fe44a5 100644 --- a/src/demos/color-picker.html +++ b/src/demos/color-picker.html @@ -146,21 +146,21 @@

Alert

Color-picker in Popover
- + Activate Popover
- + Activate Popover
- + Activate Popover
From a408895ee789a919bc4a032a5209c7f9c832024f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 12 Jan 2023 19:29:36 +0000 Subject: [PATCH 06/12] 1.0.0-next.723 --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86fc4fc198f..bc99da46073 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### ⚠ BREAKING CHANGES +- **color-picker:** removed `appearance` property + +* Removed `appearance` property, use `--calcite-ui-border-1: +transparent` to remove the border instead of the `"minimal"` value + +Co-authored-by: Kitty Hurley + - **input-time-picker:** Removed event payload information. * Removed the event payload from `calciteInputTimePickerChange` event. diff --git a/package-lock.json b/package-lock.json index 00ae2ab3431..cdc74e2d733 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.722", + "version": "1.0.0-next.723", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.722", + "version": "1.0.0-next.723", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index a1d57cfe545..12b627ee113 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.722", + "version": "1.0.0-next.723", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 1bdb9c11b52a2f5de06d963def7d2e469343ea07 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Fri, 13 Jan 2023 09:50:13 -0800 Subject: [PATCH 07/12] feat(date-picker): Update border color (#6273) - Updates Date Picker border color -- cc @ashetland @SkyeSeitz --- src/components/date-picker/date-picker.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/date-picker/date-picker.scss b/src/components/date-picker/date-picker.scss index d4552c15582..835e4a54972 100644 --- a/src/components/date-picker/date-picker.scss +++ b/src/components/date-picker/date-picker.scss @@ -1,5 +1,5 @@ :host { - @apply border-color-2 + @apply border-color-1 bg-foreground-1 relative inline-block From 2cd4999cf3463bd0d94b7e20349e9f7ebc532663 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 13 Jan 2023 18:08:35 +0000 Subject: [PATCH 08/12] 1.0.0-next.724 --- CHANGELOG.md | 8 +++++--- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bc99da46073..9695d2082fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -90,11 +90,13 @@ Co-authored-by: Kitty Hurley ### Features -- **panel:** Allow Panel to fill height of parent ([#6256](https://github.com/Esri/calcite-components/issues/6256)) ([f556efc](https://github.com/Esri/calcite-components/commit/f556efc8ee8c02da7fb73208bc8fde0f28ef88d3)) +- **date-picker:** Update border color ([#6273](https://github.com/Esri/calcite-components/issues/6273)) ([1bdb9c1](https://github.com/Esri/calcite-components/commit/1bdb9c11b52a2f5de06d963def7d2e469343ea07)) -- **tab-nav:** Add `selectedTitle` property ([#6149](https://github.com/Esri/calcite-components/issues/6149)) ([e48096c](https://github.com/Esri/calcite-components/commit/e48096cf361d0efb292849e10040f6f0e61f8bbc)) +* **panel:** Allow Panel to fill height of parent ([#6256](https://github.com/Esri/calcite-components/issues/6256)) ([f556efc](https://github.com/Esri/calcite-components/commit/f556efc8ee8c02da7fb73208bc8fde0f28ef88d3)) -- **popover, modal:** Add the ability to update focus trap elements after initialization ([#6141](https://github.com/Esri/calcite-components/issues/6141)) ([806ca32](https://github.com/Esri/calcite-components/commit/806ca32788d2960df97ad18efcb731633f133fcb)) +* **tab-nav:** Add `selectedTitle` property ([#6149](https://github.com/Esri/calcite-components/issues/6149)) ([e48096c](https://github.com/Esri/calcite-components/commit/e48096cf361d0efb292849e10040f6f0e61f8bbc)) + +* **popover, modal:** Add the ability to update focus trap elements after initialization ([#6141](https://github.com/Esri/calcite-components/issues/6141)) ([806ca32](https://github.com/Esri/calcite-components/commit/806ca32788d2960df97ad18efcb731633f133fcb)) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index cdc74e2d733..954b4983a3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.723", + "version": "1.0.0-next.724", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.723", + "version": "1.0.0-next.724", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 12b627ee113..8c0ae721043 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.723", + "version": "1.0.0-next.724", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 151ff52a3d7830ac9aff419411f69be91dddcb5d Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Fri, 13 Jan 2023 12:42:07 -0800 Subject: [PATCH 09/12] docs: update component READMEs (#6274) This PR was automatically generated by the update-doc GitHub action Co-authored-by: jcfranco --- src/components/accordion/readme.md | 2 +- src/components/color-picker/readme.md | 11 +---------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md index 482e70b2872..a5bb8def592 100644 --- a/src/components/accordion/readme.md +++ b/src/components/accordion/readme.md @@ -20,7 +20,7 @@ | Property | Attribute | Description | Type | Default | | --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------ | -| `appearance` | `appearance` | Specifies the appearance of the component. | `"minimal" \| "solid" \| "transparent"` | `"solid"` | +| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | | `iconPosition` | `icon-position` | Specifies the placement of the icon in the header. | `"end" \| "start"` | `"end"` | | `iconType` | `icon-type` | Specifies the type of the icon in the header. | `"caret" \| "chevron" \| "plus-minus"` | `"chevron"` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | diff --git a/src/components/color-picker/readme.md b/src/components/color-picker/readme.md index 0ff82330add..f6729bbece5 100644 --- a/src/components/color-picker/readme.md +++ b/src/components/color-picker/readme.md @@ -7,15 +7,7 @@ ### Basic ```html - -``` - -### Minimal - -For a minimal design, you can hide unused color formats and options: - -```html - + ``` ## Properties @@ -23,7 +15,6 @@ For a minimal design, you can hide unused color formats and options: | Property | Attribute | Description | Type | Default | | ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | | `allowEmpty` | `allow-empty` | When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. | `boolean` | `false` | -| `appearance` | `appearance` | Specifies the appearance style of the component - | `"minimal" \| "solid"` | `"solid"` | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `format` | `format` | The format of `value`. When `"auto"`, the format will be inferred from `value` when set. | `"auto" \| "hex" \| "hexa" \| "hsl" \| "hsl-css" \| "hsla" \| "hsla-css" \| "hsv" \| "hsva" \| "rgb" \| "rgb-css" \| "rgba" \| "rgba-css"` | `defaultFormat` | | `hideChannels` | `hide-channels` | When `true`, hides the RGB/HSV channel inputs. | `boolean` | `false` | From de11401acf69cc7c3c0ef3362975af3c5365b618 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Fri, 13 Jan 2023 13:29:38 -0800 Subject: [PATCH 10/12] feat(modal)!: Updates accepted `width` values, adds css variables for width and height (#6166) BREAKING CHANGE: Updates accepted `width` values, adds css variables for width and height. - The `width` property no longer accepts a custom width. Accepted values are `s`, `m`, `l`. - Adds `--calcite-modal-width` and `--calcite-modal-height` css variables. Co-authored-by: Ben Elan --- src/components/modal/modal.e2e.ts | 73 +++++- src/components/modal/modal.scss | 28 ++- src/components/modal/modal.stories.ts | 6 +- src/components/modal/modal.tsx | 98 +++++--- src/components/modal/resources.ts | 2 + src/demos/modal.html | 236 +++++++++++++++----- src/demos/shell/basic-slotted-elements.html | 139 +++++++++++- 7 files changed, 471 insertions(+), 111 deletions(-) diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index f055aa26ded..85ce2cb1956 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -23,7 +23,9 @@ describe("calcite-modal properties", () => { it("sets custom width correctly", async () => { const page = await newE2EPage(); - await page.setContent(``); + // set large page to ensure test modal isn't becoming fullscreen + page.setViewport({ width: 1440, height: 1440 }); + await page.setContent(``); const modal = await page.find("calcite-modal"); await modal.setProperty("open", true); await page.waitForChanges(); @@ -31,7 +33,74 @@ describe("calcite-modal properties", () => { const m = elm.shadowRoot.querySelector(".modal"); return window.getComputedStyle(m).getPropertyValue("width"); }); - expect(style).toEqual("400px"); + expect(style).toEqual("600px"); + }); + + it("sets custom height correctly", async () => { + const page = await newE2EPage(); + // set large page to ensure test modal isn't becoming fullscreen + page.setViewport({ width: 1440, height: 1440 }); + await page.setContent(``); + const modal = await page.find("calcite-modal"); + await modal.setProperty("open", true); + await page.waitForChanges(); + const style = await page.$eval("calcite-modal", (elm) => { + const m = elm.shadowRoot.querySelector(".modal"); + return window.getComputedStyle(m).getPropertyValue("height"); + }); + expect(style).toEqual("600px"); + }); + + it("expectedly does not set custom width when `fullscreen` is true", async () => { + const page = await newE2EPage(); + // set large page to ensure test modal isn't becoming fullscreen + page.setViewport({ width: 1440, height: 1440 }); + await page.setContent(``); + const modal = await page.find("calcite-modal"); + await modal.setProperty("open", true); + await page.waitForChanges(); + const style = await page.$eval("calcite-modal", (elm) => { + const m = elm.shadowRoot.querySelector(".modal"); + return window.getComputedStyle(m).getPropertyValue("width"); + }); + expect(style).not.toEqual("600px"); + }); + + it("expectedly does not set custom height when `fullscreen` is true", async () => { + const page = await newE2EPage(); + // set large page to ensure test modal isn't becoming fullscreen + page.setViewport({ width: 1440, height: 1440 }); + await page.setContent(``); + const modal = await page.find("calcite-modal"); + await modal.setProperty("open", true); + await page.waitForChanges(); + const style = await page.$eval("calcite-modal", (elm) => { + const m = elm.shadowRoot.querySelector(".modal"); + return window.getComputedStyle(m).getPropertyValue("height"); + }); + expect(style).not.toEqual("600px"); + }); + + it("does not overflow page bounds when requested css variable sizes are larger than viewport", async () => { + const page = await newE2EPage(); + // set small page to test overflow + page.setViewport({ width: 800, height: 800 }); + await page.setContent( + `` + ); + const modal = await page.find("calcite-modal"); + await modal.setProperty("open", true); + await page.waitForChanges(); + const styleW = await page.$eval("calcite-modal", (elm) => { + const m = elm.shadowRoot.querySelector(".modal"); + return window.getComputedStyle(m).getPropertyValue("width"); + }); + const styleH = await page.$eval("calcite-modal", (elm) => { + const m = elm.shadowRoot.querySelector(".modal"); + return window.getComputedStyle(m).getPropertyValue("height"); + }); + expect(styleW).toEqual("800px"); + expect(styleH).toEqual("800px"); }); it("calls the beforeClose method prior to closing", async () => { diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 8de29376aaa..e5ade1ea54f 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -6,6 +6,9 @@ * @prop --calcite-modal-content-background: Specifies the background color of content placed in the `content` slot. * @prop --calcite-modal-content-padding: Specifies the padding of the modal `content` slot. * @prop --calcite-modal-scrim-background: Specifies the background color of the modal scrim. + * @prop --calcite-modal-width: Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. + * @prop --calcite-modal-height: Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. + * */ :host { @@ -147,7 +150,7 @@ appearance-none border-none bg-transparent; - border-start-end-radius: theme("borderRadius.DEFAULT"); + padding-block: var(--calcite-modal-padding-internal); padding-inline: var(--calcite-modal-padding-internal); flex: 0 0 auto; calcite-icon { @@ -181,7 +184,7 @@ */ .content { @apply relative box-border block h-full overflow-auto p-0; - max-block-size: calc(100vh - 12rem); + max-block-size: 100%; background-color: var(--calcite-modal-content-background, theme("colors.background.foreground.1")); padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal)); @@ -239,12 +242,15 @@ slot[name="primary"] { */ @mixin modal-size($size, $width) { :host([width="#{$size}"]) .modal { - max-inline-size: $width; + @apply max-h-full max-w-full; + inline-size: var(--calcite-modal-width, $width); + block-size: var(--calcite-modal-height, auto); } + @media screen and (max-width: $width + 2 * $baseline) { :host([width="#{$size}"]) { .modal { - @apply m-0 h-full max-h-full w-full max-w-full rounded-none; + @apply m-0 h-full max-h-full w-full max-w-full; } .content { flex: 1 1 auto; @@ -252,7 +258,7 @@ slot[name="primary"] { } } :host([width="#{$size}"][docked]) .container { - @apply items-end; + align-items: flex-end; } } } @@ -270,7 +276,7 @@ slot[name="primary"] { */ :host([fullscreen]) { .modal { - @apply m-0 h-full max-h-full w-full max-w-full; + @apply m-0 max-h-full max-w-full h-full w-full rounded-none; --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95); --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1); } @@ -294,20 +300,12 @@ slot[name="primary"] { */ :host([docked]) { .modal { - @apply h-auto; + block-size: var(--calcite-modal-height, auto); } .content { @apply h-auto; flex: 1 1 auto; } - @media screen and (max-width: $viewport-medium) { - .modal { - border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0; - } - - .close { - } - } } /** diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts index 3a0e7dbaa4e..3f47d5e2257 100644 --- a/src/components/modal/modal.stories.ts +++ b/src/components/modal/modal.stories.ts @@ -37,17 +37,17 @@ export const simple = (): string => html` `; -export const darkModeRTLCustomSize_TestOnly = (): string => html` +export const darkModeRTLCustomSizeCSSVars_TestOnly = (): string => html`

Small Modal

@@ -64,7 +64,7 @@ export const darkModeRTLCustomSize_TestOnly = (): string => html` `; -darkModeRTLCustomSize_TestOnly.parameters = { modes: modesDarkDefault }; +darkModeRTLCustomSizeCSSVars_TestOnly.parameters = { modes: modesDarkDefault }; export const withTooltips_TestOnly = (): string => html` diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index cf0666462dc..f99f743b91a 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -119,10 +119,10 @@ export class Modal /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; - /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */ - @Prop({ reflect: true }) width: Scale | number = "m"; + /** Specifies the width of the component. */ + @Prop({ reflect: true }) width: Scale = "m"; - /** Sets the component to always be fullscreen (overrides `width`). */ + /** Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). */ @Prop({ reflect: true }) fullscreen: boolean; /** Specifies the kind of the component (will apply to top border). */ @@ -175,7 +175,9 @@ export class Modal connectedCallback(): void { this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); + this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] }); this.updateFooterVisibility(); + this.updateSizeCssVars(); connectConditionalSlotComponent(this); connectLocalized(this); connectMessages(this); @@ -184,6 +186,7 @@ export class Modal disconnectedCallback(): void { this.removeOverflowHiddenClass(); this.mutationObserver?.disconnect(); + this.cssVarObserver?.disconnect(); disconnectConditionalSlotComponent(this); deactivateFocusTrap(this); disconnectLocalized(this); @@ -199,7 +202,12 @@ export class Modal aria-modal="true" role="dialog" > -
+
{this.renderStyle()}
(this.modalContent = el)} > @@ -268,30 +276,41 @@ export class Modal } renderStyle(): VNode { - const hasCustomWidth = !isNaN(parseInt(`${this.width}`)); - return hasCustomWidth ? ( - - ) : null; + if (!this.fullscreen && (this.cssWidth || this.cssHeight)) { + return ( + + ); + } } //-------------------------------------------------------------------------- @@ -302,9 +321,13 @@ export class Modal modalContent: HTMLDivElement; - private mutationObserver: MutationObserver = createObserver("mutation", () => - this.updateFooterVisibility() - ); + private mutationObserver: MutationObserver = createObserver("mutation", () => { + this.updateFooterVisibility(); + }); + + private cssVarObserver: MutationObserver = createObserver("mutation", () => { + this.updateSizeCssVars(); + }); titleId: string; @@ -320,6 +343,10 @@ export class Modal contentId: string; + @State() cssWidth: string | number; + + @State() cssHeight: string | number; + @State() hasFooter = true; /** @@ -502,4 +529,9 @@ export class Modal private updateFooterVisibility = (): void => { this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]); }; + + private updateSizeCssVars = (): void => { + this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width"); + this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height"); + }; } diff --git a/src/components/modal/resources.ts b/src/components/modal/resources.ts index b1e6ad85bec..706c8d9a279 100644 --- a/src/components/modal/resources.ts +++ b/src/components/modal/resources.ts @@ -11,6 +11,8 @@ export const CSS = { primary: "primary", overflowHidden: "overflow-hidden", container: "container", + content: "content", + contentNoFooter: "content--no-footer", slottedInShell: "slotted-in-shell", // these classes help apply the animation in phases to only set transform on open/close diff --git a/src/demos/modal.html b/src/demos/modal.html index 69e2fc8d9a9..48f48a382d9 100644 --- a/src/demos/modal.html +++ b/src/demos/modal.html @@ -843,7 +843,11 @@

Small Modal

- +

Fullscreen modal

@@ -887,62 +891,21 @@

Docked

+ ************************************************** + * CSS Variable BACKGROUND + ************************************************** + -->
- -

Tab Fencing

+ +

Ui Background css overriding --calcite-modal-content-background

- When you open a modal, the focus should be set to the first focusable element. - LIKE THIS . -

-
- Anchors, , -
-
- Cancel - Save - - - - Tab Fencing - -
- - -
- -

Modal title

-
-

This modal will be 500 pixels wide on larger screens and become fullscreen below that.

-
- Cancel - - - - Custom width - -
- - -
- -

Grey Background

-
-

- By using the backgroundColor attribute, you can create a modal with a light grey background rather than - white. + By using the --calcite-modal-content-background css variable, you can create a modal with a light grey + background rather than white.

This allows you to have white components inside the modal with good separation.

Card Example

@@ -996,18 +959,177 @@

ArcGIS Online Sign In and Sign Up

Save - - Grey background + + Custom background via css var + +
+
+
+
+ + +
+ +

Modal title

+
+

This modal will be 1200 pixels wide on larger screens and become fullscreen below that.

+
+ Cancel + + + + Custom width via css var + +
+ + +
+ +

Modal title

+
+

+ This modal will be 900 pixels wide and 600px tall on larger screens and become fullscreen below that. +

+
+ Cancel + + + + Custom width and height via css var + +
+ + +
+ +

Modal title

+
+

This modal with "too big proportions" should never exceed page viewport, and will become fullscreen

+
+ Cancel + + + + "too big but doesn't overflow" + +
+ +
+
+
+ +
+ +

Modal title

+
+

Will be `"--calcite-modal-width: 96vw; --calcite-modal-height: 96vh"` width and height

+
+ Cancel + + + + Custom width and height distance with VH / VW + +
+ + +
+ +

Test custom sizes

+
+ + --calcite-modal-width + + + + --calcite-modal-height + + + + options + + none + fullscreen + docked + + + Expected behavior: none: css var for height + width adhered to. Below width, goes to fullscreen. + fullscreen: ignores css var for height + width. docked: css var for height + width adhered to. Below + width, docks, with provided height +
+ Cancel + + + Custom width and height preview
From 2b8656a4b1b389f7e4894054b23ef257b68cdf11 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 13 Jan 2023 21:43:41 +0000 Subject: [PATCH 11/12] 1.0.0-next.725 --- CHANGELOG.md | 20 ++++++++++++++++---- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9695d2082fa..8f466e4ac97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,16 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### ⚠ BREAKING CHANGES +- **modal:** Updates accepted `width` values, adds css variables for + width and height. + +* The `width` property no longer accepts a custom width. Accepted values + are `s`, `m`, `l`. +* Adds `--calcite-modal-width` and `--calcite-modal-height` css + variables. + +Co-authored-by: Ben Elan + - **color-picker:** removed `appearance` property * Removed `appearance` property, use `--calcite-ui-border-1: @@ -90,13 +100,15 @@ Co-authored-by: Kitty Hurley ### Features -- **date-picker:** Update border color ([#6273](https://github.com/Esri/calcite-components/issues/6273)) ([1bdb9c1](https://github.com/Esri/calcite-components/commit/1bdb9c11b52a2f5de06d963def7d2e469343ea07)) +- **modal:** Updates accepted `width` values, adds css variables for width and height ([#6166](https://github.com/Esri/calcite-components/issues/6166)) ([de11401](https://github.com/Esri/calcite-components/commit/de11401acf69cc7c3c0ef3362975af3c5365b618)) + +* **date-picker:** Update border color ([#6273](https://github.com/Esri/calcite-components/issues/6273)) ([1bdb9c1](https://github.com/Esri/calcite-components/commit/1bdb9c11b52a2f5de06d963def7d2e469343ea07)) -* **panel:** Allow Panel to fill height of parent ([#6256](https://github.com/Esri/calcite-components/issues/6256)) ([f556efc](https://github.com/Esri/calcite-components/commit/f556efc8ee8c02da7fb73208bc8fde0f28ef88d3)) +- **panel:** Allow Panel to fill height of parent ([#6256](https://github.com/Esri/calcite-components/issues/6256)) ([f556efc](https://github.com/Esri/calcite-components/commit/f556efc8ee8c02da7fb73208bc8fde0f28ef88d3)) -* **tab-nav:** Add `selectedTitle` property ([#6149](https://github.com/Esri/calcite-components/issues/6149)) ([e48096c](https://github.com/Esri/calcite-components/commit/e48096cf361d0efb292849e10040f6f0e61f8bbc)) +- **tab-nav:** Add `selectedTitle` property ([#6149](https://github.com/Esri/calcite-components/issues/6149)) ([e48096c](https://github.com/Esri/calcite-components/commit/e48096cf361d0efb292849e10040f6f0e61f8bbc)) -* **popover, modal:** Add the ability to update focus trap elements after initialization ([#6141](https://github.com/Esri/calcite-components/issues/6141)) ([806ca32](https://github.com/Esri/calcite-components/commit/806ca32788d2960df97ad18efcb731633f133fcb)) +- **popover, modal:** Add the ability to update focus trap elements after initialization ([#6141](https://github.com/Esri/calcite-components/issues/6141)) ([806ca32](https://github.com/Esri/calcite-components/commit/806ca32788d2960df97ad18efcb731633f133fcb)) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 954b4983a3e..355ce1eb571 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.724", + "version": "1.0.0-next.725", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.724", + "version": "1.0.0-next.725", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", diff --git a/package.json b/package.json index 8c0ae721043..128d6903c94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.724", + "version": "1.0.0-next.725", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From e8edf6b666a585330b2b7c00a7dfde8449bc54f8 Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Fri, 13 Jan 2023 17:07:51 -0800 Subject: [PATCH 12/12] fix(tab, tabs, tab-title, input, input-number, input-text, input-date-picker, input-time-picker): bumping the scale of icon to M when parent is scale L (#6267) **Related Issue:** #5698 ## Summary Bumping the scales of `iconStart` and `iconEnd` to M when the parent `tab-title`,`input`, `input-number`, `input-text`, `input-date-picker`, `input-time-picker` components are `scale="l"` for a visual distinction between larger and smaller components without affecting the height of the components when icon(s) are added or removed. Added `_testOnly` snapshots. --- .../input-date-picker.stories.ts | 13 ++++-- .../input-date-picker/input-date-picker.tsx | 8 +++- src/components/input-number/input-number.scss | 2 +- .../input-number/input-number.stories.ts | 35 ++++++++++++++- src/components/input-number/input-number.tsx | 8 ++-- src/components/input-text/input-text.scss | 2 +- .../input-text/input-text.stories.ts | 14 ++++++ src/components/input-text/input-text.tsx | 4 +- .../input-time-picker.stories.ts | 3 +- src/components/input/input.scss | 2 +- src/components/input/input.tsx | 10 ++--- src/components/tab-title/resources.ts | 8 ++++ src/components/tab-title/tab-title.e2e.ts | 15 ++++--- src/components/tab-title/tab-title.scss | 8 ++-- src/components/tab-title/tab-title.tsx | 12 ++--- src/components/tab/tab.scss | 3 +- src/components/tabs/tabs.stories.ts | 44 +++++-------------- 17 files changed, 122 insertions(+), 69 deletions(-) create mode 100644 src/components/tab-title/resources.ts diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts index e37388c226a..f0fb38f3026 100644 --- a/src/components/input-date-picker/input-date-picker.stories.ts +++ b/src/components/input-date-picker/input-date-picker.stories.ts @@ -64,14 +64,21 @@ export const flipPlacements_TestOnly = (): string => html` `; -export const laoNumberingSystem_TestOnly = (): string => html` +export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string => html`
`; + scale="l" + start="2020-12-12" + end="2020-12-16" + range="" + layout="horizontal" + > +
+`; export const darkModeRTL_TestOnly = (): string => html`
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index e9ab4024559..3e4bdd5a46f 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -519,12 +519,16 @@ export class InputDatePicker {this.range && this.layout === "horizontal" && (
- +
)} {this.range && this.layout === "vertical" && this.scale !== "s" && (
- +
)} {this.range && ( diff --git a/src/components/input-number/input-number.scss b/src/components/input-number/input-number.scss index ef29307c4b9..35418a3532e 100755 --- a/src/components/input-number/input-number.scss +++ b/src/components/input-number/input-number.scss @@ -146,7 +146,7 @@ } :host([icon][scale="l"]) input { - padding-inline-start: theme("padding.12"); + padding-inline-start: theme("padding.14"); } // positioning wrapper for icon and loader diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts index 145b7fcec16..09f368f0e99 100644 --- a/src/components/input-number/input-number.stories.ts +++ b/src/components/input-number/input-number.stories.ts @@ -116,8 +116,39 @@ export const darkModeRTL_TestOnly = (): string => html` `; darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; -export const hebrewNumberingSystem_TestOnly = (): string => - html``; +export const hebrewNumberingSystemAndMediumIconForLargeInputStyling_TestOnly = (): string => + html` + + + `; export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string => html``; diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx index 4c8d2319a09..ab833301873 100644 --- a/src/components/input-number/input-number.tsx +++ b/src/components/input-number/input-number.tsx @@ -877,7 +877,7 @@ export class InputNumber tabIndex={-1} type="button" > - + ); const iconEl = ( @@ -885,7 +885,7 @@ export class InputNumber class={CSS.inputIcon} flipRtl={this.iconFlipRtl} icon={this.requestedIcon} - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ); @@ -906,7 +906,7 @@ export class InputNumber tabIndex={-1} type="button" > - + ); @@ -925,7 +925,7 @@ export class InputNumber tabIndex={-1} type="button" > - + ); diff --git a/src/components/input-text/input-text.scss b/src/components/input-text/input-text.scss index b5d213a6584..0d0d2f4a13d 100755 --- a/src/components/input-text/input-text.scss +++ b/src/components/input-text/input-text.scss @@ -143,7 +143,7 @@ input:focus { } :host([icon][scale="l"]) input { - padding-inline-start: theme("padding.12"); + padding-inline-start: theme("padding.14"); } // positioning wrapper for icon and loader diff --git a/src/components/input-text/input-text.stories.ts b/src/components/input-text/input-text.stories.ts index dd36fdf314d..6c86a41429b 100644 --- a/src/components/input-text/input-text.stories.ts +++ b/src/components/input-text/input-text.stories.ts @@ -95,3 +95,17 @@ export const darkModeRTL_TestOnly = (): string => html`
`; darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; + +export const mediumIconForLargeScaleStyling_TestOnly = (): string => html` + + Input Label + + + +`; diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx index 813ca2c12d2..d1d95650bc4 100644 --- a/src/components/input-text/input-text.tsx +++ b/src/components/input-text/input-text.tsx @@ -592,7 +592,7 @@ export class InputText tabIndex={-1} type="button" > - + ); const iconEl = ( @@ -600,7 +600,7 @@ export class InputText class={CSS.inputIcon} flipRtl={this.iconFlipRtl} icon={this.requestedIcon} - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ); const prefixText =
{this.prefixText}
; diff --git a/src/components/input-time-picker/input-time-picker.stories.ts b/src/components/input-time-picker/input-time-picker.stories.ts index d29bdc6dfbe..e13cca4d33d 100644 --- a/src/components/input-time-picker/input-time-picker.stories.ts +++ b/src/components/input-time-picker/input-time-picker.stories.ts @@ -26,7 +26,8 @@ export const simple = (): string => html` `; -export const disabled_TestOnly = (): string => html``; +export const disabled_TestOnly = (): string => + html``; export const darkModeRTL_TestOnly = (): string => html` - + ); const iconEl = ( @@ -1027,7 +1027,7 @@ export class Input class={CSS.inputIcon} flipRtl={this.iconFlipRtl} icon={this.requestedIcon} - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ); @@ -1048,7 +1048,7 @@ export class Input tabIndex={-1} type="button" > - + ); @@ -1067,7 +1067,7 @@ export class Input tabIndex={-1} type="button" > - + ); @@ -1153,7 +1153,7 @@ export class Input />, this.isTextarea ? (
- +
) : null ] diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts new file mode 100644 index 00000000000..7f77684e88e --- /dev/null +++ b/src/components/tab-title/resources.ts @@ -0,0 +1,8 @@ +export const CSS = { + container: "container", + containerHasText: "container--has-text", + iconEnd: "icon-end", + iconStart: "icon-start", + iconPresent: "icon-present", + titleIcon: "calcite-tab-title--icon" +}; diff --git a/src/components/tab-title/tab-title.e2e.ts b/src/components/tab-title/tab-title.e2e.ts index 8642cf84f9f..0fcccd1f224 100644 --- a/src/components/tab-title/tab-title.e2e.ts +++ b/src/components/tab-title/tab-title.e2e.ts @@ -1,8 +1,11 @@ import { newE2EPage } from "@stencil/core/testing"; import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests"; +import { CSS } from "./resources"; describe("calcite-tab-title", () => { const tabTitleHtml = ""; + const iconStartHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconStart}`; + const iconEndHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconEnd}`; it("renders", async () => renders(tabTitleHtml, { display: "block" })); @@ -14,8 +17,8 @@ describe("calcite-tab-title", () => { const page = await newE2EPage(); await page.setContent(`Text`); const element = await page.find("calcite-tab-title"); - const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start"); - const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end"); + const iconStart = await page.find(iconStartHtml); + const iconEnd = await page.find(iconEndHtml); expect(element).toHaveAttribute(HYDRATED_ATTR); expect(iconStart).not.toBeNull(); expect(iconEnd).toBeNull(); @@ -25,8 +28,8 @@ describe("calcite-tab-title", () => { const page = await newE2EPage(); await page.setContent(`Text`); const element = await page.find("calcite-tab-title"); - const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start"); - const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end"); + const iconStart = await page.find(iconStartHtml); + const iconEnd = await page.find(iconEndHtml); expect(element).toHaveAttribute(HYDRATED_ATTR); expect(iconStart).toBeNull(); expect(iconEnd).not.toBeNull(); @@ -36,8 +39,8 @@ describe("calcite-tab-title", () => { const page = await newE2EPage(); await page.setContent(`Text`); const element = await page.find("calcite-tab-title"); - const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start"); - const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end"); + const iconStart = await page.find(iconStartHtml); + const iconEnd = await page.find(iconEndHtml); expect(element).toHaveAttribute(HYDRATED_ATTR); expect(iconStart).not.toBeNull(); expect(iconEnd).not.toBeNull(); diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss index edc4990f1d1..9c6c6b6c62b 100644 --- a/src/components/tab-title/tab-title.scss +++ b/src/components/tab-title/tab-title.scss @@ -59,7 +59,7 @@ :host([scale="l"]) { margin-inline-end: 1.5rem; .container { - @apply text-0h py-3; + @apply text-0h py-2.5; } } @@ -77,8 +77,7 @@ justify-center truncate border-b-2 - px-0 - py-2; + px-0; border-block-end-style: solid; } @@ -169,6 +168,9 @@ .container { @apply px-4; } + .icon-present { + padding-block: 11px; + } } @media (forced-colors: active) { diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx index 5c7f9d028a1..b3c76dbfb47 100644 --- a/src/components/tab-title/tab-title.tsx +++ b/src/components/tab-title/tab-title.tsx @@ -19,6 +19,7 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac import { createObserver } from "../../utils/observers"; import { FlipContext, Scale } from "../interfaces"; import { TabChangeEventDetail } from "../tab/interfaces"; +import { CSS } from "./resources"; import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; /** @@ -148,19 +149,19 @@ export class TabTitle implements InteractiveComponent { const iconStartEl = ( ); const iconEndEl = ( ); @@ -175,7 +176,8 @@ export class TabTitle implements InteractiveComponent {
this.resizeObserver?.observe(el)} > diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss index 4087e80de22..fd3b3980f51 100644 --- a/src/components/tab/tab.scss +++ b/src/components/tab/tab.scss @@ -27,5 +27,6 @@ section, } :host([scale="l"]) { - @apply text-0h py-3; + @apply text-0h; + padding-block: 13px; } diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts index 5f52d38c1bc..6c94558c677 100644 --- a/src/components/tabs/tabs.stories.ts +++ b/src/components/tabs/tabs.stories.ts @@ -150,39 +150,19 @@ export const justTabNav = (): string => html` `; -export const disabledTabs_TestOnly = (): string => { - const disabledLabel = "Disabled Tabs"; - const disabledValuesObj = { - Tab1: "tab1", - Tab2: "tab2", - Tab3: "tab3" - }; - const defaultValue = "tab2"; - const optionsKnobSelections = optionsKnob( - disabledLabel, - disabledValuesObj, - defaultValue, - { display: "multi-select" }, - "DISABLED-TABS" - ); - const tab1disabled = optionsKnobSelections.includes(disabledValuesObj.Tab1); - const tab2disabled = optionsKnobSelections.includes(disabledValuesObj.Tab2); - const tab3disabled = optionsKnobSelections.includes(disabledValuesObj.Tab3); - - return ` - - - Tab 1 Title - Tab 2 Title - Tab 3 Title - +export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html` + + + Tab 1 Title + Tab 2 Title + Tab 3 Title + -

Tab 1 Content

 -

Tab 2 Content

 -

Tab 3 Content

 - - `; -}; +

Tab 1 Content

 +

Tab 2 Content

 +

Tab 3 Content

 + +`; export const TabChilrenWithPercentageHeights = (): string => html`