Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Sep 27, 2023
Merged

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

merged 11 commits into from
Sep 27, 2023

Conversation

driskull
Copy link
Member

@driskull driskull commented Sep 20, 2023 •
edited

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

@driskull driskull self-assigned this Sep 20, 2023
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 20, 2023
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 20, 2023
@driskull driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 21, 2023
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 21, 2023
@driskull driskull marked this pull request as ready for review September 21, 2023 16:08
jcfranco
jcfranco approved these changes Sep 27, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/components/panel/panel.tsx Outdated
@@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. changed and awaiting @geospatialem's approval

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seal-approval

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awaiting @geospatialem's approval 👀 🙏

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seal-approval

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

@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
geospatialem approved these changes Sep 27, 2023
View reviewed changes
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts Show resolved Hide resolved
packages/calcite-components/src/components/panel/panel.scss Outdated Show resolved Hide resolved
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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seal-approval

@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 27, 2023
@driskull driskull merged commit 855754d into main Sep 27, 2023
15 checks passed
@driskull driskull deleted the dris0000/panel-flow-collapsing branch September 27, 2023 20:03
@calcite-admin calcite-admin mentioned this pull request Sep 27, 2023
Merged
geospatialem pushed a commit that referenced this pull request Oct 3, 2023
@calcite-admin @github-actions
chore: release main (#7718)
c6f0f81 
🤖 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/calcite-components@1.8.0...@esri/calcite-components@1.9.0)
(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/calcite-components-react@1.8.0...@esri/calcite-components-react@1.9.0)
(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@geospatialem geospatialem geospatialem approved these changes

@jcfranco jcfranco jcfranco approved these changes

@benelan benelan Awaiting requested review from benelan benelan is a code owner

Assignees

@driskull driskull

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 September Priorities - Main release
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@driskull @jcfranco @geospatialem