Merge branch 'master' into benelan/input-files-property

* master: 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) 1.0.0-next.725 feat(modal)!: Updates accepted `width` values, adds css variables for width and height (#6166) docs: update component READMEs (#6274) 1.0.0-next.724 feat(date-picker): Update border color (#6273) 1.0.0-next.723 refactor(color-picker)!: remove appearance property (#6276) 1.0.0-next.722 refactor(input-time-picker)!: remove string payload from event. (#6275) 1.0.0-next.721 fix(accordion-item): bumping the scale of icon to M when parent accordion is scale L (#6252)
Esri · Jan 14, 2023 · 3eb5582 · 3eb5582
2 parents a9b9a04 + e8edf6b
commit 3eb5582
Show file tree

Hide file tree

Showing 41 changed files with 698 additions and 260 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,68 +9,89 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **styles:** Use "mode" nomenclature instead of "theme"
+- **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 <belan@esri.com>
+
+- **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 <khurley@esri.com>
+
+- **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.
   - Removes css variables for Panel - the component will now fill
     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
@@ -79,6 +100,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 
+- **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))
 
 - **tab-nav:** Add `selectedTitle` property ([#6149](https://github.com/Esri/calcite-components/issues/6149)) ([e48096c](https://github.com/Esri/calcite-components/commit/e48096cf361d0efb292849e10040f6f0e61f8bbc))
@@ -87,31 +112,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)
+
+* **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)
 
-- **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)
+* **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, 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)
+* **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)
 
-- **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:** 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)
 
-- **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)
+* **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)
 
-- **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)
+* **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)
 
-- **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)
+* **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)
 
-- **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, 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)
 
-- **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)
+* **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-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)
+* **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)
 
-- **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))
+* **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))
 
-- **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))
+* **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))
+* **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))
 
 <!--@unreleased-section-end-->
 

diff --git a/package-lock.json b/package-lock.json
diff --git 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.725",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git 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"}
               />
             </div>
             {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
@@ -263,3 +263,29 @@ export const withIconStartAndEnd_TestOnly = (): string =>
       )}
     `
   );
+
+export const mediumIconForLargeAccordionItem_TestOnly = (): string => html`
+  <calcite-accordion scale="l" style="width: 400px">
+    <calcite-accordion-item heading="Accordion Item" scale="l"></calcite-accordion-item>
+    <calcite-accordion-item
+      heading="Accordion Item IconStart/End"
+      icon-start="plane"
+      icon-end="plane"
+      scale="l"
+    ></calcite-accordion-item>
+    <calcite-accordion-item heading="Accordion Item" scale="l" description="A great subtitle"></calcite-accordion-item>
+    <calcite-accordion-item
+      heading="Accordion Item IconStart/End"
+      icon-start="plane"
+      icon-end="plane"
+      scale="l"
+      description="A great subtitle"
+    ></calcite-accordion-item>
+    <calcite-accordion-item
+      heading="Accordion Item IconStart/End with a potentially two line title"
+      icon-start="banana"
+      icon-end="banana"
+      scale="l"
+    ></calcite-accordion-item>
+  </calcite-accordion>
+`;
diff --git 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/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
@@ -93,12 +93,6 @@ $gap--large: 12px;
   }
 }
 
-:host([appearance="minimal"]) {
-  .container {
-    border: none;
-  }
-}
-
 .container {
   @apply bg-foreground-1;
   display: inline-block;