[Block] Provide consistent use of sorting similar to `list` #10382

geospatialem · 2024-09-24T21:48:27Z

geospatialem · 2024-09-24T21:56:41Z

Spike needed to determine the structure of the component needed to provide sorting on specified blocks.

driskull · 2024-12-19T17:42:31Z

For blocks to be sortable, they need to be child items which means that they need some kind of parent component to allow them to be sortable which would replace the sortable-list component. What would this component be called?

What about block-sections, would they ever need sorting as well?

driskull · 2024-12-19T17:52:07Z

@geospatialem I think this would be a new component so should probably be tagged like that

github-actions · 2024-12-19T18:10:28Z

cc @ashetland, @SkyeSeitz, @brittneytewks

driskull · 2024-12-26T21:53:41Z

What should this new component be called? @geospatialem @DitwanP

geospatialem · 2024-12-27T16:34:09Z

What should this new component be called? @geospatialem @DitwanP

What about block-sections, would they ever need sorting as well?

Maybe we should approach the naming in case we would need to apply the same functionality to block-sections? @driskull, do you think we should accommodate sorting on both components, block and block-section with the effort?

As far as naming, WDYT about something like block-group? Can we think of any other functionality the component could provide in addition to sorting? If not, maybe we should consider the effort for the next breaking change release, where we could consider adding a new block-item component to have a similar implementation experience as the list / list-item dragging experience and the block and block-section could serve as the parent elements for sorting? WDYT?

driskull · 2024-12-30T17:09:34Z

do you think we should accommodate sorting on both components, block and block-section with the effort?

I'm not sure. is there a request to sort sections?

@geospatialem can you setup a quick meeting to discuss the options and how we want to move forward?

macandcheese · 2024-12-30T17:22:02Z

I don't think we've had a request for Block Groups - although it seems like it would make sense in the future as an additional feature. I think Block Group name / pattern is a great direction.

driskull · 2025-01-16T18:42:08Z

@geospatialem @jcfranco calcite-sortable-list depends on calcite-handle so if we update calcite-block to use calcite-sort-handle then a calcite-sortable-list with blocks will no longer work.

calcite-handle does have a handleSelector property that a user could update if need be. Or we could update the property but that would be a breaking change.

…locks. #10382

@allieorth

…ests (#11263) **Related Issue:** #9922 ## Summary Add automation to issues when the `calcite-ui-icons` label is added, where Icon team leads will receive an `@` notification via a comment, similar to the [new component label automation](#10382 (comment)) from the [notifyAboutNewComponent script](https://github.com/Esri/calcite-design-system/blob/dev/.github/scripts/notifyAboutNewComponent.js). cc @allieorth, @arowles

**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 <[email protected]>

github-actions · 2025-02-03T23:02:22Z

Installed and assigned for verification.

geospatialem · 2025-02-04T17:00:58Z

Verified with 3.0.0-next.126 with the new block-group component and dragEnabled: https://codepen.io/geospatialem/pen/xbKNygd

<p>City observations</p>
<calcite-block-group drag-enabled group="my-group" label="Group 1">
  <calcite-block collapsible heading="White squirrels">
     ...
  </calcite-block>
  <calcite-block collapsible heading="Black squirrels">
     ...
  </calcite-block>
</calcite-block-group>

<p>Neighborhood observations</p>
<calcite-block-group drag-enabled group="my-group" label="Group 2">
  <calcite-block collapsible heading="Gray squirrels">
     ...
  </calcite-block>
  <calcite-block collapsible heading="Red squirrels">
     ...
  </calcite-block>
</calcite-block-group>

@allieorth

…ests (#11263) **Related Issue:** #9922 ## Summary Add automation to issues when the `calcite-ui-icons` label is added, where Icon team leads will receive an `@` notification via a comment, similar to the [new component label automation](#10382 (comment)) from the [notifyAboutNewComponent script](https://github.com/Esri/calcite-design-system/blob/dev/.github/scripts/notifyAboutNewComponent.js). cc @allieorth, @arowles

**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 <[email protected]>

geospatialem added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Sep 24, 2024

github-actions bot added Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Sep 24, 2024

geospatialem added future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Sep 24, 2024

geospatialem changed the title ~~[Block/Block Section] Provide consistent use of sorting similar to list~~ [Block] Provide consistent use of sorting similar to list Sep 24, 2024

geospatialem added this to the 2025-01-28 - 3.1.0 Jan Main release milestone Sep 24, 2024

geospatialem removed the needs triage Planning workflow - pending design/dev review. label Sep 24, 2024

geospatialem mentioned this issue Sep 24, 2024

Epic: Provide consistent dragging experiences and support across components #10383

Open

4 tasks

ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Sep 26, 2024

driskull mentioned this issue Nov 19, 2024

feat(block)!: add required label property and mark heading as optional #10739

Merged

geospatialem assigned driskull Dec 16, 2024

geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Dec 16, 2024

geospatialem added the new component Issues tied to a new component. label Dec 19, 2024

ashetland added design Issues that need design consultation prior to development. and removed figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists labels Dec 30, 2024

geospatialem mentioned this issue Jan 10, 2025

chore(actions): add icon leads notification for calcite-ui-icons requests #11263

Merged

driskull added a commit that referenced this issue Jan 16, 2025

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

86d44fd

…locks. #10382

driskull mentioned this issue Jan 16, 2025

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

Merged

driskull added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jan 17, 2025

driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 3, 2025

github-actions bot assigned geospatialem Feb 3, 2025

github-actions bot assigned DitwanP and unassigned driskull Feb 3, 2025

geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 4, 2025

geospatialem closed this as completed Feb 4, 2025

github-actions bot mentioned this issue Feb 4, 2025

calcite-sortable-list: drag-n-drop via keyboard does not throw calciteListOrderChange event #10572

Closed

6 tasks

geospatialem mentioned this issue Feb 18, 2025

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Block] Provide consistent use of sorting similar to `list` #10382

[Block] Provide consistent use of sorting similar to `list` #10382

geospatialem commented Sep 24, 2024 •

edited

Loading

geospatialem commented Sep 24, 2024

driskull commented Dec 19, 2024 •

edited

Loading

driskull commented Dec 19, 2024

github-actions bot commented Dec 19, 2024

driskull commented Dec 26, 2024

geospatialem commented Dec 27, 2024

driskull commented Dec 30, 2024

macandcheese commented Dec 30, 2024 •

edited

Loading

driskull commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025

geospatialem commented Feb 4, 2025

[Block] Provide consistent use of sorting similar to list #10382

[Block] Provide consistent use of sorting similar to list #10382

Comments

geospatialem commented Sep 24, 2024 • edited Loading

Check existing issues

Description

Acceptance Criteria

Relevant Info

Which Component

Example Use Case

Priority impact

Calcite package

Esri team

geospatialem commented Sep 24, 2024

driskull commented Dec 19, 2024 • edited Loading

driskull commented Dec 19, 2024

github-actions bot commented Dec 19, 2024

driskull commented Dec 26, 2024

geospatialem commented Dec 27, 2024

driskull commented Dec 30, 2024

macandcheese commented Dec 30, 2024 • edited Loading

driskull commented Jan 16, 2025 • edited Loading

github-actions bot commented Feb 3, 2025

geospatialem commented Feb 4, 2025

[Block] Provide consistent use of sorting similar to `list` #10382

[Block] Provide consistent use of sorting similar to `list` #10382

geospatialem commented Sep 24, 2024 •

edited

Loading

driskull commented Dec 19, 2024 •

edited

Loading

macandcheese commented Dec 30, 2024 •

edited

Loading

driskull commented Jan 16, 2025 •

edited

Loading