Merge pull request #832 from DTS-STN/form-style-update

fix: update form component border to 2px, update dropdown placeholder…
DTS-STN · May 30, 2023 · 515ead4 · 515ead4
2 parents 34dbb45 + 07500dd
commit 515ead4
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 15 deletions.
diff --git a/config-plugins/checkboxes-plugin.js b/config-plugins/checkboxes-plugin.js
@@ -6,7 +6,7 @@ const checkboxes = plugin(function ({ addUtilities, theme }) {
       width: "44px",
       // borderColor: theme("colors.multi.neutrals.grey85a"),
       borderRadius: "4px",
-      borderWidth: "1.5px",
+      borderWidth: "2px",
     },
     ".example64": {
       borderRadius: "4px",

diff --git a/config-plugins/datepicker-plugin.js b/config-plugins/datepicker-plugin.js
@@ -4,7 +4,7 @@ const datepicker = plugin(function ({ addUtilities, theme }) {
     // default
     ".date-style": {
       borderColor: theme("colors.multi.neutrals.grey50"),
-      borderWidth: "1.5px",
+      borderWidth: "2px",
       borderRadius: "4px",
       borderStyle: "solid",
       paddingLeft: "4px",

diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js
@@ -28,7 +28,7 @@ export function CheckBox(props) {
             type="checkbox"
             className={`${
               checked ? "ds-border-multi-blue-blue60f" : ""
-            } ds-absolute ds-appearance-none ds-checkbox_style ds-outline-none
+            } ds-absolute ds-appearance-none ds-checkbox_style ds-outline-none ds-cursor-pointer
             ${validationClass}
             `}
             onChange={onChange}

diff --git a/src/components/FormDatePicker/FormDatePicker.js b/src/components/FormDatePicker/FormDatePicker.js
@@ -118,9 +118,11 @@ export function FormDatePicker(props) {
           <label className="ds-form-date" htmlFor={monthId}>
             {language.datePicker.month}
           </label>
-          <div className="ds-w-[156px]">
+          <div className={lang === "en" ? "ds-w-[180px]" : "ds-w-[250px]"}>
             <FormDropdown
-              defaultValue={month}
+              defaultValue={
+                lang === "en" ? "Select month" : "Sélectionner le mois"
+              }
               options={props.lang === "en" ? monthValuesEN : monthValuesFR}
               onChange={onMonthChange}
             />
@@ -138,7 +140,7 @@ export function FormDatePicker(props) {
               min={"1"}
               max={maxDay}
               onChange={_onDayChange}
-              className={`ds-w-[51px] ds-px-10px ds-rounded ds-date-text ds-border-1.5 ds-border-multi-neutrals-grey85a ds-py-5px ds-outline-none ${validationClass}`}
+              className={`ds-w-[51px] ds-px-10px ds-rounded ds-date-text ds-border-2 ds-border-multi-neutrals-grey85a ds-py-5px ds-outline-none ${validationClass}`}
             />
           </div>
         ) : null}
@@ -154,7 +156,7 @@ export function FormDatePicker(props) {
               min={minYear}
               max={maxYear}
               onChange={_onYearChange}
-              className={`ds-w-[74px] ds-py-5px ds-px-10px ds-rounded ds-date-text ds-border-1.5 ds-border-multi-neutrals-grey85a ds-outline-none ${validationClass}`}
+              className={`ds-w-[74px] ds-py-5px ds-px-10px ds-rounded ds-date-text ds-border-2 ds-border-multi-neutrals-grey85a ds-outline-none ${validationClass}`}
             />
           </div>
         ) : null}

diff --git a/src/components/FormDropdown/FormDropdown.css b/src/components/FormDropdown/FormDropdown.css
@@ -47,7 +47,7 @@
 }
 
 .dropdown-select:focus {
-  border: solid 1.5px #0e62c9;
+  border: solid 2px #0e62c9;
   box-shadow: 0px 0px 6px rgba(14, 98, 201, 0.6);
 }
 

diff --git a/src/components/FormDropdown/FormDropdown.js b/src/components/FormDropdown/FormDropdown.js
@@ -49,7 +49,7 @@ export const FormDropdown = (props) => {
         <button
           className={`${isOpen ? "ds-rounded-t-[4px]" : "ds-rounded-[4px]"} ${
             props.hasError ? "ds-border-[#D3080C]" : "ds-border-[#6f6f66]"
-          } dropdown-select ds-border-[1.5px]`}
+          } dropdown-select ds-border-2`}
           onClick={() => setIsOpen(!isOpen)}
         >
           {isOpen ? (

diff --git a/src/components/FormDropdown/FormDropdown.stories.js b/src/components/FormDropdown/FormDropdown.stories.js
@@ -35,7 +35,7 @@ Default.args = {
   },
   dataTestId: "textbox-controlled",
   requiredText: "required",
-  defaultValue: "option 1",
+  defaultValue: "Select [insert topic]",
   options: [
     { id: "1", value: "option 1" },
     { id: "2", value: "option 2" },

diff --git a/src/components/FormLabel/FormLabel.js b/src/components/FormLabel/FormLabel.js
@@ -33,7 +33,7 @@ export function FormLabel(props) {
           {props.hintProps.description}
         </HintExpander>
       )}
-      <div className="ds-font-body ds-text-lg ds-leading-22px ds-font-medium ds-pb-2 ds-text-multi-neutrals-grey90a">
+      <div className="ds-font-body ds-text-[20px] ds-leading-[26px] ds-font-medium ds-my-[8px] ds-text-multi-neutrals-grey90a">
         {props.helpText}
       </div>
     </>

diff --git a/src/components/FormRadioButton/FormRadioButton.js b/src/components/FormRadioButton/FormRadioButton.js
@@ -49,7 +49,7 @@ export function FormRadioButton(props) {
             <span
               role="radio"
               aria-label={props.name}
-              className={`ds-relative ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-1.5 ds-border-solid ${validationClass} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
+              className={`ds-relative ds-label ds-block ds-mr-3.5 ds-min-w-43px ds-w-43px ds-h-43px ds-border-2 ds-border-solid ${validationClass} ds-rounded-full ds-float-left after:ds-absolute ds-outline-0`}
               aria-checked="false"
               tabIndex={0}
             ></span>

diff --git a/src/components/FormTextField/FormTextField.js b/src/components/FormTextField/FormTextField.js
@@ -44,7 +44,7 @@ export function FormTextField(props) {
             : props.size === "2"
             ? "ds-w-[51px]"
             : props.size
-        } ds-rounded ds-text-input ds-text-mobileh5 ds-text-multi-neutrals-grey100 ds-min-h-44px ds-text-form-input-gray ds-border-[1.5px] ds-py-5px ds-px-14px ${
+        } ds-rounded ds-text-input ds-text-mobileh5 ds-text-multi-neutrals-grey100 ds-min-h-44px ds-text-form-input-gray ds-border-2 ds-py-5px ds-px-14px ${
           props.hasError
             ? "ds-border-specific-red-red50b"
             : "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f"

diff --git a/src/components/HintExpander/HintExpander.css b/src/components/HintExpander/HintExpander.css
@@ -41,4 +41,5 @@
   margin-left: 2px;
   border-left: 2px solid #284162;
   color: #5c5c5c;
+  font-family: "Noto Sans";
 }
diff --git a/src/styles/forms.css b/src/styles/forms.css
@@ -37,13 +37,13 @@
 }
 
 .control-input:focus + .control-label::before {
-  border-width: 1 px;
+  border-width: 2px;
   -webkit-box-shadow: 0px 0px 6px rgba(14, 98, 201, 0.6);
   box-shadow: 0px 0px 6px rgba(14, 98, 201, 0.6);
 }
 
 .ds-text-input:focus {
-  border-width: 1px;
+  border-width: 2px;
   box-shadow: 0px 0px 6px rgba(14, 98, 201, 0.6);
   outline: 0;
 }