Tile composition

[LostABike]

Changes

Convert most Tile's props into polymographic subcomponents with the following structure:

    <Tile>
      <Tile.ThumbnailArea>
        <Tile.ThumbnailPicture/>
        <Tile.Badge/>
        <Tile.TypeIndicator/>
        <Tile.QuickAction/>
      </Tile.ThumbnailArea>
      <Tile.Name/>
      <Tile.ContentArea>
        <Tile.Description />
        <Tile.Metadata/>
        <Tile.MoreOptions/>
      </Tile.ContentArea>
      <Tile.Buttons/>
    </Tile>

Testing

• Updated all Storybook.
• Updated all unit tests.

Docs

• Included comments for each subcomponents export. Some have example.
• Created example code, but documentation page .mdx might need to be in a separate PR since behaviors differ from Storybook on certain code.

[LostABike]

@mayank99 can you briefly check if I'm going the right direction? before I try to complete the other subcomponents. Also I made a different file to work on incrementally rather than modifying existing Tile, easier for me this way. Once everything works right I'll deleted old Tile and rename new Tile

[mayank99]

Going to review this in more detail tomorrow. For now, my only comment is to suggest making use of the polymorphic utility from #1279 (see example below).

[mayank99]

The folder variant is relying on the name prop to make its own iui-tile-name within iui-tile-content, should we still keep the name prop and pass it around the subcomponents? Or restructure css to have to have name outside of content even for folder variant?

We can restructure the html/css. It was kept this way in #1125 for backwards compatibility.

[adamhock]

One nitpicky comment. Other than that, make sure the tests pass before you merge!

Fantastic job! 🎉

[adamhock]

I'd add a space before ThumbnailArea on this line

[LostABike]

done 😄 , and thanks!

[LostABike]

@FlyersPh9 do you want to make a last check on the css/html of this? before I merge (if I manage to pass those image tests that is 😂 )

[mayank99]

LGTM! Nice work