feat: grey placeholders in form components (#128)

City-of-Helsinki · Dec 29, 2022 · 6b95e83 · 6b95e83
1 parent 04d95d5
commit 6b95e83
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 6 deletions.
diff --git a/apps/events-helsinki/src/styles/globals.scss b/apps/events-helsinki/src/styles/globals.scss
@@ -53,17 +53,17 @@ button {
 }
 
 ::placeholder {
-  color: var(--color-primary-black);
+  color: var(--color-black-60);
 }
 
 :-ms-input-placeholder {
   /* Internet Explorer 10-11 */
-  color: var(--color-primary-black);
+  color: var(--color-black-60);
 }
 
 ::-ms-input-placeholder {
   /* Microsoft Edge */
-  color: var(--color-primary-black);
+  color: var(--color-black-60);
 }
 
 #cookie-consent-language-selector-button {

diff --git a/apps/hobbies-helsinki/src/styles/globals.scss b/apps/hobbies-helsinki/src/styles/globals.scss
@@ -39,6 +39,20 @@ button {
   cursor: pointer;
 }
 
+::placeholder {
+  color: var(--color-black-60);
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--color-black-60);
+}
+
+::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--color-black-60);
+}
+
 #cookie-consent-language-selector-button {
   display: none;
 }
diff --git a/apps/sports-helsinki/src/styles/globals.scss b/apps/sports-helsinki/src/styles/globals.scss
@@ -50,6 +50,20 @@ button {
   cursor: pointer;
 }
 
+::placeholder {
+  color: var(--color-black-60);
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--color-black-60);
+}
+
+::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--color-black-60);
+}
+
 #cookie-consent-language-selector-button {
   display: none;
 }
diff --git a/packages/components/src/components/dateSelector/DateSelector.tsx b/packages/components/src/components/dateSelector/DateSelector.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { IconAngleDown, IconAngleUp, IconCalendarClock } from 'hds-react';
 import React from 'react';
 import type { FunctionComponent } from 'react';
@@ -167,7 +168,12 @@ const DateSelector: FunctionComponent<DateSelectorProps> = ({
           <IconCalendarClock aria-hidden />
         </div>
         <div className={styles.info}>
-          <div className={styles.buttonTextWrapper}>
+          <div
+            className={classNames(
+              styles.buttonTextWrapper,
+              !selectedText && styles.isEmpty
+            )}
+          >
             {selectedText || (t('common:dateSelector.title') as string)}
           </div>
         </div>

diff --git a/packages/components/src/components/dateSelector/dateSelector.module.scss b/packages/components/src/components/dateSelector/dateSelector.module.scss
@@ -29,6 +29,9 @@
       height: 1.25rem;
       width: 1.25rem;
       fill: var(--color-primary-black);
+      & > g {
+        color: var(--color-primary-black);
+      }
     }
   }
 
@@ -47,6 +50,11 @@
       line-height: 1.25rem;
       right: 0;
       text-overflow: ellipsis;
+      color: var(--color-primary-black);
+
+      &.isEmpty {
+        color: var(--color-black-60);
+      }
     }
   }
 
@@ -59,6 +67,9 @@
       pointer-events: none;
       height: 1.25rem;
       width: 1.25rem;
+      & > g {
+        color: var(--color-primary-black);
+      }
     }
   }
 }

diff --git a/packages/components/src/components/multiSelectDropdown/MultiSelectDropdown.tsx b/packages/components/src/components/multiSelectDropdown/MultiSelectDropdown.tsx
@@ -238,7 +238,14 @@ const MultiSelectDropdown: React.FC<MultiselectDropdownProps> = ({
           <SearchLabel htmlFor={name} srOnly={true}>
             {title}
           </SearchLabel>
-          <div className={styles.titleText}>{selectedText || title}</div>
+          <div
+            className={classNames(
+              styles.titleText,
+              !selectedText && styles.isEmpty
+            )}
+          >
+            {selectedText || title}
+          </div>
         </div>
         <div className={styles.arrowWrapper}>
           {isMenuOpen ? (

diff --git a/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss b/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss
@@ -46,6 +46,9 @@
     svg {
       margin-right: 1rem;
       fill: var(--color-primary-black);
+      & > g {
+        color: var(--color-primary-black);
+      }
     }
   }
 
@@ -69,6 +72,10 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      color: var(--color-primary-black);
+    }
+    .isEmpty {
+      color: var(--color-black-60);
     }
   }
 
@@ -80,6 +87,9 @@
       margin-left: 0.75rem;
       pointer-events: none;
       color: var(--color-primary-black);
+      & > g {
+        color: var(--color-primary-black);
+      }
     }
   }
 

diff --git a/packages/components/src/components/rangeDropdown/RangeDropdown.tsx b/packages/components/src/components/rangeDropdown/RangeDropdown.tsx
@@ -220,7 +220,14 @@ const RangeDropdown: React.FC<RangeDropdownProps> = ({
           <SearchLabel htmlFor={name} srOnly={true}>
             {title}
           </SearchLabel>
-          <div className={styles.titleText}>{title}</div>
+          <div
+            className={classNames(
+              styles.titleText,
+              !value.filter(skipFalsyType).length && styles.isEmpty
+            )}
+          >
+            {title}
+          </div>
         </div>
         <div className={styles.arrowWrapper}>
           {isMenuOpen ? (

diff --git a/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss b/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss
@@ -46,6 +46,7 @@
 
     svg {
       margin-right: 1rem;
+      color: var(--color-primary-black);
       fill: var(--color-primary-black);
     }
   }
@@ -70,6 +71,10 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      color: var(--color-primary-black);
+    }
+    .isEmpty {
+      color: var(--color-black-60);
     }
   }