fix(fuselage): add Callout missing background-color (#1210)

RocketChat · Oct 31, 2023 · a95b2f7 · a95b2f7
1 parent 7e84e2e
commit a95b2f7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/.changeset/quiet-pigs-peel.md b/.changeset/quiet-pigs-peel.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): add `Callout` missing background-color
diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss
@@ -2,6 +2,10 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$callout-background-color: theme(
+  'callout-background-color',
+  colors.surface(light)
+);
 $callout-default-color: theme(
   'callout-default-color',
   colors.font(secondary-info)
@@ -34,6 +38,8 @@ $callout-text-color: theme('callout-text-color', colors.font(default));
 
   border-radius: theme('callout-border-radius', lengths.border-radius(medium));
 
+  background-color: $callout-background-color;
+
   &--info {
     border-color: $callout-info-color;
 

diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx
@@ -29,9 +29,7 @@ export const Callout = ({
   return (
     <Box
       is='section'
-      className={[
-        `rcx-callout ${type && `rcx-callout--${type}`} ${className || ''}`,
-      ]
+      className={['rcx-callout', type && `rcx-callout--${type}`, className]
         .filter(Boolean)
         .join(' ')}
       {...props}

diff --git a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout undefined "
+      class="rcx-box rcx-box--full  rcx-callout"
     >
       <i
         aria-hidden="true"
@@ -35,7 +35,7 @@ exports[`[CheckBox Rendering] renders Danger without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout rcx-callout--danger "
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--danger"
     >
       <i
         aria-hidden="true"
@@ -66,7 +66,7 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout undefined "
+      class="rcx-box rcx-box--full  rcx-callout"
     >
       <i
         aria-hidden="true"
@@ -97,7 +97,7 @@ exports[`[CheckBox Rendering] renders Info without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout rcx-callout--info "
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--info"
     >
       <i
         aria-hidden="true"
@@ -128,7 +128,7 @@ exports[`[CheckBox Rendering] renders Success without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout rcx-callout--success "
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--success"
     >
       <i
         aria-hidden="true"
@@ -159,7 +159,7 @@ exports[`[CheckBox Rendering] renders Warning without crashing 1`] = `
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout rcx-callout--warning "
+      class="rcx-box rcx-box--full  rcx-callout rcx-callout--warning"
     >
       <i
         aria-hidden="true"
@@ -190,7 +190,7 @@ exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] =
 <body>
   <div>
     <section
-      class="rcx-box rcx-box--full  rcx-callout undefined "
+      class="rcx-box rcx-box--full  rcx-callout"
     >
       <i
         aria-hidden="true"