fix(fuselage): use label on Select (#1066)

RocketChat · May 31, 2023 · 5489b7a · 5489b7a
1 parent c32bd73
commit 5489b7a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/packages/fuselage/src/components/Option/Option.tsx b/packages/fuselage/src/components/Option/Option.tsx
@@ -31,7 +31,7 @@ type OptionProps = {
   spacedColumn?: boolean;
   variant?: 'danger' | 'success' | 'warning' | 'primary';
   onClick?: (event: MouseEvent<HTMLElement>) => void;
-} & AllHTMLAttributes<HTMLElement>;
+} & Omit<AllHTMLAttributes<HTMLElement>, 'label'>;
 
 const Option = memo(
   forwardRef(

diff --git a/packages/fuselage/src/components/Select/Listbox.tsx b/packages/fuselage/src/components/Select/Listbox.tsx
@@ -84,6 +84,7 @@ function OptionAria({ item, state }: OptionProps) {
       selected={isSelected}
       focus={isFocused}
       key={item.key}
+      label={item.rendered}
       {...optionProps}
     >
       {item.rendered}

diff --git a/packages/fuselage/src/components/Select/Select.styles.scss b/packages/fuselage/src/components/Select/Select.styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
 .rcx-select {
@@ -6,6 +7,8 @@
 
   align-items: center;
 
+  min-height: lengths.size(40);
+
   // TODO move to .rcx-input-box
   &__item {
     @include typography.use-text-ellipsis;