fix: selects text oveflow (#689)

src/components/Combobox/Common/ComboboxWrapper.tsx

@@ -59,7 +59,7 @@ export const ComboboxWrapper = forwardRef<
  {...getLabelProps({ htmlFor: id })}
  cursor={disabled ? "not-allowed" : "text"}
  >
- <Box display="flex" flexDirection="column" width="100%">
+ <Box display="flex" flexDirection="column" __width="79%">
  <Box
  as="span"
  className={classNames(spanRecipe({ typed, size, disabled, error }))}

src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx

@@ -70,6 +70,7 @@ export const Default = () => {
 
  return (
  <DynamicCombobox
+ __width="200px"
  value={value}
  label="Pick star wars character"
  onChange={(value) => setValue(value)}
@@ -149,7 +150,7 @@ export const WithAdorment = () => {
  );
 };
 
-export const Loding = () => {
+export const Loading = () => {
  const [value, setValue] = useState<Option | null>(null);
 
  return (

src/components/Combobox/Static/Combobox.tsx

@@ -106,7 +106,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
  getLabelProps={getLabelProps}
  getToggleButtonProps={getToggleButtonProps}
  >
- <Box display="flex" alignItems="center">
+ <Box display="flex">
  {startAdornment && typed && <Box>{startAdornment(value)}</Box>}
 
  <Box
@@ -115,6 +115,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
  type="text"
  className={classNames(inputRecipe({ size, error }))}
  disabled={disabled}
+ alignItems="center"
+ textOverflow="ellipsis"
+ title={isString(value) ? value : value?.label}
  {...props}
  {...getInputProps({
  id,

src/components/Combobox/Static/StaticCombobox.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
-import { Box } from "~/components/Box";
 import { Option } from "~/components/BaseSelect";
+import { Box } from "~/components/Box";
 import { Combobox } from "..";
 
 const options = [
@@ -209,3 +209,26 @@ export const WithAdornment = () => {
  />
  );
 };
+
+export const WithEllipsis = () => {
+ const values = [
+ { value: "color-black", label: "Long black label here" },
+ {
+ value: "color-red",
+ label: "Long red label here",
+ },
+ ];
+ const [value, setValue] = useState<Option | null>(values[0]);
+
+ return (
+ <Box __width="200px">
+ <Combobox
+ options={values}
+ value={value}
+ size="large"
+ label="Label"
+ onChange={(value) => setValue(value)}
+ />
+ </Box>
+ );
+};

src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
+import { Box } from "../Box";
 import { Select } from ".";
 
 const options = [
@@ -153,3 +154,26 @@ export const WithStringValue = () => {
  />
  );
 };
+
+export const WithEllipsis = () => {
+ const values = [
+ { value: "color-black", label: "Long black label here" },
+ {
+ value: "color-red",
+ label: "Long red label here",
+ },
+ ];
+ const [value, setValue] = useState("color-black");
+
+ return (
+ <Box __width="200px">
+ <Select
+ options={values}
+ value={value}
+ size="large"
+ label="Label"
+ onChange={(value) => setValue(value)}
+ />
+ </Box>
+ );
+};

src/components/Select/Select.tsx

@@ -112,11 +112,19 @@ const SelectInner = <T extends Option, V extends Option | string>(
  getLabelProps={getLabelProps}
  getToggleButtonProps={getToggleButtonProps}
  >
- <Box height={getBoxHeight(size)} {...props} ref={ref}>
+ <Box
+ height={getBoxHeight(size)}
+ {...props}
+ ref={ref}
+ whiteSpace="nowrap"
+ overflow="hidden"
+ textOverflow="ellipsis"
+ >
  <Text
  size={size}
  variant="body"
  color={error ? "critical1" : "default1"}
+ title={selectedItem?.label}
  >
  {selectedItem?.label}
  </Text>

src/components/Select/SelectWrapper.tsx

@@ -56,7 +56,7 @@ export const SelectWrapper = forwardRef<HTMLLabelElement, SelectWrapperProps>(
  data-macaw-ui-component="Select"
  cursor={disabled ? "not-allowed" : "pointer"}
  >
- <Box display="flex" flexDirection="column" width="100%">
+ <Box display="flex" flexDirection="column" __width="79%">
  <Box
  as="span"
  className={classNames(