Merge pull request #135 from ConductionNL/feature/XW-94/update-select…

…-box feature/XW-94/update-select-box
ConductionNL · Oct 17, 2023 · 928297d · 928297d
2 parents 9a917d3 + d0be5d4
commit 928297d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -4,10 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.19: Add HorizontalOverflowWrapper component and refactor Tabs Component overflow scroll.
   - 2.2.18:
     - Refactored select role attribute.
     - Fixed Pagination-button border-radius.
+    - Added colors for Focus and Selected options in Select forms.
+    - Add HorizontalOverflowWrapper component and refactor Tabs Component overflow scroll.
   - 2.2.17: Refactor Pagination to include aria labels and make aria label required on texarea, input and select components.
   - 2.2.15/2.2.16: Added more NLDS options to Pagination.
   - 2.2.13/2.2.14:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.19",
+  "version": "2.2.18",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/formFields/select/select.module.css b/src/components/formFields/select/select.module.css
@@ -12,6 +12,11 @@
 
   --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
   /* --conduction-input-select-list-option-background-color: unset; */
+  /* --conduction-input-select-list-option-color: unset; */
+  /* --conduction-input-select-list-option-selected--background-color: unset; */
+  /* --conduction-input-select-list-option-selected-color: unset; */
+  /* --conduction-input-select-list-option-focus--background-color: unset; */
+  /* --conduction-input-select-list-option-focus-color: unset; */
 
   /* --conduction-input-select-list-option-hover-background-color: unset; */
   /* --conduction-input-select-list-option-hover-color: unset; */

diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
@@ -23,10 +23,24 @@ interface ISelectProps {
 
 const selectStyles: StylesConfig = {
   menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
+  option: (base, state) => ({
     ...base,
     fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+    backgroundColor: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-background-color, ${base.backgroundColor})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-background-color, ${base.backgroundColor})`
+        : `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor})`,
+    ],
+
+    color: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-color, ${base.color})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-color, ${base.color})`
+        : `var(--conduction-input-select-list-option-color, ${base.color})`,
+    ],
 
     "&:hover": {
       backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,