fix(fuselage): Callout Component Style Update (#862)

RocketChat · Oct 5, 2022 · 50c7d94 · 50c7d94
1 parent ce85b97
commit 50c7d94
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/fuselage/src/components/Callout/Callout.stories.tsx b/packages/fuselage/src/components/Callout/Callout.stories.tsx
@@ -37,7 +37,9 @@ export default {
 } as ComponentMeta<typeof Callout>;
 
 const Template: ComponentStory<typeof Callout> = (args) => (
-  <Callout {...args}>This is a generic description.</Callout>
+  <Callout {...args}>
+    {args.children || 'This is a generic description.'}
+  </Callout>
 );
 
 export const Default = Template.bind({});

diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss
@@ -5,15 +5,14 @@
 .rcx-callout {
   display: flex;
 
-  padding-block: lengths.padding(16);
-  padding-inline-start: lengths.padding(16);
-  padding-inline-end: lengths.padding(32);
+  padding-block: lengths.padding(8);
+  padding-inline: lengths.padding(16);
 
   color: theme('callout-color', colors.font(default));
 
   border-radius: theme('callout-border-radius', lengths.border-radius(medium));
 
-  background-color: theme('callout-background-color', colors.surface(neutral));
+  background-color: theme('callout-background-color', colors.neutral(200));
 
   &--type-info {
     color: theme('callout-color-info', colors.status-font(on-info));
@@ -55,21 +54,24 @@
   flex-flow: column nowrap;
   flex: 1 1 0;
 
-  margin-inline-start: lengths.margin(8);
+  margin-inline-start: lengths.margin(12);
 
   @include typography.use-font-scale(c1);
+
+  > :nth-child(2) {
+    margin-block-start: lengths.margin(4);
+  }
 }
 
 .rcx-callout__title {
-  padding-block: lengths.padding(2);
+  white-space: nowrap;
 
-  @include typography.use-font-scale(c2);
+  @include typography.use-font-scale(p2b);
   @include typography.use-text-ellipsis;
-  white-space: nowrap;
 }
 
 .rcx-callout__children {
   display: block;
 
-  padding-block: lengths.padding(2);
+  @include typography.use-font-scale(p2);
 }