Clean up styles

features/ui/select/option.styled.ts

@@ -1,40 +1,24 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
-export const ListItem = styled.li.attrs(() => ({
-  tabIndex: 0,
-}))<{ isCurrentlySelected: boolean }>`
-  margin: 0;
-  padding: 0;
+export const ListItem = styled.li<{ isSelected: boolean }>`
   display: flex;
-  width: 100%;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
   list-style-type: none;
-  padding-inline: 0.75rem;
-  padding-block: calc(0.75rem - 0.1rem);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  padding: 0.625rem 0.75rem;
   cursor: pointer;
-  z-index: 100;
   color: #1d2939;
-  background-color: #fff;
-  box-sizing: border-box;
-  ${({ isCurrentlySelected }) =>
-    isCurrentlySelected &&
-    css`
-      background-color: #fcfaff;
-    `};
-
+  background-color: ${({ isSelected }) => (isSelected ? "#fcfaff" : "#ffffff")};
   &:hover {
-    background: #f4ebff;
+    background-color: #f4ebff;
   }
 `;
 
-export const ListItemIcon = styled.img<{ isCurrentlySelected: boolean }>`
-  display: ${({ isCurrentlySelected }) =>
-    isCurrentlySelected ? "block" : "none"};
-  padding: 0;
+export const ListItemIcon = styled.img`
   width: 1rem;
   height: 1rem;
 `;

features/ui/select/option.tsx

@@ -18,18 +18,15 @@ export function Option<P>({
 }: OptionProps<P>) {
   return (
     <S.ListItem
-      isCurrentlySelected={isSelected}
+      isSelected={isSelected}
       aria-selected={isSelected}
       onClick={() => onClick(value)}
       onKeyDown={(event) => onKeyDown(event, value)}
       role="option"
       tabIndex={0}
     >
       {children}
-      <S.ListItemIcon
-        isCurrentlySelected={isSelected}
-        src="/icons/checked.svg"
-      />
+      {isSelected && <S.ListItemIcon src="/icons/checked.svg" />}
     </S.ListItem>
   );
 }

features/ui/select/select.stories.tsx

@@ -20,7 +20,7 @@ const options = [
 const Template: ComponentStory<typeof Select> = (props) => {
   const [selectedValue, setSelectedValue] = useState<number>();
   return (
-    <div style={{ padding: 50, height: 400 }}>
+    <div style={{ padding: 50, height: 400, width: 320 }}>
       <Select
         {...props}
         options={options}
@@ -40,7 +40,6 @@ Default.args = {
   hint: "This is a hint text to help user.",
   defaultValue: "Demi Wilkinson",
   errorMessage: "",
-  width: "",
 };
 Default.parameters = {
   viewMode: "docs",

features/ui/select/select.styled.ts

@@ -1,116 +1,104 @@
 import styled, { css } from "styled-components";
 
-export const Container = styled.div<any>`
+export const Container = styled.div`
   position: relative;
-  display: block;
-  width: ${({ width }) => width || `calc(5rem * 4)`};
-  background-color: #fff;
+  letter-spacing: 0.04rem;
 `;
 
-export const SelectedOption = styled.div.attrs(() => ({
-  tabIndex: 0,
-  ariaHasPopup: "listbox",
-}))<any>`
-  border: 1px solid;
-  border-color: ${({ disabled, errorMessage }) =>
-    !disabled && errorMessage ? "#FDA29B" : "#D0D5DD"};
-  border-radius: 7px;
-  width: ${({ width }) => width || `calc(5rem * 4 - 1.5rem)`};
-  padding: 0.5rem 0.75rem;
-  color: ${({ selectedOption }) => (selectedOption ? "#101828" : "#667085")};
-  cursor: pointer;
+export const SelectedOption = styled.div<{
+  disabled: boolean;
+  hasError: boolean;
+  hasValue: boolean;
+}>`
   display: flex;
-  justify-content: space-between;
-  letter-spacing: 0.052rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  align-items: center;
+  padding: 0.6875rem 0.875rem;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #667085;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   &:focus {
-    outline: 3px solid;
-    outline-color: ${({ disabled, errorMessage }) =>
-      !disabled && errorMessage ? "#FEE4E2" : "#E9D7FE"};
+    outline: none;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #f4ebff;
   }
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      color: #667085;
-      background-color: #f2f4f7;
-      pointer-events: none;
-    `}
+  ${({ hasValue, hasError, disabled }) => {
+    if (disabled) {
+      return css`
+        color: #667085;
+        background-color: #f2f4f7;
+        pointer-events: none;
+      `;
+    }
+    if (hasError) {
+      return css`
+        border-color: #fda29b;
+        &:focus {
+          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+            0px 0px 0px 4px #fee4e2;
+        }
+      `;
+    }
+    if (hasValue) {
+      return css`
+        color: #101828;
+      `;
+    }
+  }}
 `;
 
 export const SelectArrowIcon = styled.img<{
   showDropdown: boolean;
 }>`
   transform: ${({ showDropdown }) =>
     showDropdown ? "rotate(180deg)" : "none"};
-  padding-inline: 0.25rem;
 `;
 
 export const OptionalIcon = styled.img`
   width: 1.25rem;
   height: 1.25rem;
-  padding-inline: 0.25rem 0.5rem;
 `;
 
-export const LeftContainer = styled.div`
-  display: flex;
-  align-items: center;
+export const SelectedText = styled.span`
+  flex: 1;
+  padding: 0 0.5rem;
 `;
 
-export const Label = styled.p`
-  margin: 0;
+export const Label = styled.div`
   margin-bottom: 0.25rem;
   color: #344054;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.025rem;
 `;
 
 export const List = styled.ul<{ showDropdown: boolean }>`
-  display: block;
+  display: none;
+  position: absolute;
   width: 100%;
   margin: 0.5rem 0 0;
   padding: 0;
-  position: absolute;
+  z-index: 1;
   background: white;
-  box-shadow: 0 7px 12px -6px #d0d5dd;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
     0px 4px 6px -2px rgba(16, 24, 40, 0.05);
   border-radius: 8px;
   overflow: hidden;
-
   ${({ showDropdown }) =>
-    showDropdown
-      ? css`
-          opacity: 1;
-          visibility: visible;
-          position: absolute;
-          height: auto;
-          z-index: 200;
-        `
-      : css`
-          opacity: 0;
-          visibility: hidden;
-        `};
+    showDropdown &&
+    css`
+      display: block;
+    `}
 `;
 
-export const Hint = styled.p`
-  margin: 0;
+export const Hint = styled.div`
   margin-top: 0.25rem;
   color: #667085;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.025rem;
 `;
 
-export const ErrorMessage = styled.p`
-  margin: 0;
-  margin-top: 0.25rem;
+export const ErrorMessage = styled(Hint)`
   color: #f04438;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0.05rem;
 `;

features/ui/select/select.tsx

@@ -17,7 +17,6 @@ type SelectProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
   placeholder?: string;
   disabled?: boolean;
   iconSrc?: string;
-  width?: string | number;
   label?: string;
   hint?: string;
 };
@@ -33,7 +32,6 @@ export function Select<T>({
   label = "",
   hint = "",
   errorMessage = "",
-  width = "",
   ...props
 }: SelectProps<T>) {
   const [showDropdown, setShowDropdown] = useState(false);
@@ -77,7 +75,7 @@ export function Select<T>({
   );
 
   return (
-    <S.Container ref={ref} width={width} {...props}>
+    <S.Container ref={ref} {...props}>
       {label && <S.Label>{label}</S.Label>}
 
       <S.SelectedOption
@@ -86,23 +84,22 @@ export function Select<T>({
         hasError={!!errorMessage}
         disabled={disabled}
         aria-expanded={showDropdown}
-        width={width}
         onKeyDown={onKeyDown}
+        tabIndex={disabled ? -1 : 0}
+        aria-haspopup="listbox"
       >
-        <S.LeftContainer>
-          {iconSrc && <S.OptionalIcon src={iconSrc} />}
-          {selectedOption?.label || placeholder}
-        </S.LeftContainer>
+        {iconSrc && <S.OptionalIcon src={iconSrc} />}
+        <S.SelectedText>{selectedOption?.label || placeholder}</S.SelectedText>
 
         <S.SelectArrowIcon
           src="/icons/chevron-down.svg"
           showDropdown={showDropdown}
         />
       </S.SelectedOption>
 
-      {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
+      {hint && !errorMessage && <S.Hint>{hint}</S.Hint>}
 
-      {errorMessage && !showDropdown && !disabled && (
+      {errorMessage && !disabled && (
         <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
       )}