[Block] Improve functionality to better support nesting #12179
Description
Check existing issues
- I have checked for existing issues to avoid duplicates
Description
Tracking issue - designs not finalized
There are an increasing number of designs necessitating nested Blocks. While we have an existing Block Section component, it is not as feature-rich as Block.
Rather than enhancing that component - we should look to improve our nested Block story. This is technically possible, but undocumented and doesn't provide the best design or development experience - padding becomes misaligned, visual hierarchy isn't ideal, etc.
Acceptance Criteria
I'd propose the following, or some other similar solutions:
Block gains an "expandAppearance" property that can support the current chevron display, and the Switch display from Block Section.
Block gains a "sub-block" slot (by any name) that places Blocks within the container. We should probably place this outside and beneath the Block's content container so it's always full-width, with no built-in padding.
- Design questions include spacing, borders conditionally applied to these nested Blocks to best support visual hierarchies.
- Accessibility to ensure proper structure and relationship between components.
- Documentation to suggest best practices, limit "levels" of nesting, etc.
- Consider deprecation for Block Section once all capabilities are available in nested Blocks.
Relevant Info
No response
Which Component
Block, Block Section
Example Use Case
As a designer or developer, I want to nest Blocks within a Panel to provide a visually consistent, hierarchically logical display of content.
Priority impact
impact - p2 - want for an upcoming milestone
Calcite package
- @esri/calcite-components
- @esri/calcite-components-react
- @esri/calcite-design-tokens
- @esri/calcite-ui-icons
- @esri/eslint-plugin-calcite-components
Esri team
Calcite (design)
monday.com sync: #9367177854