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

Epic: Tile redesign #6662

Closed
38 tasks done
geospatialem opened this issue Mar 25, 2023 · 6 comments
Closed
38 tasks done

Epic: Tile redesign #6662

geospatialem opened this issue Mar 25, 2023 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. c-tile Issues that pertain to the calcite-tile and related components design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2024-04-30 - Apr ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Mar 25, 2023 •
edited
Loading

Background

Enhance and consolidate functionality of tile-select into tile.

Once tile efforts are completed we'll:

  • release the new tile-group component and
  • deprecate the tile-select and tile-select-group components

Acceptance Criteria

Phase I

  • 1. Keep the following props:
    • iconFlipRtl - boolean (false)
    • description - string (undefined)
    • disabled - boolean (false)
    • heading - string (undefined)
    • hidden - boolean (false)
    • href - string (undefined)
    • icon - calcite-ui-icon (undefined)
  • 2. Add new props:
    • alignment - boolean ("start" - default, "center")
    • interactive - boolean (false)
    • label - string (undefined)
    • layout - type ("horizontal" - default, "vertical")
    • selection-appearance - type ("icon" - default, "border")
    • selection-mode - type ("none" - default, "single", "single-persist", "multiple")
    • scale - type ("s", "m" - default, "l")
    • selected - boolean (false)
  • 4. Deprecate props:
  • 5. Add min and max widths to each scale
  • 6. Update href styling (Refer to the Figma file for a recording.
    • No underline
    • Blue border
    • Blue icon
    • Header on hover

image

image
image

  • 8. Update hover and focused states

image

image

Phase II

Once the above work is completed, the following issues could be mitigated in the same PR:

Related Issues

No longer related issues
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. labels Mar 25, 2023
@macandcheese
Copy link
Contributor

Scope should include merging three current tile components into just two - ‘tile’ and ‘tile-group’ pattern.

@macandcheese macandcheese added the c-tile Issues that pertain to the calcite-tile and related components label Mar 27, 2023
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 8 Requires input from team, consider smaller steps. labels Apr 3, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 3, 2023
@SkyeSeitz SkyeSeitz self-assigned this Apr 18, 2023
This was referenced May 4, 2023
Closed
Closed
@macandcheese
Copy link
Contributor

Related: #7215

@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 12, 2023
@eriklharper eriklharper self-assigned this Jan 18, 2024
@eriklharper eriklharper added 2 - in development Issues that are actively being worked on. estimate - 13 Requires planning and input from team, consider smaller steps. and removed 1 - assigned Issues that are assigned to a sprint and a team member. estimate - 8 Requires input from team, consider smaller steps. labels Jan 18, 2024
@geospatialem geospatialem mentioned this issue Jan 25, 2024
Closed
10 tasks
This was referenced Feb 1, 2024
Closed
Merged
Merged
eriklharper added a commit that referenced this issue Feb 9, 2024
@eriklharper
feat(tile): add responsive layout features (#8691)
f4f872e 
**Related Issues:** #6690 #6662 

## Summary

This PR adds responsive layout features and some design improvements to
the Tile component, including:

- Tile: `min` and `max` inline-size (width) for all 3 scales
- Tile: `alignment` property, supporting `start` and `center`

Other improvements include refactoring Tile to remove the deprecated
`ConditionalSlotComponent` interface and improving style encapsulation
to allow more defined control of theming with css custom properties.

---------

Co-authored-by: Erik Harper <[email protected]>
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@eriklharper @Elijbet
feat(tile): add responsive layout features (#8691)
e763fe0 
**Related Issues:** #6690 #6662 

## Summary

This PR adds responsive layout features and some design improvements to
the Tile component, including:

- Tile: `min` and `max` inline-size (width) for all 3 scales
- Tile: `alignment` property, supporting `start` and `center`

Other improvements include refactoring Tile to remove the deprecated
`ConditionalSlotComponent` interface and improving style encapsulation
to allow more defined control of theming with css custom properties.

---------

Co-authored-by: Erik Harper <[email protected]>
eriklharper added a commit that referenced this issue Feb 20, 2024
@eriklharper
feat(tile-group): add responsive Tile Group component (#8687)
bf0c906 
**Related Issues:** #8615 #6691 #6662

## Summary

This PR adds the new `calcite-tile-group` component. It includes these
responsiveness features that address #6691:

- Wrapped Tiles match width of Tiles above
- Wrapped Tiles match height of tallest Tile in the group

The changes in this PR were extracted from and depend on the changes in
#8681.

---------

Co-authored-by: Erik Harper <[email protected]>
@eriklharper eriklharper mentioned this issue Feb 22, 2024
Merged
jcfranco pushed a commit that referenced this issue Feb 22, 2024
@eriklharper
feat(tile-group): add Tile Group component (#8806)
4f65bdd 
**Related Issues:** #8615 #6691 #6662

## Summary

This PR adds the new `calcite-tile-group` component. It includes these
responsiveness features that address #6691:

- Wrapped Tiles match width of Tiles above
- Wrapped Tiles match height of tallest Tile in the group

The changes in this PR were extracted from and depend on the changes in
#8681.

---------

Co-authored-by: Erik Harper <[email protected]>
@eriklharper eriklharper mentioned this issue Feb 26, 2024
Merged
eriklharper added a commit that referenced this issue Feb 27, 2024
@eriklharper
docs(tile): deprecate embed property (#8833)
f7e885a 
**Related Issues:** #6662 #8351

## Summary

Tile Select no longer uses Tile, and thus its internal `embed` property,
so this PR marks it as deprecated.

---------

Co-authored-by: Erik Harper <[email protected]>
@eriklharper eriklharper mentioned this issue Mar 25, 2024
Closed
@eriklharper eriklharper mentioned this issue Apr 19, 2024
Merged
eriklharper added a commit that referenced this issue Apr 30, 2024
@eriklharper
feat(tile, tile-group): support single, multi, single-persist, none s…
2d77470 
…election modes and icon and border selection appearances (#9159)

**Related Issue:** #8834, #6662

## Summary

This PR adds `selection-mode` and `selection-appearance` properties and
updates hover and focus states based on the latest Tile designs.

---------

Co-authored-by: Erik Harper <[email protected]>
@geospatialem geospatialem 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 Apr 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned eriklharper Apr 30, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Apr 30, 2024

🍠 Verified on main

@DitwanP DitwanP closed this as completed Apr 30, 2024
@DitwanP DitwanP 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 Apr 30, 2024
@SkyeSeitz SkyeSeitz mentioned this issue May 3, 2024
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. c-tile Issues that pertain to the calcite-tile and related components design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-04-30 - Apr Release
Development

No branches or pull requests
7 participants
@eriklharper @macandcheese @geospatialem @SkyeSeitz @DitwanP @ashetland @brittneytewks