#121: allow decimal on size inputs (#128)

* feat: allow decimal on size inputs

* try to fix failing test

.github/workflows/ci.yml

@@ -15,7 +15,12 @@ jobs:
         node-version: '18'
     - name: Install Dependencies
       run: yarn install --frozen-lockfile
+    - name: Lint
+      run: yarn lint
     - name: Test
-      run: yarn percy exec -- ember test
+      run: yarn test:ember
+    - name: Visual Tests
+      if: success()
+      run: yarn percy exec -- yarn test:ember:visual
       env:
         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

app/components/settings-form/handle.hbs

@@ -1,102 +1,103 @@
-
 <calcite-label>
-  {{t "text_settings.handleSettings.label"}}
+  {{t 'text_settings.handleSettings.label'}}
   <calcite-radio-button-group
-    name="handle-type"
-    layout="horizontal"
+    name='handle-type'
+    layout='horizontal'
     data-test-handle-type-item
-    {{on "calciteRadioButtonGroupChange" this.updateHandleType}}
+    {{on 'calciteRadioButtonGroupChange' this.updateHandleType}}
   >
     {{#each this.handleTypes as |type|}}
-      <calcite-label layout="inline">
-        <calcite-radio-button value={{type}} data-test-value={{type}} checked={{eq @model.handleSettings.type type}} />
-        {{t (concat "text_settings.handleSettings.type." type)}}
+      <calcite-label layout='inline'>
+        <calcite-radio-button
+          value={{type}}
+          data-test-value={{type}}
+          checked={{eq @model.handleSettings.type type}}
+        />
+        {{t (concat 'text_settings.handleSettings.type.' type)}}
       </calcite-label>
     {{/each}}
   </calcite-radio-button-group>
 </calcite-label>
 
-
 {{#if this.showHandleSettings}}
 
   <calcite-label>
-    {{t "text_settings.handleSettings.position"}}
+    {{t 'text_settings.handleSettings.position'}}
     <calcite-radio-button-group
-      name="handle-position"
-      layout="horizontal"
+      name='handle-position'
+      layout='horizontal'
       data-test-handle-position
-      {{on "calciteRadioButtonGroupChange" this.updateHandlePosition}}
+      {{on 'calciteRadioButtonGroupChange' this.updateHandlePosition}}
     >
       {{#each this.handlePosition as |pos|}}
-        <calcite-label layout="inline">
-          <calcite-radio-button value={{pos}} data-test-value={{pos}} checked={{eq @model.handleSettings.position pos}} />
-          {{t (concat "directions." pos)}}
+        <calcite-label layout='inline'>
+          <calcite-radio-button
+            value={{pos}}
+            data-test-value={{pos}}
+            checked={{eq @model.handleSettings.position pos}}
+          />
+          {{t (concat 'directions.' pos)}}
         </calcite-label>
       {{/each}}
     </calcite-radio-button-group>
   </calcite-label>
 
-
   <calcite-label>
-    {{t "text_settings.handleSettings.size"}}
+    {{t 'text_settings.handleSettings.size'}}
     <calcite-input-number
-      placeholder={{t "text_settings.handleSettings.size"}}
-      suffix-text={{t "mm_unit"}}
+      placeholder={{t 'text_settings.handleSettings.size'}}
+      suffix-text={{t 'mm_unit'}}
       value={{@model.handleSettings.size}}
-      {{on "calciteInputNumberChange" (fn this.setHandleSettingsInt 'size')}}
-      step="1"
-      number-button-type="horizontal"
-      icon="measure"
-      integer
+      {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'size')}}
+      step='1'
+      number-button-type='horizontal'
+      icon='measure'
       data-test-settings-handle-size
     />
   </calcite-label>
 
   {{#if this.showHandleSize2}}
     <calcite-label>
-      {{t "text_settings.handleSettings.size2"}}
+      {{t 'text_settings.handleSettings.size2'}}
       <calcite-input-number
-        placeholder={{t "text_settings.handleSettings.size2"}}
-        suffix-text={{t "mm_unit"}}
+        placeholder={{t 'text_settings.handleSettings.size2'}}
+        suffix-text={{t 'mm_unit'}}
         value={{@model.handleSettings.size2}}
-        {{on "calciteInputNumberChange" (fn this.setHandleSettingsInt 'size2')}}
-        step="1"
-        number-button-type="horizontal"
-        icon="dimensions"
-        integer
+        {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'size2')}}
+        step='1'
+        number-button-type='horizontal'
+        icon='dimensions'
         data-test-settings-handle-size2
       />
     </calcite-label>
   {{/if}}
 
-
   <calcite-label>
-    {{t "text_settings.handleSettings.offsetX"}}
+    {{t 'text_settings.handleSettings.offsetX'}}
     <calcite-input-number
-      placeholder={{t "text_settings.handleSettings.offsetX"}}
-      suffix-text={{t "mm_unit"}}
+      placeholder={{t 'text_settings.handleSettings.offsetX'}}
+      suffix-text={{t 'mm_unit'}}
       value={{@model.handleSettings.offsetX}}
-      {{on "calciteInputNumberChange" (fn this.setHandleSettingsInt 'offsetX')}}
-      step="1"
-      number-button-type="horizontal"
-      icon="center-horizontal"
-      integer
+      {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'offsetX')}}
+      step='1'
+      number-button-type='horizontal'
+      icon='center-horizontal'
       data-test-settings-handle-offsetX
     />
   </calcite-label>
-
-  <calcite-label>
-    {{t "text_settings.handleSettings.offsetY"}}
-    <calcite-input-number
-      placeholder={{t "text_settings.handleSettings.offsetY"}}
-      suffix-text={{t "mm_unit"}}
-      value={{@model.handleSettings.offsetY}}
-      {{on "calciteInputNumberChange" (fn this.setHandleSettingsInt 'offsetY')}}
-      step="1"
-      number-button-type="horizontal"
-      icon="center-vertical"
-      integer
-      data-test-settings-handle-offsetY
-    />
-  </calcite-label>
+  {{#if this.showHandleOffsetY}}
+    <calcite-label>
+      {{t 'text_settings.handleSettings.offsetY'}}
+      <calcite-input-number
+        placeholder={{t 'text_settings.handleSettings.offsetY'}}
+        suffix-text={{t 'mm_unit'}}
+        value={{@model.handleSettings.offsetY}}
+        {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'offsetY')}}
+        step='1'
+        number-button-type='horizontal'
+        icon='center-vertical'
+        data-test-settings-handle-offsetY
+      />
+    </calcite-label>
+  {{/if}}
 {{/if}}

app/components/settings-form/handle.ts

@@ -26,6 +26,10 @@ export default class AdvancedSettingsFormTextSettings extends Component<Advanced
     return this.args.model.handleSettings.type === 'handle';
   }
 
+  get showHandleOffsetY() {
+    return this.args.model.handleSettings.type === 'hole';
+  }
+
   @action
   updateHandleType(e: CustomEvent) {
     const value = (e.target as CalciteRadioButtonGroup).selectedItem.value as
@@ -56,8 +60,8 @@ export default class AdvancedSettingsFormTextSettings extends Component<Advanced
   }
 
   @action
-  setHandleSettingsInt(props: 'size' | 'size2' | 'offsetX' | 'offsetY', e: CustomEvent) {
-    const v = parseInt((e.target as CalciteInputNumber).value, 10);
+  setHandleSettingsValue(props: 'size' | 'size2' | 'offsetX' | 'offsetY', e: CustomEvent) {
+    const v = parseFloat((e.target as CalciteInputNumber).value);
     this.args.model.handleSettings[props] = isNaN(v) ? 0 : v;
   }
 }

app/components/settings-form/support.hbs

@@ -1,76 +1,76 @@
 <calcite-label>
-  {{t "text_settings.supportHeight"}}
+  {{t 'text_settings.supportHeight'}}
   <calcite-input-number
-    placeholder={{t "text_settings.supportHeight"}}
-    suffix-text={{t "mm_unit"}}
+    placeholder={{t 'text_settings.supportHeight'}}
+    suffix-text={{t 'mm_unit'}}
     value={{@model.supportHeight}}
-    {{on "calciteInputNumberChange" (fn this.setInt 'supportHeight')}}
-    step="1"
-    number-button-type="horizontal"
-    icon="antenna-height"
-    integer
+    {{on 'calciteInputNumberChange' (fn this.setNumber 'supportHeight')}}
+    step='1'
+    number-button-type='horizontal'
+    icon='antenna-height'
     data-test-settings-supportHeight
   />
 </calcite-label>
 
 <calcite-label>
-  {{t "text_settings.supportBorderRadius"}}
+  {{t 'text_settings.supportBorderRadius'}}
   <calcite-input-number
-    placeholder={{t "text_settings.supportBorderRadius"}}
-    suffix-text={{t "mm_unit"}}
+    placeholder={{t 'text_settings.supportBorderRadius'}}
+    suffix-text={{t 'mm_unit'}}
     value={{@model.supportBorderRadius}}
-    {{on "calciteInputNumberChange" (fn this.setInt 'supportBorderRadius')}}
-    step="1"
-    number-button-type="horizontal"
-    icon="border-radius-rounded"
-    integer
+    {{on 'calciteInputNumberChange' (fn this.setNumber 'supportBorderRadius')}}
+    step='1'
+    number-button-type='horizontal'
+    icon='border-radius-rounded'
     data-test-settings-supportBorderRadius
   />
 </calcite-label>
 
 {{#if this.advancedSupportPadding}}
   <calcite-label>
-    {{t "text_settings.supportPadding"}}
+    {{t 'text_settings.supportPadding'}}
   </calcite-label>
 
   {{#each this.supportPosition as |pos|}}
-    <calcite-label layout="inline-space-between">
-      {{t (concat "directions." pos)}}
+    <calcite-label layout='inline-space-between'>
+      {{t (concat 'directions.' pos)}}
       <calcite-input-number
-        class="w-70"
-        placeholder={{concat (t "text_settings.supportPadding") " - " (t (concat "directions." pos))}}
-        suffix-text={{t "mm_unit"}}
+        class='w-70'
+        placeholder={{concat
+          (t 'text_settings.supportPadding')
+          ' - '
+          (t (concat 'directions.' pos))
+        }}
+        suffix-text={{t 'mm_unit'}}
         value={{get @model.supportPadding pos}}
-        {{on "calciteInputNumberChange" (fn this.setSupportPaddingDir pos)}}
-        step="1"
+        {{on 'calciteInputNumberChange' (fn this.setSupportPaddingDir pos)}}
+        step='1'
         icon={{get this.supportPositionIcon pos}}
-        integer
         data-test-settings-supportPadding={{pos}}
       />
     </calcite-label>
   {{/each}}
 {{else}}
   <calcite-label>
-    {{t "text_settings.supportPadding"}}
+    {{t 'text_settings.supportPadding'}}
     <calcite-input-number
-      placeholder={{t "text_settings.supportPadding"}}
-      suffix-text={{t "mm_unit"}}
+      placeholder={{t 'text_settings.supportPadding'}}
+      suffix-text={{t 'mm_unit'}}
       value={{this.supportPadding}}
-      {{on "calciteInputNumberChange" this.setSupportPadding}}
-      step="1"
-      number-button-type="horizontal"
-      icon="dimensions-unit"
-      integer
-      data-test-settings-supportPadding="basic"
+      {{on 'calciteInputNumberChange' this.setSupportPadding}}
+      step='1'
+      number-button-type='horizontal'
+      icon='dimensions-unit'
+      data-test-settings-supportPadding='basic'
     />
   </calcite-label>
 {{/if}}
 
-<calcite-label layout="inline">
-  {{t "text_settings.advancedSupportPadding"}}
+<calcite-label layout='inline'>
+  {{t 'text_settings.advancedSupportPadding'}}
   <calcite-switch
     checked={{this.advancedSupportPadding}}
     data-test-advanced-support-padding
-    {{on "calciteSwitchChange" this.toggleAdvancedSupportPadding}}
+    {{on 'calciteSwitchChange' this.toggleAdvancedSupportPadding}}
   />
 </calcite-label>

app/components/settings-form/support.ts

@@ -45,20 +45,20 @@ export default class SupportFormTextSettings extends Component<SupportFormTextSe
   }
 
   @action
-  setInt(props: 'supportHeight' | 'supportBorderRadius', e: CustomEvent) {
-    const v = parseInt((e.target as CalciteInputNumber).value, 10);
+  setNumber(props: 'supportHeight' | 'supportBorderRadius', e: CustomEvent) {
+    const v = parseFloat((e.target as CalciteInputNumber).value);
     this.args.model[props] = isNaN(v) ? undefined : v;
   }
 
   @action
   setSupportPadding(e: CustomEvent) {
-    const v = parseInt((e.target as CalciteInputNumber).value, 10);
+    const v = parseFloat((e.target as CalciteInputNumber).value);
     this.supportPadding = v;
   }
 
   @action
   setSupportPaddingDir(props: 'top' | 'bottom' | 'right' | 'left', e: CustomEvent) {
-    const v = parseInt((e.target as CalciteInputNumber).value, 10);
+    const v = parseFloat((e.target as CalciteInputNumber).value);
     this.args.model.supportPadding[props] = isNaN(v) ? 0 : v;
   }