fix: moved style of dropdown option to css-in-js

EAVFW · Mar 11, 2024 · f8d80ec · f8d80ec
1 parent c33f353
commit f8d80ec
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 43 deletions.
diff --git a/...s/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.module.css b/...s/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.module.css
@@ -1,22 +1,5 @@
 .dropdown-select__option {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0 8px;
-  margin-left: 8px;
-  margin-bottom: 5px;
-  font-size: 2rem;
-  min-height: 40px;
-
-  cursor: pointer;
-  transition: background-color 0.3s;
-  overflow-x: auto;
-
-  color: var(--on-surface);
-  background-color: transparent;
-
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
+
 }
 
    /* .dropdown-select__option:hover {

diff --git a/...s/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/...s/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -4,45 +4,65 @@ import styles from "./DropdownSelectOption.module.css";
 import { makeStyles, mergeClasses } from "@griffel/react";
 import { quickformtokens } from "@eavfw/quickform-core/src/style/quickformtokens";
 import { Checkmark } from "@eavfw/quickform-core/src/components/icons";
+import { shorthands } from "@fluentui/react-components";
 
 type DropdownSelectOptionProps = {
-  readonly isSelected?: boolean;
-  readonly onClick?: MouseEventHandler;
-  readonly className?: string;
-  readonly children: ReactNode;
+    readonly isSelected?: boolean;
+    readonly onClick?: MouseEventHandler;
+    readonly className?: string;
+    readonly children: ReactNode;
 };
 
 const useDropDownSelectOptionStyles = makeStyles({
-    root: {
+
+    selected: {
+        backgroundColor: quickformtokens.onBackgroundDarker800
+    },
+    option: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        ...shorthands.padding('0px', '8px'),
+        marginLeft: '8px',
+        marginBottom: '5px',
+        fontSize: '2rem',
+        minHeight: '40px',
+
+        cursor: 'pointer',
+        ...shorthands.transition('background-color', '0.3s'),
+        overflowX: 'auto',
+
+        color: quickformtokens.onSurface,
+        backgroundColor: 'transparent',
+
+        ...shorthands.border('1px', 'solid', quickformtokens.borderColor),
+        ...shorthands.borderRadius('5px'),
         ':hover': {
             color: quickformtokens.onSurface,
             backgroundColor: quickformtokens.onBackgroundDarker900
         }
-    },
-    selected: {
-        backgroundColor: quickformtokens.onBackgroundDarker800
     }
 })
 
 export function DropdownSelectOption({
-  isSelected,
-  onClick,
-  className,
-  children,
+    isSelected,
+    onClick,
+    className,
+    children,
 }: DropdownSelectOptionProps) {
 
     const selectOptionStyles = useDropDownSelectOptionStyles();
-  return (
-      <span
-          className={classNames(styles["dropdown-select__option"], className, mergeClasses(selectOptionStyles.root, isSelected && selectOptionStyles.selected), {
-        [styles["animate"]]: isSelected,
-        [styles["selected"]]: isSelected,
-      })}
-      onClick={onClick}
-    >
-      {children}
-          {isSelected && (
-              <Checkmark color={quickformtokens.onSurface} size={24} />)}
-    </span>
-  );
+    return (
+        <span
+            className={classNames(styles["dropdown-select__option"], className, mergeClasses(selectOptionStyles.option, isSelected && selectOptionStyles.selected), {
+                [styles["animate"]]: isSelected,
+                [styles["selected"]]: isSelected,
+            })}
+            onClick={onClick}
+        >
+            {children}
+            {isSelected && (
+                <Checkmark color={quickformtokens.onSurface} size={24} />)}
+        </span>
+    );
 }