[PLAY-1789] Dark Mode Select (#4128)

yuriyivanenko · web-flow · commit dee99849cea5 · 2025-01-23T11:17:54.000-05:00
**What does this PR do?** A clear and concise description with your runway ticket url. This PR audits the Select component for proper use of dark mode colors. 1. Change all lables to use $text_dk_light 2. Select Inline us updated to have a more visible hover color 3. Error state is using $error_dark for border-color [Story](https://runway.powerhrg.com/backlog_items/PLAY-1789) **Screenshots:** Screenshots to visualize your addition/change <img width="588" alt="Screenshot 2025-01-15 at 8 33 22 AM" src="https://github.com/user-attachments/assets/a4dcc56d-b7c3-4bba-a9b9-8fb6f22b85d2" /> <img width="758" alt="Screenshot 2025-01-15 at 8 39 14 AM" src="https://github.com/user-attachments/assets/2419831c-72ea-4bc9-83ad-243390f92ea5" /> **How to test?** Steps to confirm the desired behavior: 1. Go to [https://pr4128.playbook.beta.gm.powerapp.cloud/kits/select/rails](https://pr4128.playbook.beta.gm.powerapp.cloud/kits/select/rails) 4. Turn on "Dark Mode" and go to the Select Kit 5. Scroll down to 'Select Default' 6. Compare caption text color to prod 7. Scroll down to 'Select w/Error' 8. Observe color of border and error message. Not that different from prod. 9. Scroll down to 'Select Inline' 10. Hover over to see color change #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code.
diff --git a/playbook/app/pb_kits/playbook/pb_select/_select.scss b/playbook/app/pb_kits/playbook/pb_select/_select.scss
@@ -209,10 +209,8 @@
   }
   .pb_select_kit_wrapper {
     &.error {
-      .pb_select_kit_wrapper {
-        > select:first-child {
-          border-color: $error_dark;
-        }
+      > select {
+        border-color: $error_dark;
       }
     }
   }
@@ -228,7 +226,7 @@
     &:hover {
       select {
         color: $white !important;
-        background: rgba(0,130,255,0.1);
+        background: $focus_input_dark;
       }
       svg {
         color: $primary !important;
diff --git a/playbook/app/pb_kits/playbook/pb_select/_select.tsx b/playbook/app/pb_kits/playbook/pb_select/_select.tsx
@@ -127,7 +127,10 @@ const Select = ({
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption text={label} />
+          <Caption 
+              dark={props.dark}
+              text={label} 
+          />
         </label>
       }
       <label
@@ -146,6 +149,7 @@ const Select = ({
         }
         {error &&
           <Body
+              dark={props.dark}
               status="negative"
               text={error}
           />
diff --git a/playbook/app/pb_kits/playbook/pb_select/select.html.erb b/playbook/app/pb_kits/playbook/pb_select/select.html.erb
@@ -5,7 +5,7 @@
   **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label }) %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
@@ -23,7 +23,7 @@
         object.all_attributes
       )
       %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
     <% end %>
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>

Original file line number	Diff line number	Diff line change
`@@ -209,10 +209,8 @@`
`209`	`209`	`}`
`210`	`210`	`.pb_select_kit_wrapper {`
`211`	`211`	`&.error {`
`212`		`- .pb_select_kit_wrapper {`
`213`		`- > select:first-child {`
`214`		`- border-color: $error_dark;`
`215`		`- }`
	`212`	`+ > select {`
	`213`	`+ border-color: $error_dark;`
`216`	`214`	`}`
`217`	`215`	`}`
`218`	`216`	`}`
`@@ -228,7 +226,7 @@`
`228`	`226`	`&:hover {`
`229`	`227`	`select {`
`230`	`228`	`color: $white !important;`
`231`		`- background: rgba(0,130,255,0.1);`
	`229`	`+ background: $focus_input_dark;`
`232`	`230`	`}`
`233`	`231`	`svg {`
`234`	`232`	`color: $primary !important;`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,10 @@ const Select = ({`
`127`	`127`	`className="pb_select_kit_label"`
`128`	`128`	`htmlFor={name}`
`129`	`129`	`>`
`130`		`- <Caption text={label} />`
	`130`	`+ <Caption`
	`131`	`+ dark={props.dark}`
	`132`	`+ text={label}`
	`133`	`+ />`
`131`	`134`	`</label>`
`132`	`135`	`}`
`133`	`136`	`<label`
`@@ -146,6 +149,7 @@ const Select = ({`
`146`	`149`	`}`
`147`	`150`	`{error &&`
`148`	`151`	`<Body`
	`152`	`+ dark={props.dark}`
`149`	`153`	`status="negative"`
`150`	`154`	`text={error}`
`151`	`155`	`/>`