Changed bg color for go-select when its disabled

mobi · Dec 8, 2023 · 224e9a7 · 224e9a7
1 parent 6005bac
commit 224e9a7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 23 deletions.
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.scss b/projects/go-lib/src/lib/components/go-select/go-select.component.scss
@@ -1,7 +1,7 @@
-@import '~@ng-select/ng-select/scss/default.theme';
+@import "~@ng-select/ng-select/scss/default.theme";
 
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
+@import "../../../../styles/variables";
+@import "../../../../styles/mixins";
 
 // scss-lint:disable SelectorDepth
 .ng-select .ng-select-container {
@@ -10,15 +10,15 @@
 
   .ng-value-container .ng-input > input {
     font-family: $primary-font-stack;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: $weight-light;
-    letter-spacing: .5pt;
+    letter-spacing: 0.5pt;
     line-height: 1.3;
     padding: 0;
   }
 
   .ng-clear-wrapper .ng-clear {
-    line-height: .875rem;
+    line-height: 0.875rem;
   }
 }
 
@@ -28,7 +28,13 @@
   min-height: auto;
 }
 
-.ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container,
+.ng-select.ng-select-disabled > .ng-select-container {
+  background-color: $theme-light-app-bg;
+}
+
+.ng-select.ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container,
 .ng-select.ng-select-single .ng-select-container .ng-value-container {
   align-items: flex-start;
   padding: 0;
@@ -37,14 +43,17 @@
 // overrides position of input element
 .ng-select.ng-select-multiple .ng-select-container .ng-value-container,
 .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
-  padding: .5rem;
+  padding: 0.5rem;
   // scss-lint:disable ImportantRule
   position: relative !important; // I hate that we have to do this
   top: 0;
 }
 
-.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
-  padding: .5rem;
+.ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-input {
+  padding: 0.5rem;
 }
 
 // overrides input radius when opened
@@ -58,12 +67,18 @@
 }
 
 // overrides placeholder positioning
-.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder,
-.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+.ng-select.ng-select-single
+  .ng-select-container
+  .ng-value-container
+  .ng-placeholder,
+.ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-placeholder {
   color: $theme-light-border;
   font-weight: $weight-light;
   line-height: 1.3;
-  padding: .5rem;
+  padding: 0.5rem;
   position: absolute;
   top: 0;
 }
@@ -72,7 +87,7 @@
   @include z-index(1);
 
   line-height: 1.3;
-  padding: .5rem;
+  padding: 0.5rem;
   position: absolute;
   top: 0;
   width: 100%;
@@ -83,19 +98,22 @@
 }
 
 // overrides for multiselect selected options
-.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+.ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value {
   background: $ui-color-primary;
   border-radius: $global-radius;
   color: $base-light;
   display: inline-flex;
   flex-direction: row-reverse;
   line-height: 1.3;
-  margin: .5rem 0 0 .5rem;
+  margin: 0.5rem 0 0 0.5rem;
 
   .ng-value-label {
     align-items: center;
     display: inline-flex;
-    padding: 0 .25rem 0 .5rem;
+    padding: 0 0.25rem 0 0.5rem;
   }
 
   .ng-value-icon {
@@ -138,8 +156,8 @@
 
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
   color: $theme-light-color;
-  font-size: .875rem;
-  padding: .5rem;
+  font-size: 0.875rem;
+  padding: 0.5rem;
 
   &.ng-option-marked {
     background: $theme-light-bg-hover;
@@ -158,7 +176,9 @@
 
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked,
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
-.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+.ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-selected.ng-option-marked {
   background: $theme-light-bg-hover;
 }
 
@@ -211,7 +231,7 @@ body > .ng-dropdown-panel {
     border: 1px solid $base-dark-secondary;
     color: $theme-dark-color;
 
-    .ng-value-container .ng-input>input {
+    .ng-value-container .ng-input > input {
       color: $theme-dark-color;
     }
   }
@@ -226,11 +246,11 @@ body > .ng-dropdown-panel {
     border: 0;
     cursor: pointer;
     font-family: $primary-font-stack;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: $weight-light;
     line-height: 1;
     outline: none;
-    padding: .5rem;
+    padding: 0.5rem;
     text-align: left;
     width: 100%;
 

diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts b/projects/go-lib/src/lib/components/go-select/go-select.component.spec.ts
@@ -46,6 +46,13 @@ describe("GoSelectComponent", () => {
       component.multiple = true;
     });
 
+    it("should apply the correct styles for ng-select-disabled", () => {
+      fixture.detectChanges();
+      expect(
+        fixture.debugElement.queryAll(By.css(".ng-select-container"))?.length
+      ).toBe(1);
+    });
+
     it("adds all of the available items to the form control value", () => {
       component.bindValue = undefined;
       component.items = [