feat(form-v2): tiles component

[seaerchin]

Problem

We require a tile component to display info compactly. This PR adds the Tile component as specified in the Figma design here.

Closes #2024

Solution

The tile component is a wrapper component - i.e, its styles are decided by us and the people who use it are not given (as much) control over the underlying styling of the component itself. The general approach towards designing this component will be laid out below

Tag
Allow users to pass in tag as a component rather than specifying the tag's styles as props for the user to pass in. This gives the user more control of how they want the tag to look and makes the tiles component simpler also.

Description
Instead of having a specific description prop (like tag), the more general children prop was chosen. This is because the Tile component is more of a wrapper component, and it makes more sense to have children as the description rather than separately defining description and then allowing a children prop, which does not make sense.

Variant
As variants are determined based on whether there is a description, we can determine this automatically instead of adding extra props. A type is defined for safety and clarity.

Questions for reviewers

1. How much stylistic power should be exposed on the component? The gauge i used here was that the figma did not seem to allow for much stylistic deviation and i thought that the tiles component was to be used 'as is' rather than having extensive customization done hence, did not expose any style props.
2. Is the approach taken towards designing this component logical?

Breaking Changes

• Yes - this PR contains breaking changes
  • Details ...
• No - this PR is backwards compatible

Screenshots
This is available in the generated storybook snapshot

TODO
add more stories

[chowyiyin]

The text spills out of the tile when its too long

Maybe we can add overflow-wrap to the theme?

[chowyiyin]

Should we be putting all styles into the theme?

[seaerchin]

i agree with putting parts of the component into the theme; however, i think this is more of a utility component (thus, not a part) and should be left as is, cos otherwise our themes run the risk of being overloaded @__@

i'll experiment with using VStack as the outer component and removing teh Box so that we can put it in themes!

[karrui]

Can always use the _first selector to only apply the styling to the first child

[seaerchin]

The text spills out of the tile when its too long

Maybe we can add overflow-wrap to the theme?

pepehands ;--; will do!!

[karrui]

Can export the Description, Title and Subtitle wrappers as a subcomponent so outside users can build their own tag with their own styling (if needed)

[seaerchin]

could i clarify on this point - i actually decided against doing this for the reasons stated in the PR write-up and i wanted to know when this is preferred (or is this all the time b/c we r building our own design system)

[karrui]

This is because the Tile component is more of a wrapper component

Precisely what you said in your PR description. So you expose Tile.Tile, Tile.Title, Title.Description, in addition to the main Tile component that uses all of those things precisely so users can modify any part of the component if they want instead of building another one, since all it is is a wrapper containing various styling

[seaerchin]

gotcha - to confirm this: wrapper components should export their wrapped components because it helps people to style components if needed; but wrt this, we shouldn't export a Description component directly right?

primarily because this is a wrapper and doesn't contribute anything of value beyond the chakra tags so we should export the components that are different (i took this approach)

[seaerchin]

The text spills out of the tile when its too long

Maybe we can add overflow-wrap to the theme?

pepehands ;--; will do!!

@chowyiyin this is cursed... i tried what's documented here as well as reading mdn docs for overflow-wrap.

i'm not too sure what's causing chakra to not wrap text actually and any help would be appreciated ;--;

The main issue is because of maxWidth being set which, if removed, will not have overflow because the container stretches to fit.

[karrui]

some nits, fix the hover styling on active state and we are gtg!