feat(Tile): add `slug` prop to `SelectableTile` and `ExpandableTile` #15222

tw15egan · 2023-11-16T19:47:22Z

Closes #15187

Adds in the slug prop for Tile, ClickableTile, SelectableTile, and ExpandableTile

Changelog

New

slug prop added to `Tile components listed above.
slug prop for ClickableTile is boolean only, as it will just render an SVG of the hollow slug since it cannot be interactive. @aagonzales I just pulled the SVG from the figma file and hardcoded it in. Do we have any plans to add this to the icon library, or is this fine for now?
New tokens to handle the transition between linear gradients when hovering or selecting a tile. Can probably be reduced when we revisit tokens / token naming.

Changed

Refactored slug.scss to use the new @mixin callout-gradient. This generates the background gradient for the Tile, as well as the hover and selected states. @include callout-gradient('hover');

Testing / Reviewing

Go to Tille --> Slug Test and review that the Slug renders in the correct place, the slug callout renders as expected, and that the hover / selected states of ClickableTile and SelectableTile are correct

netlify · 2023-11-16T19:51:52Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`f562ea4`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/656640e959443f00080f9646
😎 Deploy Preview	https://deploy-preview-15222--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

tw15egan · 2023-11-16T19:52:55Z

@aagonzales few observations:

I haven't done the static dot grid, but I can try and add what I have from the explorations if we want that.
ClickableTile currently does not support CTA inside as per guidance. Not sure if we can do this from an a11y perspective, but can take a deeper look
Should the basic Tile support the slug?
When the tile contains an interactive item, we take away the full tile hover in ExpandableTile. This will affect the hover styles in the spec.

Let me know how it looks and what else you notice.

aagonzales · 2023-11-16T22:13:06Z

@tw15egan

Don't worry about the dot grid with any of these components for the moment.
That's a good point about clickable tile. I might need to bring that up with Gower, thy and the AI folks
Yes, basic tile should support the slug (if possible)
I'll look into the expandable tile issue

aagonzales · 2023-11-17T18:04:52Z

@tw15egan For clickable tile let's do this.

Use the hollow slug and disable the tooltip, it shouldn't need explainability as clickable tile is normally just a link-out type of action instead of an option.
Added a spec for the hover values, this will need new tokens I think.
Light and dark themes specs here

aagonzales · 2023-11-17T18:15:35Z

@tw15egan Selectable tile will need the same hover states and then it also has a selected state change as well.

aagonzales · 2023-11-17T18:46:08Z

I'm also wondering if it would be easy to add an optional border radius prop for the callout as tile designs.

tw15egan · 2023-11-20T20:28:16Z

@aagonzales just pushed a bunch of changes, including a bunch of new tokens to handle the gradient shift on hover / selected. WIth regards to the rounded edges, will this always be enabled if slug is present? Or can the slug be present and not have rounded edges? Can you have rounded edges and not have a slug? It's easy to do all of these things, but just want to make sure I guard it to match the intended use-cases

alisonjoseph · 2023-11-21T16:40:40Z

This is looking great @tw15egan! Do we need to adjust the padding on the right of the title to account for the slug?

tw15egan · 2023-11-21T16:44:18Z

@alisonjoseph Hmm the title in there is just for demo purposes... I can fix it here, but not too sure how we can go about systematically accounting for the slug there. This is where I wish you could do rounded corner padding in components! It would really help with this and other components like TextArea and CodeSnippet. Any ideas?

alisonjoseph · 2023-11-21T16:47:04Z

@tw15egan oh yea, duh I knew that. That's tricky, we may just have to leave that up the to the teams building out the details. I don't know that we'd want to pad the entire tile over that much, especially the SelectableTile which already has padding to account for the checkbox.

guidari

LGTM! I didn't caught any issue. 🚀

aagonzales · 2023-11-27T20:13:55Z

@tw15egan Ok this may change in the future but for now can we do this for the rounded corners:

Allowed: Slug with square corners
Allowed: Slug with rounded corners
Allowed: No slug with square corners
Not allowed: No slug with rounded corners

tw15egan · 2023-11-28T16:27:47Z

@aagonzales updated 👍🏻

aagonzales

Looking good, just one thing. On hover with the rounded corner prop, the hover background still has squared corners. Also the same for the selected state

tw15egan · 2023-11-28T19:35:27Z

🤦🏻 whoops! Fixed it @aagonzales 👍🏻

aagonzales

Ship it!

carbon-automation · 2023-12-01T17:48:18Z

Hey there! v11.44.0 was just released that references this issue/PR.

…arbon-design-system#15222) * docs(Tile): scaffold slug story, add demo styles * feat(Tile): add slug to SelectableTile, ExpandableTile * test(snapshot): update snapshots * feat(Tile): add slug prop to Tile * test(snapshot): update snapshots * feat(Tile): add new tokens, add hover, selected styles * test(snapshot): update snapshots * feat(Tile): add new prop for rounded corners * style(Tile): fix border-radius on pseudo elements

tw15egan added 2 commits November 16, 2023 13:10

docs(Tile): scaffold slug story, add demo styles

f75a7ae

feat(Tile): add slug to SelectableTile, ExpandableTile

ca0ba10

tw15egan added 3 commits November 17, 2023 08:50

test(snapshot): update snapshots

4f24f69

feat(Tile): add slug prop to Tile

e5484df

test(snapshot): update snapshots

156b2db

tw15egan added 3 commits November 20, 2023 11:22

Merge branch 'main' into tile-slug-prop

3cdeb1e

feat(Tile): add new tokens, add hover, selected styles

311229b

test(snapshot): update snapshots

975c187

tw15egan added status: ready for review 👀 status: visual review 🔍 labels Nov 20, 2023

tw15egan marked this pull request as ready for review November 20, 2023 20:29

tw15egan requested review from a team as code owners November 20, 2023 20:29

tw15egan requested review from alisonjoseph and guidari November 20, 2023 20:29

Merge branch 'main' into tile-slug-prop

04f9a02

tw15egan requested a review from aagonzales November 20, 2023 20:30

guidari approved these changes Nov 27, 2023

View reviewed changes

alisonjoseph approved these changes Nov 27, 2023

View reviewed changes

tw15egan added 2 commits November 28, 2023 11:00

Merge branch 'main' into tile-slug-prop

5306b42

feat(Tile): add new prop for rounded corners

e14ad02

aagonzales requested changes Nov 28, 2023

View reviewed changes

tw15egan added 2 commits November 28, 2023 14:32

Merge branch 'main' into tile-slug-prop

84424d5

style(Tile): fix border-radius on pseudo elements

f562ea4

aagonzales approved these changes Nov 28, 2023

View reviewed changes

tw15egan added this pull request to the merge queue Nov 28, 2023

Merged via the queue into carbon-design-system:main with commit 3dd58b6 Nov 28, 2023
18 checks passed

tw15egan deleted the tile-slug-prop branch November 28, 2023 22:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Tile): add `slug` prop to `SelectableTile` and `ExpandableTile` #15222

feat(Tile): add `slug` prop to `SelectableTile` and `ExpandableTile` #15222

tw15egan commented Nov 16, 2023 •

edited

Loading

netlify bot commented Nov 16, 2023 •

edited

Loading

tw15egan commented Nov 16, 2023 •

edited

Loading

aagonzales commented Nov 16, 2023 •

edited

Loading

aagonzales commented Nov 17, 2023 •

edited

Loading

aagonzales commented Nov 17, 2023

aagonzales commented Nov 17, 2023

tw15egan commented Nov 20, 2023 •

edited

Loading

alisonjoseph commented Nov 21, 2023

tw15egan commented Nov 21, 2023

alisonjoseph commented Nov 21, 2023

guidari left a comment

aagonzales commented Nov 27, 2023

tw15egan commented Nov 28, 2023

aagonzales left a comment •

edited

Loading

tw15egan commented Nov 28, 2023

aagonzales left a comment

carbon-automation bot commented Dec 1, 2023

feat(Tile): add slug prop to SelectableTile and ExpandableTile #15222

feat(Tile): add slug prop to SelectableTile and ExpandableTile #15222

Conversation

tw15egan commented Nov 16, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Nov 16, 2023 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

tw15egan commented Nov 16, 2023 • edited Loading

aagonzales commented Nov 16, 2023 • edited Loading

aagonzales commented Nov 17, 2023 • edited Loading

aagonzales commented Nov 17, 2023

aagonzales commented Nov 17, 2023

tw15egan commented Nov 20, 2023 • edited Loading

alisonjoseph commented Nov 21, 2023

tw15egan commented Nov 21, 2023

alisonjoseph commented Nov 21, 2023

guidari left a comment

Choose a reason for hiding this comment

aagonzales commented Nov 27, 2023

tw15egan commented Nov 28, 2023

aagonzales left a comment • edited Loading

Choose a reason for hiding this comment

tw15egan commented Nov 28, 2023

aagonzales left a comment

Choose a reason for hiding this comment

carbon-automation bot commented Dec 1, 2023

feat(Tile): add `slug` prop to `SelectableTile` and `ExpandableTile` #15222

feat(Tile): add `slug` prop to `SelectableTile` and `ExpandableTile` #15222

tw15egan commented Nov 16, 2023 •

edited

Loading

netlify bot commented Nov 16, 2023 •

edited

Loading

tw15egan commented Nov 16, 2023 •

edited

Loading

aagonzales commented Nov 16, 2023 •

edited

Loading

aagonzales commented Nov 17, 2023 •

edited

Loading

tw15egan commented Nov 20, 2023 •

edited

Loading

aagonzales left a comment •

edited

Loading