fix: update number input props

carbon-design-system · Dec 30, 2024 · baf5271 · baf5271
1 parent fc52341
commit baf5271
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 78 deletions.
diff --git a/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx b/packages/react/src/components/CardCodeEditor/CardCodeEditor.jsx
@@ -10,7 +10,7 @@ import Button from '../Button';
 import deprecate from '../../internal/deprecate';
 import CodeEditor from '../CodeEditor/CodeEditor';
 
-const { iotPrefix } = settings;
+const { iotPrefix, prefix } = settings;
 
 const propTypes = {
   ...ComposedModal.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
@@ -97,7 +97,7 @@ const CardCodeEditor = ({
   return (
     <ComposedModal
       data-testid={`${testId}--card-code-editor-modal`}
-      selectorPrimaryFocus=".cds--modal-header"
+      selectorPrimaryFocus={`.${prefix}--modal-header`}
       className={classnames(`${iotPrefix}--editor`, {
         [`${iotPrefix}--editor__expanded`]: isExpanded,
       })}

diff --git a/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx b/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx
@@ -34,7 +34,7 @@ import Button from '../../../Button';
 
 import ThresholdsFormItem from './ThresholdsFormItem';
 
-const { iotPrefix } = settings;
+const { iotPrefix, prefix } = settings;
 
 /* istanbul ignore next */
 const noop = () => {};
@@ -658,7 +658,7 @@ const DataSeriesFormItemModal = ({
       {showEditor && (
         <div className={`${baseClassName}--modal-wrapper`}>
           <ComposedModal
-            selectorPrimaryFocus=".cds--modal-header"
+            selectorPrimaryFocus={`.${prefix}--modal-header`}
             header={{
               label: editDataItem.dataItemId,
               title:

diff --git a/...ges/react/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.jsx b/...ges/react/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.jsx
@@ -273,11 +273,14 @@ const ThresholdsFormItem = ({
                     translateWithId={translateWithId}
                     invalid={false} // don't allow invalid state
                     value={threshold.value?.toString() || 0}
-                    onChange={({ imaginaryTarget }) => {
+                    onChange={(event, { value }) => {
                       const updatedThresholds = [...thresholds];
                       updatedThresholds[i] = {
                         ...updatedThresholds[i],
-                        value: Number(imaginaryTarget.value) || imaginaryTarget.value,
+                        value:
+                          Number(value ?? event.imaginaryTarget.value) ||
+                          value ||
+                          event.imaginaryTarget.value,
                       };
                       onChange(updatedThresholds.map((item) => omit(item, 'id')));
                       setThresholds(updatedThresholds);

diff --git a/...ts/CardEditor/CardEditForm/CardEditFormItems/ValueCardFormItems/ValueCardFormSettings.jsx b/...ts/CardEditor/CardEditForm/CardEditFormItems/ValueCardFormItems/ValueCardFormSettings.jsx
@@ -69,8 +69,8 @@ const ValueCardFormSettings = ({ cardConfig, onChange, i18n }) => {
           light
           label={mergedI18n.fontSize}
           value={fontSize || DEFAULT_FONT_SIZE}
-          onChange={(event) => {
-            const parsedValue = Number(event.imaginaryTarget.value);
+          onChange={(event, { value }) => {
+            const parsedValue = Number(value ?? event.imaginaryTarget.value);
             if (isNumberValidForMinMax(parsedValue, MIN_FONT_SIZE, MAX_FONT_SIZE)) {
               onChange({
                 ...cardConfig,

diff --git a/...ages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx b/...ages/react/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx
@@ -9,7 +9,7 @@ import {
   Laptop,
   Screen,
 } from '@carbon/react/icons';
-import { FileUploaderButton, Tooltip, ContentSwitcher, TextInput } from '@carbon/react';
+import { FileUploaderButton, ContentSwitcher, TextInput } from '@carbon/react';
 import { isEmpty } from 'lodash-es';
 
 import { settings } from '../../../constants/Settings';
@@ -150,53 +150,58 @@ const DashboardEditorHeader = ({
               renderIcon={Maximize}
               index={0}
               testId={`${testId}-fit-to-screen-switch`}
+              tooltipPosition="bottom"
             />
             <IconSwitch
               name="large"
               text={mergedI18n.headerLargeButton}
               renderIcon={Screen}
               index={1}
               testId={`${testId}-large-switch`}
+              tooltipPosition="bottom"
             />
             <IconSwitch
               name="medium"
               text={mergedI18n.headerMediumButton}
               renderIcon={Laptop}
               index={2}
               testId={`${testId}-medium-switch`}
+              tooltipPosition="bottom"
             />
             <IconSwitch
               name="small"
               text={mergedI18n.headerSmallButton}
               renderIcon={Tablet}
               index={3}
               testId={`${testId}-small-switch`}
+              tooltipPosition="bottom"
             />
           </ContentSwitcher>
         )}
 
-        {
-          // FileUploaderButton isn't a true button so extra styling is needed to make it look like a iconOnly button
-          onImport && (
-            <Tooltip
-              align="center"
-              direction="bottom"
-              tooltipText={mergedI18n.headerImportButton}
-              className={`${baseClassName}--bottom__import`}
-            >
-              <FileUploaderButton
-                buttonKind="ghost"
+        {onImport && (
+          <FileUploaderButton
+            buttonKind="ghost"
+            size="md"
+            hasIconOnly
+            labelText={
+              <Button
+                kind="ghost"
                 size="md"
-                labelText={<DocumentImport fill="#161616" />}
-                onChange={onImport}
-                disableLabelChanges
-                accepts={['.json']}
-                multiple={false}
-                data-testid={`${testId}-file-uploader-button`}
+                iconDescription={mergedI18n.headerImportButton}
+                tooltipPosition="bottom"
+                tooltipAlignment="center"
+                hasIconOnly
+                renderIcon={DocumentImport}
               />
-            </Tooltip>
-          )
-        }
+            }
+            onChange={onImport}
+            disableLabelChanges
+            accepts={['.json']}
+            multiple={false}
+            data-testid={`${testId}-file-uploader-button`}
+          />
+        )}
         {onExport && (
           <Button
             kind="ghost"
@@ -207,8 +212,7 @@ const DashboardEditorHeader = ({
             hasIconOnly
             renderIcon={DocumentExport}
             onClick={() => onExport(dashboardJson)}
-            // TODO: pass testId in v3 to override defaults
-            // testId={`${testId}-export-button`}
+            data-testid={`${testId}-export-button`}
           />
         )}
         {onDelete && (
@@ -221,17 +225,15 @@ const DashboardEditorHeader = ({
             hasIconOnly
             renderIcon={TrashCan}
             onClick={onDelete}
-            // TODO: pass testId in v3 to override defaults
-            // testId={`${testId}-delete-button`}
+            data-testid={`${testId}-delete-button`}
           />
         )}
         {onCancel && (
           <Button
             kind="secondary"
             size="md"
             onClick={onCancel}
-            // TODO: pass testId in v3 to override defaults
-            // testId={`${testId}-cancel-button`}
+            data-testid={`${testId}-cancel-button`}
           >
             {mergedI18n.headerCancelButton}
           </Button>
@@ -242,8 +244,7 @@ const DashboardEditorHeader = ({
             disabled={isSubmitDisabled}
             onClick={() => onSubmit(dashboardJson)}
             loading={isSubmitLoading}
-            // TODO: pass testId in v3 to override defaults
-            // testId={`${testId}-submit-button`}
+            data-testid={`${testId}-submit-button`}
           >
             {mergedI18n.headerSubmitButton}
           </Button>

diff --git a/packages/react/src/components/DashboardEditor/_dashboard-editor.scss b/packages/react/src/components/DashboardEditor/_dashboard-editor.scss
@@ -41,16 +41,7 @@
       height: calc(#{$spacing-07} + #{$spacing-02});
       display: flex;
       align-items: center;
-      // FileUploaderButton isn't a true button so extra styling is needed to make it look like a iconOnly button
-      &__import.#{$prefix}--tooltip__trigger {
-        // have to force the span containing the svg down to be aligned with other iconOnly buttons
-        span {
-          padding-top: 3px;
-        }
-        svg {
-          fill: $icon-primary;
-        }
-      }
+
 
       &__switcher {
         margin-right: $spacing-05;

diff --git a/...c/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx b/...c/components/HotspotEditorModal/DynamicHotspotSourcePicker/DynamicHotspotSourcePicker.jsx
@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Erase } from '@carbon/react/icons';
 import classnames from 'classnames';
+import { IconButton } from '@carbon/react';
 
 import { settings } from '../../../constants/Settings';
 import { Dropdown } from '../../Dropdown';
-import Button from '../../Button/Button';
 import deprecate from '../../../internal/deprecate';
 
 const { iotPrefix } = settings;
@@ -112,19 +112,17 @@ const DynamicHotspotSourcePicker = ({
           onYValueChange(change.selectedItem.dataSourceId);
         }}
       />
-      <Button
-        testId={`${testID || testId}-clear-dropdown`}
+      <IconButton
+        data-testid={`${testID || testId}-clear-dropdown`}
         className={classnames(`${classname}__clear-button`, {
           [`${classname}__clear-button--invisible`]: !selectedSourceIdX || !selectedSourceIdY,
         })}
         kind="ghost"
-        size="sm"
-        renderIcon={(props) => <Erase size={16} {...props} />}
-        iconDescription={clearIconDescription}
-        tooltipPosition="top"
-        tooltipAlignment="end"
+        size="md"
+        renderIcon={Erase}
+        label={clearIconDescription}
+        autoAlign
         onClick={onClear}
-        hasIconOnly
       />
     </div>
   );

diff --git a/packages/react/src/components/HotspotEditorModal/HotspotEditorModal.jsx b/packages/react/src/components/HotspotEditorModal/HotspotEditorModal.jsx
@@ -34,7 +34,7 @@ import HotspotEditorDataSourceTab from './HotspotEditorDataSourceTab/HotspotEdit
 import { hotspotTypes, useHotspotEditorState } from './hooks/hotspotStateHook';
 import DynamicHotspotSourcePicker from './DynamicHotspotSourcePicker/DynamicHotspotSourcePicker';
 
-const { iotPrefix } = settings;
+const { iotPrefix, prefix } = settings;
 
 /* istanbul ignore next */
 const noop = () => {};
@@ -599,7 +599,7 @@ const HotspotEditorModal = ({
   return (
     <ComposedModal
       data-testid={`${testId}--hotspot-editor-modal`}
-      selectorPrimaryFocus=".cds--modal-header"
+      selectorPrimaryFocus={`.${prefix}--modal-header`}
       className={`${iotPrefix}--hotspot-editor-modal`}
       header={{
         label,

diff --git a/packages/react/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx b/packages/react/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { merge } from 'lodash-es';
-import { NumberInput } from '@carbon/react';
+import { NumberInput, IconSwitch } from '@carbon/react';
 import {
   TrashCan,
   InformationFilled,
@@ -11,7 +11,6 @@ import {
 } from '@carbon/react/icons';
 
 import { settings } from '../../../constants/Settings';
-import IconSwitch from '../../IconSwitch/IconSwitch';
 import ColorDropdown from '../../ColorDropdown/ColorDropdown';
 import Button from '../../Button/Button';
 import { isNumberValidForMinMax } from '../../../utils/componentUtilityFunctions';
@@ -233,18 +232,19 @@ const HotspotTextStyleTab = ({
                 data-testid="hotspot-bold"
                 selected={bold}
                 text={boldLabelText}
-                renderIcon={() => <TextBold size="16" />}
+                renderIcon={TextBold}
                 index={0}
                 light={light}
               />
+
               <IconSwitch
                 disabled={hasNonEditableContent}
                 name="italic"
                 onClick={() => onChange({ italic: !italic })}
                 data-testid="hotspot-italic"
                 selected={italic}
                 text={italicLabelText}
-                renderIcon={() => <TextItalic size="16" />}
+                renderIcon={TextItalic}
                 index={1}
                 light={light}
               />
@@ -255,7 +255,7 @@ const HotspotTextStyleTab = ({
                 data-testid="hotspot-underline"
                 selected={underline}
                 text={underlineLabelText}
-                renderIcon={() => <TextUnderline size="16" />}
+                renderIcon={TextUnderline}
                 index={2}
                 light={light}
               />
@@ -287,8 +287,8 @@ const HotspotTextStyleTab = ({
                 step={1}
                 label={fontSizeLabelText}
                 invalidText={fontSizeInvalidText}
-                onChange={(event) => {
-                  const parsedValue = Number(event.imaginaryTarget.value);
+                onChange={(event, { value }) => {
+                  const parsedValue = Number(value ?? event.imaginaryTarget.value);
                   if (isNumberValidForMinMax(parsedValue, minFontSize, maxFontSize)) {
                     onChange({
                       fontSize: parsedValue,
@@ -324,8 +324,8 @@ const HotspotTextStyleTab = ({
                 step={1}
                 light={light}
                 invalidText={fillOpacityInvalidText}
-                onChange={(event) => {
-                  const parsedValue = Number(event.imaginaryTarget.value);
+                onChange={(event, { value }) => {
+                  const parsedValue = Number(value ?? event.imaginaryTarget.value);
                   if (isNumberValidForMinMax(parsedValue, minOpacity, maxOpacity)) {
                     onChange({
                       backgroundOpacity: parsedValue,
@@ -359,8 +359,8 @@ const HotspotTextStyleTab = ({
                 step={1}
                 light={light}
                 invalidText={borderWidthInvalidText}
-                onChange={(event) => {
-                  const parsedValue = Number(event.imaginaryTarget.value);
+                onChange={(event, { value }) => {
+                  const parsedValue = Number(value ?? event.imaginaryTarget.value);
                   if (isNumberValidForMinMax(parsedValue, minBorderWidth, maxBorderWidth)) {
                     onChange({
                       borderWidth: parsedValue,
@@ -373,7 +373,7 @@ const HotspotTextStyleTab = ({
           <div className={`${iotPrefix}--hotspot-text-style-tab__delete-button-container`}>
             <Button
               kind="ghost"
-              renderIcon={(props) => <TrashCan size={32} {...props} />}
+              renderIcon={TrashCan}
               iconDescription={deleteButtonIconDescription}
               onClick={onDelete}
             >

diff --git a/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx b/packages/react/src/components/ImageGalleryModal/ImageGalleryModal.jsx
@@ -16,7 +16,7 @@ import ImageTile from './ImageTile';
 const GRID = 'grid';
 const LIST = 'list';
 
-const { iotPrefix } = settings;
+const { iotPrefix, prefix } = settings;
 
 export const ImagePropTypes = PropTypes.arrayOf(
   PropTypes.shape({
@@ -173,7 +173,7 @@ const ImageGalleryModal = ({
         />
       ) : null}
       <ComposedModal
-        selectorPrimaryFocus=".cds--modal-header"
+        selectorPrimaryFocus={`.${prefix}--modal-header`}
         type="normal"
         className={classnames(className, baseClass)}
         footer={{

diff --git a/...src/components/List/HierarchyList/HierarchyListReorderModal/HierarchyListReorderModal.jsx b/...src/components/List/HierarchyList/HierarchyListReorderModal/HierarchyListReorderModal.jsx
@@ -8,7 +8,7 @@ import { settings } from '../../../../constants/Settings';
 
 import RadioButtonGroup from './HierarchyReorderModalRadioGroup';
 
-const { iotPrefix } = settings;
+const { iotPrefix, prefix } = settings;
 
 const propTypes = {
   /** ListItems to be displayed */
@@ -168,7 +168,7 @@ const HierarchyListReorderModal = ({
 
   return (
     <ComposedModal
-      selectorPrimaryFocus=".cds--modal-header"
+      selectorPrimaryFocus={`.${prefix}--modal-header`}
       className={`${iotPrefix}--hierarchy-list-bulk-modal`}
       open={open}
       header={{