From 21bd9cdad2415a26b6316ba010e4491351d66a27 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 17 Oct 2023 13:04:52 +0200 Subject: [PATCH 1/4] added focus and selected options --- .../formFields/select/select.module.css | 5 +++++ src/components/formFields/select/select.tsx | 19 +++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/formFields/select/select.module.css b/src/components/formFields/select/select.module.css index a21a5f2..20b5433 100644 --- 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 index 93d3234..e8b55ae 100644 --- 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})`, @@ -169,6 +183,7 @@ export const SelectSingle = ({ return ( <> Date: Tue, 17 Oct 2023 13:05:55 +0200 Subject: [PATCH 2/4] updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3f3f30c..606826f 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ - 2.2.18: - Refactored select role attribute. - Fixed Pagination-button border-radius. + - Added colors for Focus and Selected options in Select forms. - 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: From 636128003b6e93eb1a5f4c88e8808f9f60795ca9 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 17 Oct 2023 13:07:07 +0200 Subject: [PATCH 3/4] cleanup --- src/components/formFields/select/select.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index e8b55ae..3c0a198 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -183,7 +183,6 @@ export const SelectSingle = ({ return ( <> Date: Tue, 17 Oct 2023 14:20:04 +0200 Subject: [PATCH 4/4] updated version and readme --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3501d62..fcda5df 100644 --- a/README.md +++ b/README.md @@ -4,11 +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 index 6537921..4d59877 100644 --- 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": {