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: outline design components must have transparent background #1478

Merged

Conversation

acd02
Copy link
Contributor

@acd02 acd02 commented Sep 20, 2023

TASK: #1423

Description, Motivation and Context

  • All components must have a background transparent in outline versions
  • Tabs have a background transparent too

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

@codecov
Copy link

codecov bot commented Sep 20, 2023

Codecov Report

Merging #1478 (ba0363d) into main (0bfbaad) will not change coverage.
Report is 2 commits behind head on main.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1478   +/-   ##
=======================================
  Coverage   97.85%   97.85%           
=======================================
  Files         618      618           
  Lines        4247     4247           
  Branches     1593     1593           
=======================================
  Hits         4156     4156           
  Misses         91       91           
Files Changed Coverage Δ
packages/components/tabs/src/TabsTrigger.styles.ts 100.00% <ø> (ø)
packages/components/tag/src/Tag.styles.tsx 100.00% <ø> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@@ -7,7 +7,7 @@ export const triggerVariants = cva(
'relative flex flex-none items-center',
'border-outline',
'outline-none',
'bg-surface hover:bg-surface-hovered',
Copy link
Member

Choose a reason for hiding this comment

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

❤️

@@ -20,7 +20,7 @@ export const tagStyles = cva(
*/
design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({
filled: [],
outlined: ['bg-surface', 'ring-1', 'ring-current'],
outlined: ['bg-transparent', 'ring-1', 'ring-current'],
Copy link
Member

Choose a reason for hiding this comment

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

❤️

Copy link
Member

Choose a reason for hiding this comment

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

is not possible to simply remove the bg-[color] class?

@acd02 acd02 force-pushed the 1423-outline-design-components-must-have-transparent-background-web branch from 88e3381 to d2f4c97 Compare September 21, 2023 09:14
Apply a transparent bg for outlined variant
Apply no background color by default

#1423
@acd02 acd02 force-pushed the 1423-outline-design-components-must-have-transparent-background-web branch from d2f4c97 to ba0363d Compare September 25, 2023 08:17
@acd02 acd02 merged commit ae1f841 into main Sep 25, 2023
@acd02 acd02 deleted the 1423-outline-design-components-must-have-transparent-background-web branch September 25, 2023 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Outline Design components must have transparent background [Web]
4 participants