Skip to content

Commit

Permalink
[PBNTR-417] Form Pills [4 + 5 of 4] Add All Color Options, Update Def…
Browse files Browse the repository at this point in the history 
…ault to Neutral Color (#3636)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-417](https://runway.powerhrg.com/backlog_items/PBNTR-417) does a
lot for form pills and the two kits which use form pills under the hood,
Typeahead and MultiLevelSelect.
This PR contains (bullet points for clarity):

- The addition of 20 color options for form pills (from handoff CSBs:
[Status](https://codesandbox.io/p/sandbox/form-pills-status-colors-yksrhn?file=%2Fsrc%2Fstyles.scss%3A78%2C26),
[Data](https://codesandbox.io/p/sandbox/form-pills-data-colors-vjxrjh?file=%2Fsrc%2Fstyles.scss),
and
[Product](https://codesandbox.io/p/sandbox/typeahead-dropdown-dark-mode-pweuee?file=%2Fsrc%2Fstyles.scss),
and rails/react doc examples with markdown. Colors should match handoff
for light and dark mode.
- ~~Updating the default form pill color from primary to neutral for the
form pill kit and the two kits which use it under the hood, typeahead
and multilevelselect.~~ See runway ticket update from Sept 17: `primary`
will remain the default color for form pills, typeaheads,
multilevelselect.
- A `pillColor`/`pill_color` prop for pill colors has been exposed
within typeahead and multilevelselect for rails and react, so a dev can
change the color of all form pills within one typeahead or
multilevelselect - a "Pill Color" doc example (rails/react) has been
added to each kit showing a dev how to do so, and links them to all
possible color options. Colors should match handoff form pills in light
and dark mode for typeahead, and just light mode for multilevelselect
(as the kit does not have any dark mode yet, so in dark mode the entire
input just white and the form pills remain light mode style).
- Updated tests.

Additional things to note (these environments use an alpha in which
neutral was set as default):
[CSB
Here](https://codesandbox.io/p/sandbox/pbntr-417-form-pills-4-and-5-of-4-5-alpha-x28hxt)
showing assorted colors within typeahead/multilevelselect - for
observation/can fork for additional testing or experimenting.
[Nitro-web PR here](powerhome/nitro-web#42135)
which will have the alpha environment for teams to evaluate neutral form
pill within kits appearance.

**Screenshots:** Screenshots to visualize your addition/change
Form Pill doc examples
<img width="1312" alt="for PR react light fp"
src="https://github.com/user-attachments/assets/935353bf-496c-4ca5-aee1-9ffe4cf8d6d2">
<img width="1318" alt="for PR rails dark fp"
src="https://github.com/user-attachments/assets/4c12902e-d30c-417c-adeb-b7de06067c64">


Typeahead doc examples
<img width="265" alt="for PR rails light primary default typeahead"
src="https://github.com/user-attachments/assets/066c4107-ee70-454f-8404-1b53aab36661">
<img width="1310" alt="for PR rails light color docex typeahead"
src="https://github.com/user-attachments/assets/649a2af9-cf41-400e-ba3b-49a32966274a">
<img width="293" alt="for PR react dark primary default typeahead"
src="https://github.com/user-attachments/assets/71e4e66f-ce0f-4f68-82da-e2552f145132">
<img width="1319" alt="for PR react dark color docex typeahead"
src="https://github.com/user-attachments/assets/b869e168-1109-4810-9db7-773300dca09b">


MultiLevelSelect doc examples
<img width="331" alt="for PR react light primary default mls"
src="https://github.com/user-attachments/assets/0a3c35c2-2e04-479d-bf06-ff013b7bdc87">
<img width="1326" alt="for PR react light doc ex mls"
src="https://github.com/user-attachments/assets/cccead62-2dac-4a3c-983c-57bdc8aa3f5b">
<img width="307" alt="for PR rails dark primary default mls"
src="https://github.com/user-attachments/assets/8b17b16b-f506-42bc-b205-2855ad7e2913">
<img width="1320" alt="for PR rails dark doc ex mls"
src="https://github.com/user-attachments/assets/0311d00e-3255-4c08-9ab7-a2224497b6e9">


**How to test?** Steps to confirm the desired behavior:
1. Go to form pill doc examples
([rails](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/form_pill#form-pill-colors),
[react](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/form_pill/react#form-pill-colors))
and see new color options in action. Check dark mode too.
2. Go to typeahead kit page and see the primary color form pill remain
in the "With Pills" doc example
([rails](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/typeahead#with-pills),
[react](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/typeahead/react#with-pills)).
3. Scroll down to the "With Pills (Custom Color)" doc example and see
how the color prop makes the form pills "neutral" (in
[rails](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/typeahead#with-pills-custom-color),
[react](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/typeahead/react#with-pills-custom-color)).
4. Go to multilevelselect kit page and see the primary color form pill
remain in the "Default" doc example
([rails](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/multi_level_select#default),
[react](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/multi_level_select/rails#default)).
5. Scroll down to the "Color" doc example and see how the color prop
makes the form pills "neutral" (in
[rails](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/multi_level_select#color),
[react](https://pr3636.playbook.beta.gm.powerapp.cloud/kits/multi_level_select/rails#color)).
6. Can play around with new colors by forking [this
CSB](https://codesandbox.io/p/sandbox/pbntr-417-form-pills-4-and-5-of-4-5-alpha-x28hxt)
which has this PR's alpha attached (from a previous alpha version when
neutral was set default).


#### 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.
- [x] **TESTS** I have added test coverage to my code.
  • Loading branch information
@ElisaShapiro
ElisaShapiro authored Sep 17, 2024
1 parent ef3ec09 commit 2afc356
Show file tree
Hide file tree
Showing 28 changed files with 887 additions and 44 deletions.
268 changes: 245 additions & 23 deletions playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@

$selector: ".pb_form_pill";
$pb_form_pill_height: 27px;
$form_pill_colors: (
primary: map-get($status_color_text, "primary"),
neutral: map-get($status_color_text, "neutral"),
);
$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));


[class^=pb_form_pill_kit] {
Expand All @@ -36,6 +33,18 @@ $form_pill_colors: (
color: $text_lt_default;
}
}
@if ($color_name == "warning") {
background-color: mix($yellow, $card_light, 10%);
.pb_form_pill_icon {
color: $yellow;
}
}
@if ($color_name == "accessories") {
background-color: mix($product_8_background, $card_light, 10%);
.pb_form_pill_icon {
color: $product_8_background;
}
}
transition: background-color 0.2s ease;
box-shadow: none;
@media (hover:hover) {
Expand All @@ -45,19 +54,34 @@ $form_pill_colors: (
background-color: mix($neutral, $card_light, 20%);
border: 1px solid $border_light;
}
@if ($color_name == "warning") {
background-color: mix($yellow, $card_light, 20%);
}
@if ($color_name == "accessories") {
background-color: mix($product_8_background, $card_light, 20%);
}
}
&:active {
background-color: mix($color_value, $card_light, 30%);
@if ($color_name == "neutral") {
background-color: mix($neutral, $card_light, 30%);
}
@if ($color_name == "warning") {
background-color: mix($yellow, $card_light, 30%);
}
@if ($color_name == "accessories") {
background-color: mix($product_8_background, $card_light, 30%);
}
}
}
#{$selector}_text {
color: $color_value;
@if ($color_name == "neutral") {
color: $text_lt_default;
}
@if ($color_name == "warning") {
color: $yellow;
}
padding: 0 $space-xs;
}
#{$selector}_close {
Expand All @@ -76,13 +100,33 @@ $form_pill_colors: (
background-color: mix($neutral, $card_light, 60%);
}
}
@if ($color_name == "warning") {
color: $yellow;
}
&:hover {
background-color: mix($color_value, $card_light, 40%);
@if ($color_name == "warning") {
background-color: mix($yellow, $card_light, 40%);
}
}
@if ($color_name == "accessories") {
color: $product_8_background;
}
&:hover {
@if ($color_name == "accessories") {
background-color: mix($product_8_background, $card_light, 40%);
}
}
}
#{$selector}_tag {
color: $color_value;
padding: 0 $space-xs;
@if ($color_name == "neutral") {
color: $text_lt_default;
}
@if ($color_name == "warning") {
color: $yellow;
}
}
}
}
Expand Down Expand Up @@ -132,25 +176,23 @@ $form_pill_colors: (
}
&.dark {
@each $color_name, $color_value in $form_pill_colors {
// In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info.
// Primary and Neutral are exceptions to the general rule in the handoff
&[class*=_#{$color_name}] {
// background-color: mix($color_value, $card_dark, 10%);
// .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
// color: $color_name;
// }
// .pb_form_pill_close {
// color: $color_name;
// &:hover {
// background-color: mix($color_value, $card_dark, 40%);
// }
// }
// &:hover {
// background-color: mix($color_value, $card_dark, 20%);
// }
// &:active {
// background-color: mix($color_value, $card_dark, 30%);
// }
background-color: mix($color_value, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $color_name;
}
.pb_form_pill_close {
color: $color_name;
&:hover {
background-color: mix($color_value, $card_dark, 40%);
}
}
&:hover {
background-color: mix($color_value, $card_dark, 20%);
}
&:active {
background-color: mix($color_value, $card_dark, 30%);
}
@if ($color_name == "neutral") {
background-color: transparent;
border: 1px solid $border_dark;
Expand Down Expand Up @@ -185,12 +227,192 @@ $form_pill_colors: (
}
}
&:hover {
background-color: mix($active_dark, $card_dark, 20px);
background-color: mix($active_dark, $card_dark, 20%);
}
&:active {
background-color: mix($active_dark, $card_dark, 30%);
}
}
@if ($color_name == "data_1") {
background-color: mix($active_dark, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: mix($active_dark, $card_light, 90%);
}
.pb_form_pill_close {
color: mix($active_dark, $card_light, 90%);
&:hover {
background-color: mix($active_dark, $card_dark, 40%);
}
}
&:hover {
background-color: mix($active_dark, $card_dark, 20%);
}
&:active {
background-color: mix($data_1, $card_dark, 30%);
}
}
@if ($color_name == "data_6") {
background-color: mix($data_6, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $text_dk_light;
}
.pb_form_pill_close {
color: $text_dk_light;
&:hover {
background-color: mix($text_dk_light, $card_dark, 40%);
}
}
&:hover {
background-color: mix($data_6, $card_dark, 20%);
}
&:active {
background-color: mix($data_6, $card_dark, 30%);
}
}
@if ($color_name == "windows") {
background-color: mix($product_1_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_1_highlight;
}
.pb_form_pill_close {
color: $product_1_highlight;
&:hover {
background-color: mix($product_1_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_1_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_1_highlight, $card_dark, 30%);
}
}
@if ($color_name == "siding") {
background-color: mix($product_2_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_2_highlight;
}
.pb_form_pill_close {
color: $product_2_highlight;
&:hover {
background-color: mix($product_2_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_2_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_2_highlight, $card_dark, 30%);
}
}
@if ($color_name == "roofing") {
background-color: mix($product_5_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_5_highlight;
}
.pb_form_pill_close {
color: $product_5_highlight;
&:hover {
background-color: mix($product_5_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_5_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_5_highlight, $card_dark, 30%);
}
}
@if ($color_name == "doors") {
background-color: mix($product_3_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_3_highlight;
}
.pb_form_pill_close {
color: $product_3_highlight;
&:hover {
background-color: mix($product_3_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_3_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_3_highlight, $card_dark, 30%);
}
}
@if ($color_name == "gutters") {
background-color: mix($product_6_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_6_highlight;
}
.pb_form_pill_close {
color: $product_6_highlight;
&:hover {
background-color: mix($product_6_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_6_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_6_highlight, $card_dark, 30%);
}
}
@if ($color_name == "solar") {
background-color: mix($product_4_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_4_highlight;
}
.pb_form_pill_close {
color: $product_4_highlight;
&:hover {
background-color: mix($product_4_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_4_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_4_highlight, $card_dark, 30%);
}
}
@if ($color_name == "insulation") {
background-color: mix($product_7_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $product_7_highlight;
}
.pb_form_pill_close {
color: $product_7_highlight;
&:hover {
background-color: mix($product_7_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_7_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_7_highlight, $card_dark, 30%);
}
}
@if ($color_name == "accessories") {
background-color: mix($product_8_highlight, $card_dark, 10%);
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
color: $text_dk_light;
}
.pb_form_pill_close {
color: $text_dk_light;
&:hover {
background-color: mix($product_8_highlight, $card_dark, 40%);
}
}
&:hover {
background-color: mix($product_8_highlight, $card_dark, 20%);
}
&:active {
background-color: mix($product_8_highlight, $card_dark, 30%);
}
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type FormPillProps = {
avatarUrl?: string,
size?: string,
textTransform?: 'none' | 'lowercase',
color?: "primary" | "neutral",
color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
data?: {[key: string]: string},
tabIndex?: number,
icon?: string,
Expand Down
Loading

0 comments on commit 2afc356

Please sign in to comment.