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(tag): add "surface" intent #2279

Merged
merged 1 commit into from
Jun 28, 2024
Merged

Conversation

acd02
Copy link
Contributor

@acd02 acd02 commented Jun 28, 2024

TASK: #2243

Description, Motivation and Context

Add surface intent according to updated design specs

Types of changes

  • 🛠️ Tool
  • 🪲 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 🧾 Documentation
  • 📷 Demo
  • 🧪 Test
  • 🧠 Refactor
  • 💄 Styles

Add surface intent according to updated design specs

#2243
@acd02 acd02 added Component Related to a component Component: tag Related to tag component labels Jun 28, 2024
@acd02 acd02 self-assigned this Jun 28, 2024
@acd02 acd02 linked an issue Jun 28, 2024 that may be closed by this pull request
}

return (
<Tag key={intent} design={design} intent={intent as any}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry about the any 😅, but without it, TS will complain because it can't infer that due to my previous if block, we cannot have a surface of intent, with a design of outlined or tinted when we end up here

Copy link
Contributor

Choose a reason for hiding this comment

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

You should be ashamed!

Copy link

codecov bot commented Jun 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.56%. Comparing base (2fb060f) to head (d79192d).
Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2279   +/-   ##
=======================================
  Coverage   97.56%   97.56%           
=======================================
  Files         760      760           
  Lines        5996     5996           
  Branches     2137     2100   -37     
=======================================
  Hits         5850     5850           
  Misses        144      144           
  Partials        2        2           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@acd02
Copy link
Contributor Author

acd02 commented Jun 28, 2024

if you wanna check @JeremiasUX ⬇️ ,
https://spark-ui-uhip-kerj6x6jz-sparkteams-projects.vercel.app/?path=/docs/components-tag--docs

Comment on lines +23 to +26
type ValidTagDesignIntent =
| FilteredDesignIntent<'tinted', 'surface'>
| FilteredDesignIntent<'outlined', 'surface'>
| FilteredDesignIntent<'filled'>
Copy link
Contributor Author

@acd02 acd02 Jun 28, 2024

Choose a reason for hiding this comment

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

What is being done here is to prevent unwanted combinations.
The surface intent can only be applied if the design is set to filled.

<Tag design="tinted" intent="surface"> // ❌ TS will raise an error
<Tag design="outlined" intent="surface"> // ❌ TS will raise an error
<Tag design="filled" intent="surface"> // ✅

{
intent: 'surface',
design: 'filled',
class: tw(['bg-surface', 'text-on-surface']),
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we still need this tw() util?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unfortunately, yes. Otherwise, we lose the autocompletion / intellisense. This is due to a limitation of the Tailwind ESLint plugin's typings, which cannot handle very large objects, if I recall correctly

}

return (
<Tag key={intent} design={design} intent={intent as any}>
Copy link
Contributor

Choose a reason for hiding this comment

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

You should be ashamed!

@JeremiasUX JeremiasUX requested review from JeremiasUX and removed request for JeremiasUX June 28, 2024 09:58
@JeremiasUX
Copy link

Wow that was quick, thx! Looks good to me

@acd02 acd02 merged commit 6dcf4de into main Jun 28, 2024
10 of 11 checks passed
@acd02 acd02 deleted the 2243-component-tag-new-intent-surface branch June 28, 2024 10:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: tag Related to tag component Component Related to a component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component] Tag: New intent "Surface"
4 participants