feat(block-group, block): add block-group component #11319

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

packages/calcite-components/src/components/block-group/block-group.scss

geospatialem

Awesome! Works great with mouse, keyboard, JAWS, and NVDA! 💪🏻

Some doc-related suggestions for consistency, otherwise lookin' great! 🏆

packages/calcite-components/src/components/block-group/block-group.tsx

…roup.tsx Co-authored-by: Kitty Hurley <[email protected]>

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

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

@@ -15,8 +15,6 @@
 * @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.

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

packages/calcite-components/src/components/block-group/block-group.tsx

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

packages/calcite-components/src/components/block-group/block-group.tsx

+  @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)?

packages/calcite-components/src/components/block-group/block-group.scss

packages/calcite-components/src/components/block-group/interfaces.ts

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

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

packages/calcite-components/src/components/block-group/utils.ts

+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

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

@@ -15,8 +15,6 @@
 * @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

packages/calcite-components/src/components/block-group/block-group.e2e.ts

+      });
+
+      // 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?

packages/calcite-components/src/components/block-group/block-group.tsx

packages/calcite-components/src/components/block/utils.ts

packages/calcite-components/src/components/block-group/block-group.e2e.ts

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.

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

packages/calcite-components/src/components/block-group/block-group.scss Outdated Show resolved Hide resolved

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

geospatialem reviewed Jan 24, 2025

View reviewed changes

driskull and others added 3 commits January 24, 2025 09:00

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

d182516

…roup.tsx Co-authored-by: Kitty Hurley <[email protected]>

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

14d8eed

…roup.tsx Co-authored-by: Kitty Hurley <[email protected]>

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

adde2f2

…roup.tsx Co-authored-by: Kitty Hurley <[email protected]>

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
15 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(block-group, block): add block-group component #11319

feat(block-group, block): add block-group component #11319

driskull commented Jan 16, 2025 •

edited

Loading

geospatialem left a comment

macandcheese left a comment

macandcheese Jan 27, 2025

jcfranco Feb 3, 2025

macandcheese Jan 27, 2025

driskull Jan 28, 2025

jcfranco left a comment •

edited

Loading

jcfranco Feb 3, 2025

jcfranco Feb 3, 2025

driskull Feb 3, 2025

jcfranco Feb 3, 2025

jcfranco Feb 3, 2025

driskull Feb 3, 2025

jcfranco commented Feb 3, 2025

feat(block-group, block): add block-group component #11319

feat(block-group, block): add block-group component #11319

Conversation

driskull commented Jan 16, 2025 • edited Loading

Summary

BlockGroup API Documentation

Properties

canPull

canPut

disabled

dragEnabled

group

label

loading

Methods

setFocus

geospatialem left a comment

Choose a reason for hiding this comment

macandcheese left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco commented Feb 3, 2025

driskull commented Jan 16, 2025 •

edited

Loading

`canPull`

`canPut`

`disabled`

`dragEnabled`

`group`

`label`

`loading`

`setFocus`

jcfranco left a comment •

edited

Loading