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

deven-org · Mar 1, 2024 · 74ed3f8 · 74ed3f8
1 parent a098238
commit 74ed3f8
Show file tree

Hide file tree

Showing 16 changed files with 136 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
@@ -81,7 +81,7 @@ export default {
         - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
         - [**Tab Bar**](?path=/docs/components-tabbar--docs)
         - [**Icon Link**](?path=/docs/components-icon-link--docs)
-        - [**Input Number**](?path=/docs/components-input-number--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 {