feat(ui-library): #939 changed Input Number -> Input Field Number

deven-org · Mar 12, 2024 · 9bcd7b3 · 9bcd7b3
1 parent 00d1d04
commit 9bcd7b3
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 135 deletions.
diff --git a/packages/figma-design-tokens/config/style-dictionary.config.cjs b/packages/figma-design-tokens/config/style-dictionary.config.cjs
@@ -24,9 +24,10 @@ const componentTypes = [
   'Icon',
   'IconDropdown',
   'InputIcon',
+  'InputFieldNumber',
+  'InputFieldText',
   'Loader',
   'RadioGroup',
-  'InputNumber',
   'Select',
   'Slider',
   'StepperButton',

diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
@@ -1956,9 +1956,9 @@
       "cmp.Menu.MenuSection.ItemStack.ItemSpacing": "b6771199011b83313f4ace1d81b9abc3b70a6ca7",
       "cmp.Menu.MenuSectionStack.ItemSpacing": "81665d21cce639c652a0a0911572c90efa41a439",
       "cmp.Menu.MenuSectionStack.Padding": "8a886a93006a5a897aab605948e6e64395f48434",
-      "cmp.InputNumber.InputField.TextWrapper.ItemSpacing.SM": "2b59fb6c009d492db7a30b8c57143f4cb5acb1c2",
-      "cmp.InputNumber.InputField.TextWrapper.ItemSpacing.MD": "cfb7c59ac4592fca85d9b3afcbae2c5181d7545b",
-      "cmp.InputNumber.InputField.TextWrapper.ItemSpacing.LG": "efd033e882fad4248eeafa6becdcd4b4983bc516",
+      "cmp.InputFieldNumber.InputField.TextWrapper.ItemSpacing.SM": "2b59fb6c009d492db7a30b8c57143f4cb5acb1c2",
+      "cmp.InputFieldNumber.InputField.TextWrapper.ItemSpacing.MD": "cfb7c59ac4592fca85d9b3afcbae2c5181d7545b",
+      "cmp.InputFieldNumber.InputField.TextWrapper.ItemSpacing.LG": "efd033e882fad4248eeafa6becdcd4b4983bc516",
       "cmp.Radio.Control.Container.Size.SM": "d1167e566bbb4dfadb1510b0ffc4e40727087492",
       "cmp.Radio.Control.Container.Size.MD": "a4029f2de77df6366d41d692923d0be71d6cda09",
       "cmp.Radio.Control.Container.Size.LG": "6180284b9e5b249726f8e9cf205febfefba604bc",

diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizes.json b/packages/figma-design-tokens/input/tokens/cmp/sizes.json
@@ -1317,7 +1317,7 @@
         }
       }
     },
-    "InputNumber": {
+    "InputFieldNumber": {
       "InputField": {
         "TextWrapper": {
           "ItemSpacing": {

diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -53,8 +53,8 @@
         </div>
 
         <div class="component">
-          <p>Input Number</p>
-          <blr-input-number
+          <p>Input Field Number</p>
+          <blr-input-field-number
             value="1000"
             size="md"
             steppervariant="vertical"
@@ -67,12 +67,12 @@
             haslabel="true"
             label="Label-text"
             labelappendix="(Appendix)"
-            inputnumberid="test-id"
+            inputfieldnumberid="test-id"
             theme="Light"
-            name="InputNumber"
+            name="InputFieldNumber"
             decimals="10"
             leadingzeros="3"
-          ></blr-input-number>
+          ></blr-input-field-number>
         </div>
 
         <div class="component">

diff --git a/packages/ui-library/src/components/form-caption-group/index.stories.ts b/packages/ui-library/src/components/form-caption-group/index.stories.ts
@@ -36,7 +36,7 @@ Technically both instances of the Form Caption are placed inside slots that are
 The Form Caption Group is intended to be used when creating new components. Currently, it is used like this in the following components:
         
 - [**Checkbox**](?path=/docs/components-checkbox--docs)
-- [**Input Number**](?path=/docs/components-input-number--docs)
+- [**Input Field Number**](?path=/docs/components-input-field-number--docs)
 - [**Radio**](?path=/docs/components-radio--docs)
 - [**Radio Group**](?path=/docs/components-radio-group--docs)
 - [**Select**](?path=/docs/components-select--docs)

diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -92,7 +92,7 @@ export default {
         The Form Label is intended to be used when creating new components. Currently, it is used like this in the following components:
         
         - [**Checkbox**](?path=/docs/components-checkbox--docs)
-        - [**Input Number**](?path=/docs/components-input-number--docs)
+        - [**Input Field Number**](?path=/docs/components-input-field-number--docs)
         - [**Select**](?path=/docs/components-select--docs)
         - [**Input Field Text**](?path=/docs/components-input-field-text--docs)
         - [**Text Area**](?path=/docs/components-text-area--docs)

diff --git a/packages/ui-library/src/components/icon/index.stories.ts b/packages/ui-library/src/components/icon/index.stories.ts
@@ -80,7 +80,8 @@ export default {
         - [**Input Field Text**](?path=/docs/components-input-field-text--docs)
         - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
         - [**Tab Bar**](?path=/docs/components-tabbar--docs)
-        - [**Input Number**](?path=/docs/components-input-number--docs)
+        - [**Icon Link**](?path=/docs/components-icon-link--docs)
+        - [**Input Field Number**](?path=/docs/components-input-field-number--docs)
         
         It is not intended to use the Icon directly when creating new applications.
         

diff --git a/.../src/components/input-number/index.css.ts → ...omponents/input-field-number/index.css.ts b/.../src/components/input-number/index.css.ts → ...omponents/input-field-number/index.css.ts
@@ -3,10 +3,10 @@ import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index
 
 export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
   const { inputfield, labelslot } = semanticTokens.sem.forms;
-  const { StepperButton, InputNumber } = componentTokens.cmp;
+  const { StepperButton, InputFieldNumber } = componentTokens.cmp;
 
   return typeSafeNestedCss`
-  .blr-input-number {
+  .blr-input-field-number {
     &.sm {
       & > .label-wrapper {
         display: flex;
@@ -58,15 +58,15 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
 
     .input-unit-container {
       &.sm {
-        gap: ${InputNumber.InputField.TextWrapper.ItemSpacing.SM};
+        gap: ${InputFieldNumber.InputField.TextWrapper.ItemSpacing.SM};
       }
 
       &.md {
-        gap: ${InputNumber.InputField.TextWrapper.ItemSpacing.MD};
+        gap: ${InputFieldNumber.InputField.TextWrapper.ItemSpacing.MD};
       }
 
       &.lg {
-        gap: ${InputNumber.InputField.TextWrapper.ItemSpacing.LG};
+        gap: ${InputFieldNumber.InputField.TextWrapper.ItemSpacing.LG};
       }
 
       .unit {