fix: update mgt-taxonomy-picker colors to match mgt-picker (#2747)

microsoftgraph · Oct 4, 2023 · be7add8 · be7add8
1 parent c9023c2
commit be7add8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
@@ -10,11 +10,25 @@
 @import './mgt-taxonomy-picker.theme';
 
 :host {
-  --max-height: var(--taxonomy-picker-max-height, 380px);
+  --max-height: var(--taxonomy-picker-list-max-height, 380px);
 
   .picker {
     background-color: $taxonomy-picker-background-color;
   }
+
+  fluent-combobox {
+    &::part(selected-value) {
+      &::placeholder {
+        color: $taxonomy-picker-placeholder-color;
+      }
+
+      &:hover {
+        &::placeholder {
+          color: $taxonomy-picker-placeholder-hover-color;
+        }
+      }
+    }
+  }
 }
 
 [dir='rtl'] {

diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss
@@ -8,3 +8,8 @@
 @import '../../styles/shared-sass-variables';
 
 $taxonomy-picker-background-color: var(--taxonomy-picker-background-color, transparent);
+$taxonomy-picker-placeholder-color: var(--taxonomy-picker-placeholder-color, var(--input-filled-placeholder-rest));
+$taxonomy-picker-placeholder-hover-color: var(
+  --taxonomy-picker-placeholder-color-hover,
+  var(--secondary-text-hover-color)
+);
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
@@ -33,6 +33,8 @@ registerFluentComponents(fluentCombobox, fluentOption);
  *
  * @cssprop --taxonomy-picker-background-color - {Color} Picker component background color
  * @cssprop --taxonomy-picker-list-max-height - {String} max height for options list. Default value is 380px.
+ * @cssprop --taxonomy-picker-placeholder-color - {Color} Text color for the placeholder in the picker
+ * @cssprop --taxonomy-picker-placeholder-hover-color - {Color} Text color for the placeholder in the picker on hover
  */
 @customElement('taxonomy-picker')
 export class MgtTaxonomyPicker extends MgtTemplatedComponent {