feat(input): enable input font-family custom property (#322) (#324)

close #322 --------- Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
globalbrain · Jul 31, 2023 · 4f111b1 · 4f111b1
1 parent 2d99920
commit 4f111b1
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/docs/styles/input-styles.md b/docs/styles/input-styles.md
@@ -6,14 +6,20 @@ Input related component such as `SInputText` or `SInputSelect` shares many commo
 
 Here are the list of all available CSS variables that you can customize.
 
-### Font size
+### Font stylings
 
-Customize the font size of the generic input value. The font size is different depending on the input's size defined by the `size` prop. You may override the font size for all inputsizes, or customize them individually.
+Customize the font size and family of the generic input value. The font size is different depending on the input's size defined by the `size` prop. You may override the font size for all input sizes, or customize them individually.
 
 ```css
 :root {
   /**
-   * Set the font size for all size of inputs. By default it's
+   * Set the font family for all size of inputs. By default it is
+   * undefined and base font family will be used.
+   */
+  --input-value-font-family: undefined;
+
+  /**
+   * Set the font size and family for all size of inputs. By default it's
    * undefined and size specific values defined below is used.
    */
   --input-font-size: undefined;

diff --git a/lib/components/SDropdownSectionFilter.vue b/lib/components/SDropdownSectionFilter.vue
@@ -115,6 +115,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   padding: 0 8px;
   width: 100%;
   font-size: 14px;
+  font-family: var(--input-value-font-family);
   line-height: 32px;
   background-color: var(--input-bg-color);
   transition: border-color 0.25s;

diff --git a/lib/components/SInputHMS.vue b/lib/components/SInputHMS.vue
@@ -308,7 +308,7 @@ function createRequiredTouched(): boolean[] {
 }
 
 .input {
-  font-family: var(--font-family-number);
+  font-family: var(--input-value-font-family, var(--font-family-number));
   line-height: 24px;
   background-color: transparent;
 

diff --git a/lib/components/SInputText.vue b/lib/components/SInputText.vue
@@ -393,6 +393,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   width: 100%;
   background-color: transparent;
   cursor: text;
+  font-family: var(--input-value-font-family);
 
   &.neutral:not(.hide) { color: var(--input-value-color); }
   &.info:not(.hide)    { color: var(--c-info-text); }

diff --git a/lib/components/SInputTextarea.vue b/lib/components/SInputTextarea.vue
@@ -147,6 +147,7 @@ function emitBlur(e: FocusEvent): void {
   border: 1px solid var(--input-border-color);
   border-radius: 6px;
   width: 100%;
+  font-family: var(--input-value-font-family);
   font-weight: 400;
   background-color: var(--input-bg-color);
   transition: border-color 0.25s, background-color 0.25s;

diff --git a/lib/components/SInputYMD.vue b/lib/components/SInputYMD.vue
@@ -302,6 +302,7 @@ function createRequiredTouched(): boolean[] {
 
 .input {
   line-height: 24px;
+  font-family: var(--input-value-font-family, var(--font-family-number));
   font-feature-settings: "tnum";
   background-color: transparent;