feat(panel, flow-item): add support for collapsing content #7857

driskull · 2023-09-20T23:38:10Z

Related Issue: #7498

Summary

Add support for collapsing panel content via an action in the header
Adds props collapsible, collapsed and collapseDirection to both flow-item and panel
- collapseDirection is internal for discussion
- Depending on which way the panel expands, the icons may need to be reversed.
- This property allows that. cc @asangma for more information.
- We can remove this prop if we don't think its necessary
Adds event calcitePanelToggle.
- Block calls this event calciteBlockToggle.
- ActionPad calls this event calciteActionPadToggle
Copies t9n messages from block component (expand/collapse) messages.
Adds CSS custom properties for the panel/flow-item to disable the header's bottom border
- --calcite-panel-header-border-block-end
- --calcite-flow-item-header-border-block-end
Removes unused private properties on panel 🧹
Adds screenshot tests & stories
Adds usage file
Updates HTML file for panel
Adds e2e tests

jcfranco

👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈
👈↕️👈👈👈↕️👈👈↕️↕️👈👈↕️↕️↕️👈👈↕️↕️↕️👈↕️↕️↕️↕️👈↕️👈
👈↕️↕️👈👈↕️👈↕️👈👈↕️👈👈↕️👈👈↕️👈👈👈👈↕️👈👈👈👈↕️👈
👈↕️👈↕️👈↕️👈↕️👈👈↕️👈👈↕️👈👈↕️👈👈👈👈↕️↕️↕️👈👈↕️👈
👈↕️👈👈↕️↕️👈↕️👈👈↕️👈👈↕️👈👈↕️👈👈👈👈↕️👈👈👈👈👈👈
👈↕️👈👈👈↕️👈👈↕️↕️👈👈↕️↕️↕️👈👈↕️↕️↕️👈↕️↕️↕️↕️👈↕️👈
👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

jcfranco · 2023-09-27T17:14:57Z

packages/calcite-components/src/components/panel/panel.tsx

@@ -326,7 +341,8 @@ export class Panel
   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
   * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise.


I think this needs a bit more info. WDYT about promise that resolves once the content is scrolled to? + @geospatialem for editorial suggestions.

Applies to other @returns with the same description.

Cool. changed and awaiting @geospatialem's approval

jcfranco · 2023-09-27T17:18:08Z

packages/calcite-components/src/components/flow-item/flow-item.tsx

@@ -69,6 +69,23 @@ export class FlowItem
  /** When `true`, the component will be hidden. */
  @Prop({ reflect: true }) closed = false;

+  /**
+   * When `true`, hides the component's content area.


Nice, I like this description. +@geospatialem for an extra pair of eyes. ➕👀➕

Awaiting @geospatialem's approval 👀 🙏

jcfranco · 2023-09-27T18:13:05Z

@Elijbet I think we'll need to no longer mark toggle events as deprecated since this now adds precedent for a component with both open/close and toggle events. Let's sync up on this soon.

geospatialem

Awesome! 🎉 One comment regarding the doc for the CSS prop. WDYT?

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

packages/calcite-components/src/components/panel/panel.scss

geospatialem · 2023-09-27T19:32:09Z

packages/calcite-components/src/components/flow-item/flow-item.tsx

@@ -69,6 +69,23 @@ export class FlowItem
  /** When `true`, the component will be hidden. */
  @Prop({ reflect: true }) closed = false;

+  /**
+   * When `true`, hides the component's content area.


…ite-design-system into dris0000/panel-flow-collapsing

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Features * **action-group:** Add css custom properties to define gap and padding when layout is "grid" ([#7763](#7763)) ([b9bd0de](b9bd0de)) * **action-menu:** Add appearance property to configure trigger appearance ([#7867](#7867)) ([36ceaf1](36ceaf1)) * **alert:** Make component responsive ([#7755](#7755)) ([66222b5](66222b5)) * **block, input-time-picker, notice:** Adds `open`, `close`, `beforeOpen`, and `beforeClose` events for consistent event handling ([#7494](#7494)) ([04ce758](04ce758)) * **checkbox:** Add WCAG AA recommended minimum 24px square hotspot optimized for touch users ([#7773](#7773)) ([f13e2c4](f13e2c4)) * **flow, flow-item:** Allow calciteFlowItemBack event to be cancelled ([#7855](#7855)) ([b74b4df](b74b4df)) * **input-date-picker, input-time-picker:** Add status property ([#7915](#7915)) ([4d53346](4d53346)) * **input-time-zone:** Add max-items support ([#7705](#7705)) ([c698c27](c698c27)) * **input-time-zone:** Add time zone offset and name mode ([#7913](#7913)) ([80bd6ae](80bd6ae)) * **list:** Add newIndex and oldIndex event details to calciteListOrderChange event ([#7874](#7874)) ([0d5cc20](0d5cc20)) * **pagination:** Enable responsive layout ([#7722](#7722)) ([933a910](933a910)) * **panel, flow-item:** Add support for collapsing content ([#7857](#7857)) ([855754d](855754d)) ### Bug Fixes * **action-bar:** Improve overflowing horizontal actions. ([#7877](#7877)) ([52f2d2a](52f2d2a)) * **action-bar:** Overflow actions when overflowActionsDisabled is set to false ([#7873](#7873)) ([3dcceb0](3dcceb0)) * **action-menu:** Update active selection to not use the action's active property ([#7911](#7911)) ([50f85f1](50f85f1)) * **alert:** Regression fix to restore `calciteAlertBeforeOpen` and `calciteAlertOpen` event emitting ([#7767](#7767)) ([6bbae35](6bbae35)) * **button:** Provides context for AT users when used as reference element for collapsible content ([#7658](#7658)) ([50cb3a6](50cb3a6)) * **combobox:** Clears input value on blur ([#7721](#7721)) ([e04cc4e](e04cc4e)) * **combobox:** Fix filtering to avoid showing unrelated items ([#7704](#7704)) ([b6d32f3](b6d32f3)) * **dropdown-group:** Set selectionMode on slotted dropdown-item children ([#7897](#7897)) ([aa0731a](aa0731a)) * **dropdown:** Support dispatching enter key event on dropdown trigger ([#7752](#7752)) ([ba92463](ba92463)) * **select:** Allow setting an option value to an empty string ([#7769](#7769)) ([adca6ec](adca6ec)) * **stepper:** Improves AT Users experience with screen readers ([#7691](#7691)) ([071dec7](071dec7)) * **tab-nav:** Update indicator position when tab icon changes ([#7768](#7768)) ([cb877b3](cb877b3)) * **table:** Fix selection display in RTL ([#7907](#7907)) ([b4c8508](b4c8508)) * **tree:** Avoid modifying selected items for "none" selection-mode ([#7904](#7904)) ([0bd4a12](0bd4a12)) * **tree:** Fix tree keyboard selection issue ([#7908](#7908)) ([53d6c12](53d6c12)) * **tree:** Update tree selection per design spec ([#7852](#7852)) ([06b3594](06b3594)) </details> <details><summary>@esri/calcite-components-react: 1.9.0</summary> ## [1.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-10-03) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.9.0-next.18 to ^1.9.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(panel, flow-item): add support for collapsing content. #7498

34528db

driskull self-assigned this Sep 20, 2023

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 20, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 20, 2023

driskull added 5 commits September 20, 2023 16:54

events + tests

d593efa

fix tests

f6b53b2

story

1566fd5

add css custom properties

ff7eef8

update stories

1492f2d

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 21, 2023

Merge branch 'main' into dris0000/panel-flow-collapsing

2f55d06

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 21, 2023

driskull marked this pull request as ready for review September 21, 2023 16:08

driskull requested review from benelan, jcfranco, geospatialem and a team as code owners September 21, 2023 16:08

jcfranco approved these changes Sep 27, 2023

View reviewed changes

review fixes

afa6485

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 27, 2023

Merge branch 'main' into dris0000/panel-flow-collapsing

0f4d155

geospatialem approved these changes Sep 27, 2023

View reviewed changes

driskull added 2 commits September 27, 2023 12:38

review fixes

ecb5a22

Merge branch 'dris0000/panel-flow-collapsing' of github.com:Esri/calc…

03f3df8

…ite-design-system into dris0000/panel-flow-collapsing

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 27, 2023

driskull merged commit 855754d into main Sep 27, 2023
13 checks passed

driskull deleted the dris0000/panel-flow-collapsing branch September 27, 2023 20:03

github-actions bot added this to the 2023 September Priorities - Main release milestone Sep 27, 2023

calcite-admin mentioned this pull request Sep 27, 2023

chore: release main #7718

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(panel, flow-item): add support for collapsing content #7857

feat(panel, flow-item): add support for collapsing content #7857

driskull commented Sep 20, 2023 •

edited

Loading

jcfranco left a comment

jcfranco Sep 27, 2023

driskull Sep 27, 2023

geospatialem Sep 27, 2023

jcfranco Sep 27, 2023

driskull Sep 27, 2023

geospatialem Sep 27, 2023

jcfranco commented Sep 27, 2023

geospatialem left a comment

geospatialem Sep 27, 2023

feat(panel, flow-item): add support for collapsing content #7857

feat(panel, flow-item): add support for collapsing content #7857

Conversation

driskull commented Sep 20, 2023 • edited Loading

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Sep 27, 2023

Choose a reason for hiding this comment

driskull Sep 27, 2023

Choose a reason for hiding this comment

geospatialem Sep 27, 2023

Choose a reason for hiding this comment

jcfranco Sep 27, 2023

Choose a reason for hiding this comment

driskull Sep 27, 2023

Choose a reason for hiding this comment

geospatialem Sep 27, 2023

Choose a reason for hiding this comment

jcfranco commented Sep 27, 2023

geospatialem left a comment

Choose a reason for hiding this comment

geospatialem Sep 27, 2023

Choose a reason for hiding this comment

driskull commented Sep 20, 2023 •

edited

Loading