Experimental tile: code implementation

[tay1orjones]

This issue is for the primary implementation of the new experimental tile variant.

At it's core, the required changes are likely just styling placed behind a new classname/selector.

There's a few ideas on the "toggle mechanism" we could use to allow consumers to flip on the new styling:

• via a new hasImprovedContrast (naming tbd) prop on Tile
• Through a whole new component exports, unstable__Tile, unstable__SelectableTile, etc.
• via a context wrapper component (feature flag) - this would enable certain sections of an app's tiles to use the new variant
• Add a new sass feature flag, off by default

Really it depends on feedback we get:

• Is individual opt-in important?
  • A: No
• Is opting-in to an entire section (all?) of an app more desirable?
  • A: Yes
• Is it allowable from a design-consistency standpoint to split the design and have portions of the same app using both tile designs at the same time?
  • A: No - we do not want old and new styling mixed in an application. It should be one or the other.

#12464 (comment)

[tay1orjones]

We talked about this today 11/3 at design crit:

• We do not need to facilitate piecemeal adoption.
  • In fact we want the opposite - an entire app should switch over to using the new tile styling all at once.
• From a design consistency standpoint, we do not want consumers mixing the old and new tile styling within the same app.

Based on this, I skew towards some type of global feature flag (maybe just in sass?) that consumers can turn on at one place to apply to their entire app.

Adding a prop or a new unstable export are not desirable approaches because they both would mean that we need to write a codemod to facilitate quick conversion so migration isn't a long process.

[tay1orjones]

For the storybook, we'll likely have to ship additional styles scoped to a specific story. Something like this:

// tile-story-styles.scss

@use '@carbon/react/scss/components/tile` with (
  $experimental-improved-tile-contrast: true
);

.scope-to-custom-class {
  @include tile.tile();
}