Merge pull request #2996 from pie-framework/fix/PIE-134

fix(number-line): adjust number input container PIE-134

Author: CarlaCostea

packages/number-line/configure/src/domain.jsx

@@ -1,4 +1,4 @@
-import { MiniField } from './number-text-field';
+import NumberTextField from './number-text-field';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { styled } from '@mui/material/styles';
@@ -15,6 +15,10 @@ const FlexRow = styled('div')({
   display: 'flex',
   alignItems: 'center',
   gap: '10px',
+
+  '.MuiInputBase-input': {
+    padding: '16.5px 14px !important',
+  },
 });
 
 const sort = (domain) => {
@@ -51,11 +55,11 @@ export class Domain extends React.Component {
       <DisplayFlex>
         <FlexRow>
           <label>Min Value</label>
-          <MiniField min={-100000} max={99999} value={domain.min} name={DOMAIN_BEGIN} onChange={this.changeMin} />
+          <NumberTextField min={-100000} max={99999} value={domain.min} name={DOMAIN_BEGIN} onChange={this.changeMin} />
         </FlexRow>
         <FlexRow>
           <label>Max Value</label>
-          <MiniField min={-99999} max={100000} value={domain.max} name={DOMAIN_END} onChange={this.changeMax} />
+          <NumberTextField min={-99999} max={100000} value={domain.max} name={DOMAIN_END} onChange={this.changeMax} />
         </FlexRow>
       </DisplayFlex>
     );

packages/number-line/configure/src/main.jsx

@@ -37,9 +37,11 @@ let majorValues = {};
 
 const StyledNumberTextField = styled(NumberTextField)({
   width: '150px',
-});
-
 
+  '.MuiInputBase-input': {
+    padding: '16.5px 14px',
+  },
+});
 
 const Row = styled('div')(({ theme }) => ({
   display: 'flex',
@@ -258,9 +260,9 @@ export class Main extends React.Component {
         ticks.minor < 1
           ? math.number(math.ceil(minorLimits.min))
           : ticks.minor >= math.number(math.ceil(minorLimits.min)) &&
-            ticks.minor <= math.number(math.floor(minorLimits.max))
-          ? ticks.minor
-          : math.number(math.ceil(minorLimits.min));
+              ticks.minor <= math.number(math.floor(minorLimits.max))
+            ? ticks.minor
+            : math.number(math.ceil(minorLimits.min));
       ticks.integerTick = ticks.minor;
       minorValues = { decimal: [], fraction: [] };
       ticks.fractionTick = '0';