Merge branch 'main' into chore/onboarding-ui-adjustments

RocketChat · Nov 16, 2023 · 75eca00 · 75eca00
2 parents 53601a8 + c09ef5b
commit 75eca00
Show file tree

Hide file tree

Showing 20 changed files with 356 additions and 17 deletions.
diff --git a/packages/fuselage/CHANGELOG.md b/packages/fuselage/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## 0.38.0
+
+### Minor Changes
+
+- [#1220](https://github.com/RocketChat/fuselage/pull/1220) [`b0de1ec7e`](https://github.com/RocketChat/fuselage/commit/b0de1ec7effbd6fd4bd7fcbb71920c4186da45a7) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): update `SidebarItem` highlighted weight
+
+- [#1214](https://github.com/RocketChat/fuselage/pull/1214) [`68674c502`](https://github.com/RocketChat/fuselage/commit/68674c502014e31b15cb81ab85d62677814a60fd) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): create `LabelInfo` component
+
+## 0.37.1
+
+### Patch Changes
+
+- [#1210](https://github.com/RocketChat/fuselage/pull/1210) [`a95b2f7b3`](https://github.com/RocketChat/fuselage/commit/a95b2f7b3ed2fa7cc325898dbf8555e1976dc308) Thanks [@juliajforesti](https://github.com/juliajforesti)! - fix(fuselage): add `Callout` missing background-color
+
 ## 0.37.0
 
 ### Minor Changes

diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Rocket.Chat's React Components Library",
   "author": {
     "name": "Rocket.Chat",

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"

diff --git a/packages/fuselage/src/components/Field/Field.stories.tsx b/packages/fuselage/src/components/Field/Field.stories.tsx
@@ -14,6 +14,7 @@ import {
   ToggleSwitch,
   FieldLink,
 } from '../..';
+import { FieldLabelInfo } from './FieldLabelInfo';
 
 export default {
   title: 'Inputs/Field',
@@ -47,6 +48,38 @@ export const Default: ComponentStory<typeof Field> = () => (
     <FieldHint>Hint</FieldHint>
   </Field>
 );
+export const WithLabelInfo: ComponentStory<typeof Field> = () => (
+  <Field>
+    <FieldLabel htmlFor='label-info-id'>
+      Label
+      <FieldLabelInfo id='info-id' title='this is a info label' />
+    </FieldLabel>
+    <FieldDescription>Description</FieldDescription>
+    <FieldRow>
+      <InputBox id='label-info-id' type='text' aria-describedby='info-id' />
+    </FieldRow>
+    <FieldError>Error</FieldError>
+    <FieldHint>Hint</FieldHint>
+  </Field>
+);
+export const RequiredWithLabelInfo: ComponentStory<typeof Field> = () => (
+  <Field>
+    <FieldLabel required htmlFor='label-required-id'>
+      Label
+      <FieldLabelInfo id='required-info-id' title='this is a info label' />
+    </FieldLabel>
+    <FieldDescription>Description</FieldDescription>
+    <FieldRow>
+      <InputBox
+        id='label-required-id'
+        type='text'
+        aria-describedby='required-info-id'
+      />
+    </FieldRow>
+    <FieldError>Error</FieldError>
+    <FieldHint>Hint</FieldHint>
+  </Field>
+);
 
 export const WithCheckBox: ComponentStory<typeof Field> = () => (
   <Field>

diff --git a/packages/fuselage/src/components/Field/FieldLabel.tsx b/packages/fuselage/src/components/Field/FieldLabel.tsx
@@ -6,7 +6,7 @@ import Box from '../Box';
 import { Label } from '../Label';
 import { FieldContext } from './Field';
 
-type FieldLabelProps = ComponentPropsWithoutRef<typeof Box>;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
 
 export const FieldLabel = (props: FieldLabelProps) => {
   const component = <Box is={Label} rcx-field__label {...props} />;

diff --git a/packages/fuselage/src/components/Field/FieldLabelInfo.tsx b/packages/fuselage/src/components/Field/FieldLabelInfo.tsx
@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import WithErrorWrapper from '../../helpers/WithErrorWrapper';
+import { LabelInfo } from '../Label/LabelInfo';
+import { FieldContext } from './Field';
+
+type FieldLabelInfoProps = ComponentProps<typeof LabelInfo>;
+
+export const FieldLabelInfo = (props: FieldLabelInfoProps) => {
+  const component = <LabelInfo {...props} />;
+
+  if (process.env.NODE_ENV === 'development') {
+    return (
+      <WithErrorWrapper
+        context={FieldContext}
+        parentComponent='Field'
+        componentName={FieldLabelInfo.name}
+      >
+        {component}
+      </WithErrorWrapper>
+    );
+  }
+
+  return component;
+};
diff --git a/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap b/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap
@@ -42,6 +42,72 @@ exports[`[Field Component] renders Default without crashing 1`] = `
 </body>
 `;
 
+exports[`[Field Component] renders RequiredWithLabelInfo without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-field"
+    >
+      <label
+        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-field__label"
+        for="label-required-id"
+      >
+        Label
+        <span
+          class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+        >
+          <span
+            hidden=""
+            id="required-info-id"
+          >
+            this is a info label
+          </span>
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+            title="this is a info label"
+          >
+            
+          </i>
+        </span>
+        <span
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-label__required rcx-css-b7g1a9"
+        >
+          *
+        </span>
+      </label>
+      <span
+        class="rcx-box rcx-box--full rcx-field__description"
+      >
+        Description
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__row"
+      >
+        <input
+          aria-describedby="required-info-id"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+          id="label-required-id"
+          size="1"
+          type="text"
+        />
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__error"
+      >
+        Error
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__hint"
+      >
+        Hint
+      </span>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`[Field Component] renders WithCheckBox without crashing 1`] = `
 <body>
   <div>
@@ -252,6 +318,66 @@ exports[`[Field Component] renders WithHintAndLink without crashing 1`] = `
 </body>
 `;
 
+exports[`[Field Component] renders WithLabelInfo without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-field"
+    >
+      <label
+        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-field__label"
+        for="label-info-id"
+      >
+        Label
+        <span
+          class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+        >
+          <span
+            hidden=""
+            id="info-id"
+          >
+            this is a info label
+          </span>
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+            title="this is a info label"
+          >
+            
+          </i>
+        </span>
+      </label>
+      <span
+        class="rcx-box rcx-box--full rcx-field__description"
+      >
+        Description
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__row"
+      >
+        <input
+          aria-describedby="info-id"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+          id="label-info-id"
+          size="1"
+          type="text"
+        />
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__error"
+      >
+        Error
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__hint"
+      >
+        Hint
+      </span>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`[Field Component] renders WithLink without crashing 1`] = `
 <body>
   <div>

diff --git a/packages/fuselage/src/components/Field/index.tsx b/packages/fuselage/src/components/Field/index.tsx
@@ -3,6 +3,7 @@ import { FieldDescription } from './FieldDescription';
 import { FieldError } from './FieldError';
 import { FieldHint } from './FieldHint';
 import { FieldLabel } from './FieldLabel';
+import { FieldLabelInfo } from './FieldLabelInfo';
 import { FieldLink } from './FieldLink';
 import { FieldRow } from './FieldRow';
 
@@ -12,6 +13,7 @@ export {
   FieldError,
   FieldHint,
   FieldLabel,
+  FieldLabelInfo,
   FieldLink,
   FieldRow,
 };

diff --git a/packages/fuselage/src/components/Label/Label.stories.tsx b/packages/fuselage/src/components/Label/Label.stories.tsx
@@ -9,6 +9,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { Label } from '../..';
+import { LabelInfo } from './LabelInfo';
 
 export default {
   title: 'Inputs/Label',
@@ -42,6 +43,20 @@ Required.args = {
   required: true,
 };
 
+export const Info: ComponentStory<typeof Label> = (args) => (
+  <Label {...args}>
+    Label
+    <LabelInfo title='this is a label info' />
+  </Label>
+);
+
+export const InfoRequired: ComponentStory<typeof Label> = (args) => (
+  <Label required {...args}>
+    Label
+    <LabelInfo title='this is a label info' />
+  </Label>
+);
+
 export const Disabled: ComponentStory<typeof Label> = Template.bind({});
 Disabled.args = {
   disabled: true,