feat(block-group, block): add block-group component by driskull · Pull Request #11319 · Esri/calcite-design-system

driskull · 2025-01-16T19:26:14Z

Related Issue: #10382

Summary

add new component calcite-block-group
- allows dragging/sorting calcite-block elements
- add tests
- add story
- add demo html
calcite-block
- uses calcite-sort-handle instead of calcite-handle
- new property dragDisabled
- new property sortHandleOpen
- new events for calcite-sort-handle opening/closing
  - calciteBlockSortHandleBeforeClose
  - calciteBlockSortHandleBeforeOpen
  - calciteBlockSortHandleClose
  - calciteBlockSortHandleOpen
- adds tests
calcite-sort-handle to work without a setSize and setPosition for use with calcite-sortable-list.
remove unnecessary imports in css files (these are already apart of includes)

Notes:

Using calcite-sortable-list with calcite-block will no longer just work. A user would need to set the calcite-sortable-list's handleSelector property to be calcite-sort-handle instead of calcite-handle.
When we drag over a list-item, it will open. However, i'm not sure if we want to do that for block. Do we expect nested blocks? Would it be weird to open a collapsed block when dragging another block over it?

BlockGroup API Documentation

Properties

`canPull`

Type: (detail: BlockDragDetail) => boolean
Description: When provided, the method will be called to determine whether the element can move from the component.

`canPut`

Type: (detail: BlockDragDetail) => boolean
Description: When provided, the method will be called to determine whether the element can be added from another component.

`disabled`

Type: boolean
Default: false
Reflect: true
Description: When true, interaction is prevented and the component is displayed with lower opacity.

`dragEnabled`

Type: boolean
Default: false
Reflect: true
Description: When true, calcite-blocks are sortable via a draggable button.

`group`

Type: string
Description: The group identifier for the block group.

`label`

Type: string
Description: Specifies an accessible name for the component. When dragEnabled is true and multiple block-group sorting is enabled with group, specifies the component's name for dragging between block-groups.
Required: true

`loading`

Type: boolean
Default: false
Reflect: true
Description: When true, a busy indicator is displayed.

Methods

`setFocus`

Description: Sets focus on the component.
Returns: void

…locks. #10382

…roup.tsx Co-authored-by: Kitty Hurley <khurley@esri.com>

macandcheese

Awesome! Mostly just some doc and naming nitpick / questions.

Only real feedback from design perspective would be thinking about some auto-collapsing when dragging open Blocks, but that could follow as further improvement (and, looking at these events, maybe be handled by a dev if they wanted to).

macandcheese · 2025-01-27T23:37:06Z

 * @prop --calcite-loader-track-color: Specifies the component's track color.
 */

-@import "../../assets/styles/animation";


Nitpick: These style import removals could be done in a separate PR.

Agreed. Let's remove these separately. Applies to other non-block-related Sass files.

macandcheese · 2025-01-27T23:43:57Z

+  @property({ reflect: true }) disabled = false;
+
+  /** When `true`, `calcite-block`s are sortable via a draggable button. */
+  @property({ reflect: true }) dragEnabled = false;


Nitpick: the "via a draggable button" part of the doc could be cleaned up.... follow up - we use drag / sort in a lot of different places - is there any benefit to consolidating nomenclature there?

Yeah that would be good to come up with a preferred way to phrase these. It depends on context, it could be a drag, a sort/reorder or a transfer. cc @geospatialem

jcfranco

↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️
↕️🔲↕️↕️↕️🔲↕️↕️🔲🔲↕️↕️🔲🔲🔲↕️↕️🔲🔲🔲↕️🔲🔲🔲🔲↕️🔲↕️
↕️🔲🔲↕️↕️🔲↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️↕️↕️🔲↕️↕️↕️↕️🔲↕️
↕️🔲↕️🔲↕️🔲↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️↕️↕️🔲🔲🔲↕️↕️🔲↕️
↕️🔲↕️↕️🔲🔲↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️🔲↕️↕️↕️↕️🔲↕️↕️↕️↕️↕️↕️
↕️🔲↕️↕️↕️🔲↕️↕️🔲🔲↕️↕️🔲🔲🔲↕️↕️🔲🔲🔲↕️🔲🔲🔲🔲↕️🔲↕️
↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️↕️

Aside from some comments, this LGTM!

Since this is deprecating some items, can you use the commit override to add a separate note per deprecation (example)?

jcfranco · 2025-02-03T19:31:52Z

+export function updateBlockChildren(slotEl: HTMLSlotElement): void {
+  const blockChildren = slotEl
+    .assignedElements({ flatten: true })
+    .filter((el): el is Block["el"] => el?.matches(blockSelector));


el is guaranteed here, so ? is not needed.

Side note: we can start using Lit query decorators to simplify (e.g., https://lit.dev/docs/api/decorators/#queryAssignedElements).

Do we have a follow up issue to start using queryAssignedElements? If not, can you create one? I think it would be nice to do this everywhere.

jcfranco · 2025-02-03T19:34:27Z

 * @prop --calcite-loader-track-color: Specifies the component's track color.
 */

-@import "../../assets/styles/animation";


Agreed. Let's remove these separately. Applies to other non-block-related Sass files.

jcfranco · 2025-02-03T20:03:42Z

+      });
+
+      // Workaround for page.spyOnEvent() failing due to drag event payload being serialized and there being circular JSON structures from the payload elements. See: https://github.com/Esri/calcite-design-system/issues/7643
+      await page.$eval("#component2", (blockGroup: BlockGroup["el"]) => {


You might be able to use the new createEventTimePropValuesAsserter for some of these assertions.

I'll create a refactor issue to wire it up in more tests.

Can you create an issue to tackle it in both List and BlockGroup components?

jcfranco · 2025-02-03T20:40:48Z

Using calcite-sortable-list with calcite-block will no longer just work. A user would need to set the calcite-sortable-list's handleSelector property to be calcite-sort-handle instead of calcite-handle.

We should give a heads up to teams about this. sortable-list isn't supported as it is not public, but it is being used internally.

When we drag over a list-item, it will open. However, i'm not sure if we want to do that for block. Do we expect nested blocks? Would it be weird to open a collapsed block when dragging another block over it?

I think that's fine since nested blocks aren't supported at the moment.

**Related Issue:** #10382 ## Summary - add new component `calcite-block-group` - allows dragging/sorting `calcite-block` elements - add tests - add story - add demo html - `calcite-block` - uses `calcite-sort-handle` instead of `calcite-handle` - new property `dragDisabled` - new property `sortHandleOpen` - new events for `calcite-sort-handle` opening/closing - `calciteBlockSortHandleBeforeClose` - `calciteBlockSortHandleBeforeOpen` - `calciteBlockSortHandleClose` - `calciteBlockSortHandleOpen` - adds tests - `calcite-sort-handle` to work without a `setSize` and `setPosition` for use with `calcite-sortable-list`. - remove unnecessary imports in css files (these are already apart of includes) Notes: - Using `calcite-sortable-list` with `calcite-block` will no longer just work. A user would need to set the `calcite-sortable-list`'s `handleSelector` property to be `calcite-sort-handle` instead of `calcite-handle`. - When we drag over a list-item, it will open. However, i'm not sure if we want to do that for block. Do we expect nested blocks? Would it be weird to open a collapsed block when dragging another block over it? # BlockGroup API Documentation ## Properties ### `canPull` - **Type:** `(detail: BlockDragDetail) => boolean` - **Description:** When provided, the method will be called to determine whether the element can move from the component. ### `canPut` - **Type:** `(detail: BlockDragDetail) => boolean` - **Description:** When provided, the method will be called to determine whether the element can be added from another component. ### `disabled` - **Type:** `boolean` - **Default:** `false` - **Reflect:** `true` - **Description:** When `true`, interaction is prevented and the component is displayed with lower opacity. ### `dragEnabled` - **Type:** `boolean` - **Default:** `false` - **Reflect:** `true` - **Description:** When `true`, `calcite-block`s are sortable via a draggable button. ### `group` - **Type:** `string` - **Description:** The group identifier for the block group. ### `label` - **Type:** `string` - **Description:** Specifies an accessible name for the component. When `dragEnabled` is `true` and multiple block-group sorting is enabled with `group`, specifies the component's name for dragging between block-groups. - **Required:** `true` ### `loading` - **Type:** `boolean` - **Default:** `false` - **Reflect:** `true` - **Description:** When `true`, a busy indicator is displayed. ## Methods ### `setFocus` - **Description:** Sets focus on the component. - **Returns:** `void` --------- Co-authored-by: Kitty Hurley <khurley@esri.com>

driskull added 4 commits January 16, 2025 10:20

feat(block-group, block): add new block-group component for sorting b…

86d44fd

…locks. #10382

cleanup

0cbea75

cleanup

df632a5

test wip

a04d78f

github-actions Bot assigned driskull Jan 16, 2025

github-actions Bot added the enhancement Issues tied to a new feature or request. label Jan 16, 2025

macandcheese reviewed Jan 16, 2025

View reviewed changes

Comment thread packages/calcite-components/src/components/block-group/block-group.scss Outdated

driskull added 10 commits January 16, 2025 13:28

wip tests

b091e8c

tests

7319082

cleanup

43a3898

imports are already imported

04121a4

cleanup

7aecd89

wip, add stories

351bfe2

Merge branch 'dev' into dris0000/block-group

cc3bf75

stories

8d876d9

cleanup

5e70f2e

cleanup

e5c9237

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. new component Issues tied to a new component. labels Jan 17, 2025

additional stories

2d2d4e0

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2025

cleanup

026ea73

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2025

stories

c7fee0c

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2025

fix test

93c37d6

driskull marked this pull request as ready for review January 17, 2025 18:32

Update packages/calcite-components/src/components/block-group/block-g…

adde2f2

…roup.tsx Co-authored-by: Kitty Hurley <khurley@esri.com>

driskull requested a review from geospatialem January 24, 2025 21:56

macandcheese approved these changes Jan 27, 2025

View reviewed changes

review fixes

bdf408d

alisonailea approved these changes Jan 28, 2025

View reviewed changes

driskull added 5 commits January 28, 2025 16:13

cleanup

222a625

cleanup

5fc4430

fix move

bde2e54

Merge branch 'dev' into dris0000/block-group

c87e1df

review cleanup

15c405c

driskull removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 30, 2025

jcfranco reviewed Feb 3, 2025

View reviewed changes

jcfranco approved these changes Feb 3, 2025

View reviewed changes

driskull mentioned this pull request Feb 3, 2025

Explore making drag event detail interfaces generic and make it easier to set up #11434

Open

5 tasks

driskull added 2 commits February 3, 2025 13:45

review fixes

09a1b7d

Merge branch 'dev' into dris0000/block-group

d98663f

driskull mentioned this pull request Feb 3, 2025

[util]: reusable test util for drag and drop testing #11435

Open

driskull added 5 commits February 3, 2025 13:52

review fixes

17edf86

review fixes

2d2f8df

cleanup

3e9ded7

fix space in documentation

2d8c4aa

fix test

ad97896

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 3, 2025

driskull merged commit 8bbeaf5 into dev Feb 3, 2025

driskull deleted the dris0000/block-group branch February 3, 2025 23:02

github-actions Bot added this to the 2025-02-06 - 3.0.0 Feb Breaking Change Release milestone Feb 3, 2025

calcite-admin mentioned this pull request Feb 8, 2025

chore: release main #11500

Merged

jcfranco mentioned this pull request Feb 15, 2025

[Block] Expand keyboard navigation to include drag and drop functionality #6235

Closed

Conversation

driskull commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

BlockGroup API Documentation

Properties

canPull

canPut

disabled

dragEnabled

group

label

loading

Methods

setFocus

Uh oh!

Uh oh!

macandcheese left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jcfranco commented Feb 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

driskull commented Jan 16, 2025 •

edited

Loading

`canPull`

`canPut`

`disabled`

`dragEnabled`

`group`

`label`

`loading`

`setFocus`

jcfranco left a comment •

edited

Loading