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.

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

feat(Tile): update Tile AI styles to phase 2 spec #15596

Merged
merged 6 commits into from Jan 26, 2024

Conversation

tw15egan
Copy link
Member

@tw15egan tw15egan commented Jan 24, 2024

Closes #15595

Updates Tile to new phase 2 AI spec

Screenshot 2024-01-25 at 11 17 17 AM

Changelog

New

  • 3 new tokens used for ClickableTile and SelectableTile hover states
  • I added a 3rd parameter to the callout-gradient mixin that takes in a background. Right now, only configured to handle layer (Tile) and defaults to background (Callout)
  • box-shadow added to Tile

Changed

  • Reduced border-radius from 16px to 8px on the Tile with rounded corners

Removed

  • No tokens have been removed as of yet, but I moved a bunch of now-unused tokens further down the theme file for possible removal.

Testing / Reviewing

Go to unstable__Slug --> Examples --> Tile and ensure all states match the spec.

Questions

@aagonzales is there a state for selected + hover?

Copy link

netlify bot commented Jan 24, 2024

Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit e58cada
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/65b3f60a23a357000854ab6e
😎 Deploy Preview https://deploy-preview-15596--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When checking for the hover state, I realized my selected state designs have been inconsistent with the new carbon tile designs. It should not have a background change, only a border change.

Here is the new spec for selected and selected-hover
image

Copy link
Contributor

@andreancardona andreancardona left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! That looks good! Ship it 🎉 👍

@tw15egan tw15egan added this pull request to the merge queue Jan 26, 2024
Merged via the queue into carbon-design-system:main with commit 8114072 Jan 26, 2024
20 checks passed
@tw15egan tw15egan deleted the phase2-tile-updates branch January 26, 2024 19:50
kodiakhq bot pushed a commit to carbon-design-system/carbon-for-ibm-dotcom that referenced this pull request Feb 2, 2024
### Related Ticket(s)

Follows: carbon-design-system/carbon#15596 & carbon-design-system/carbon#15591
### Description

Updates Tile with carbon gradient
### Changelog

**Changed**

- new carbon upgrade (using RC atm -> will need to update to full release)
- updated tile slug styles like core
- the new core styles fix an error with number-input slug revert styles


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: Update AI Tile to new spec
4 participants