ConditionalFormatOptions refactor to use ColorPickerInput (#1905)

cnathe · web-flow · commit 3e80ab80d885 · 2025-12-15T10:41:12.000-06:00
### version 7.3.2
*Released*: 15 December 2025
- ConditionalFormatOptions refactor to use ColorPickerInput
diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
@@ -1,10 +1,15 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.3.2
+*Released*: 15 December 2025
+- ConditionalFormatOptions refactor to use ColorPickerInput
+
 ### version 7.3.1
 *Released*: 13 December 2025
 - Remove LSID column from provisioned sample tables
 - Update `getUpdatedData()` utility method to only check for primary keys actually used in data iteration.
+- Fix for LKS sample type designer issue with isValid check when metricUnit is not required
 
 ### version 7.3.0
 *Released*: 10 December 2025
diff --git a/packages/components/src/internal/components/domainproperties/validation/ConditionalFormatOptions.test.tsx b/packages/components/src/internal/components/domainproperties/validation/ConditionalFormatOptions.test.tsx
@@ -62,7 +62,7 @@ describe('ConditionalFormatOptions', () => {
         );
         expect(strike.item(0).getAttribute('checked')).toBeNull();
 
-        const colorPreviews = document.querySelectorAll('.domain-color-preview');
+        const colorPreviews = document.querySelectorAll('.color-picker__chip');
         expect(colorPreviews.length).toEqual(2);
         expect(colorPreviews.item(0).getAttribute('style')).toEqual('background-color: rgb(255, 99, 71);');
         expect(colorPreviews.item(1).getAttribute('style')).toEqual('background-color: rgb(0, 0, 128);');
diff --git a/packages/components/src/internal/components/domainproperties/validation/ConditionalFormatOptions.tsx b/packages/components/src/internal/components/domainproperties/validation/ConditionalFormatOptions.tsx
@@ -1,6 +1,4 @@
-import classNames from 'classnames';
 import React, { PureComponent, ReactNode } from 'react';
-import { CompactPicker } from 'react-color';
 
 import { DomainDesignerCheckbox } from '../DomainDesignerCheckbox';
 
@@ -22,6 +20,7 @@ import { LabelHelpTip } from '../../base/LabelHelpTip';
 
 import { Filters } from './Filters';
 import { ValidatorModal } from './ValidatorModal';
+import { ColorPickerInput } from '../../forms/input/ColorPickerInput';
 
 interface ConditionalFormatOptionsProps {
     dataType: PropDescType;
@@ -36,21 +35,7 @@ interface ConditionalFormatOptionsProps {
     validatorIndex: number;
 }
 
-interface ConditionalFormatState {
-    showFillColor: boolean;
-    showTextColor: boolean;
-}
-
-export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOptionsProps, ConditionalFormatState> {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showTextColor: false,
-            showFillColor: false,
-        };
-    }
-
+export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOptionsProps> {
     static isValid = (validator: PropertyValidator): boolean => {
         return Filters.isValid(validator.get('formatFilter'), DOMAIN_CONDITIONAL_FORMAT_PREFIX);
     };
@@ -91,7 +76,7 @@ export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOpt
 
     firstFilterTooltip = (): ReactNode => {
         return (
-            <LabelHelpTip title="First Condition" required>
+            <LabelHelpTip required title="First Condition">
                 Add a condition to this format rule that will be tested against the value for this field.
             </LabelHelpTip>
         );
@@ -104,9 +89,9 @@ export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOpt
             <div className="row">
                 <div className="col-xs-12 domain-validation-display-checkbox-row">
                     <DomainDesignerCheckbox
+                        checked={value}
                         id={createFormInputId(name, domainIndex, validatorIndex)}
                         name={createFormInputName(name)}
-                        checked={value}
                         onChange={this.onFieldChange}
                     >
                         {label}
@@ -116,68 +101,40 @@ export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOpt
         );
     };
 
-    onColorShow = (evt): void => {
-        const { showTextColor, showFillColor } = this.state;
-        let name = getNameFromId(evt.target.id);
-
-        // If click on caret icon
-        if (!name) {
-            name = getNameFromId(evt.target.parentElement.parentElement.id);
-        }
-
-        // Strange little border between icon and button
-        if (!name) {
-            name = getNameFromId(evt.target.parentElement.id);
-        }
-
-        if (name === DOMAIN_CONDITION_FORMAT_TEXT_COLOR) {
-            this.setState(() => ({ showTextColor: !showTextColor, showFillColor: false }));
-        }
-
-        if (name === DOMAIN_CONDITION_FORMAT_BACKGROUND_COLOR) {
-            this.setState(() => ({ showFillColor: !showFillColor, showTextColor: false }));
-        }
-    };
-
-    onColorChange = (color): void => {
+    onColorChange = (name: string, hexValue: string): void => {
         const { onChange, validator, validatorIndex } = this.props;
-        const { showTextColor } = this.state;
-        const name = showTextColor ? DOMAIN_CONDITION_FORMAT_TEXT_COLOR : DOMAIN_CONDITION_FORMAT_BACKGROUND_COLOR;
-        onChange(validator.set(name, color.hex.substring(1)), validatorIndex);
+        onChange(validator.set(name, hexValue.substring(1)), validatorIndex);
     };
 
     renderColorPickers = (): ReactNode => {
         const { validator, validatorIndex } = this.props;
-        const { showTextColor, showFillColor } = this.state;
 
         const textColor = validator.textColor ? '#' + validator.textColor : 'black';
         const fillColor = validator.backgroundColor ? '#' + validator.backgroundColor : 'white';
 
         return (
             <div className="row domain-validator-color-row">
-                <div className="col-xs-4">
-                    {this.getColorPickerButton(
-                        DOMAIN_CONDITION_FORMAT_TEXT_COLOR,
-                        'Text Color',
-                        textColor,
-                        showTextColor
-                    )}
+                <div className="col-xs-5">
+                    <ColorPickerInput
+                        name={DOMAIN_CONDITION_FORMAT_TEXT_COLOR}
+                        onChange={this.onColorChange}
+                        text="Text Color"
+                        value={textColor}
+                    />
                 </div>
                 <div className="col-xs-4">
-                    {this.getColorPickerButton(
-                        DOMAIN_CONDITION_FORMAT_BACKGROUND_COLOR,
-                        'Fill Color',
-                        fillColor,
-                        showFillColor
-                    )}
+                    <ColorPickerInput
+                        name={DOMAIN_CONDITION_FORMAT_BACKGROUND_COLOR}
+                        onChange={this.onColorChange}
+                        text="Fill Color"
+                        value={fillColor}
+                    />
                 </div>
-                <div className="col-xs-1" />
                 <div className="col-xs-3">
                     <input
                         className="form-control"
-                        type="text"
-                        id={'domain-validator-preview-' + validatorIndex}
                         defaultValue="Preview Text"
+                        id={'domain-validator-preview-' + validatorIndex}
                         style={{
                             fontSize: '12px',
                             width: '100px',
@@ -187,47 +144,13 @@ export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOpt
                             fontStyle: validator.italic ? 'italic' : 'normal',
                             textDecoration: validator.strikethrough ? 'line-through' : '',
                         }}
+                        type="text"
                     />
                 </div>
             </div>
         );
     };
 
-    getColorPickerButton = (name: string, label: string, color: string, showColorPicker: boolean): ReactNode => {
-        const { validatorIndex, domainIndex } = this.props;
-        const iconClassName = classNames('domain-color-caret', 'fa', 'fa-lg', {
-            'fa-caret-up': showColorPicker,
-            'fa-caret-down': !showColorPicker,
-        });
-
-        return (
-            <div style={{ width: '100%' }}>
-                <button
-                    className="domain-color-picker-btn btn btn-default"
-                    id={createFormInputId(name, domainIndex, validatorIndex)}
-                    key={createFormInputId(name, domainIndex, validatorIndex)}
-                    name={createFormInputName(name)}
-                    onClick={this.onColorShow}
-                    type="button"
-                >
-                    {label}
-                    <span className={iconClassName} />
-                </button>
-                {showColorPicker && (
-                    <div className="domain-validator-color-popover">
-                        <div
-                            className="domain-validator-color-cover"
-                            id={createFormInputId(name, domainIndex, validatorIndex)}
-                            onClick={this.onColorShow}
-                        />
-                        <CompactPicker onChangeComplete={this.onColorChange} color={color} />
-                    </div>
-                )}
-                <div className="domain-color-preview" style={{ backgroundColor: color }} />
-            </div>
-        );
-    };
-
     render(): ReactNode {
         const { validatorIndex, expanded, dataType, validator, mvEnabled, domainIndex } = this.props;
 
@@ -239,14 +162,14 @@ export class ConditionalFormatOptions extends PureComponent<ConditionalFormatOpt
                 {expanded && (
                     <div>
                         <Filters
-                            validatorIndex={validatorIndex}
                             domainIndex={domainIndex}
-                            onChange={this.onFilterChange}
-                            type={type}
-                            mvEnabled={mvEnabled}
                             expression={validator.formatFilter}
-                            prefix={DOMAIN_CONDITIONAL_FORMAT_PREFIX}
                             firstFilterTooltip={this.firstFilterTooltip()}
+                            mvEnabled={mvEnabled}
+                            onChange={this.onFilterChange}
+                            prefix={DOMAIN_CONDITIONAL_FORMAT_PREFIX}
+                            type={type}
+                            validatorIndex={validatorIndex}
                         />
                         <div className="domain-validation-subtitle">Display Options</div>
                         {this.renderDisplayCheckbox(DOMAIN_VALIDATOR_BOLD, 'Bold', validator.bold)}
diff --git a/packages/components/src/theme/domainproperties.scss b/packages/components/src/theme/domainproperties.scss
@@ -616,24 +616,6 @@
   margin-top: 20px;
 }
 
-.domain-validator-color-popover {
-  position: absolute;
-  z-index: 2;
-}
-
-.domain-validator-color-cover {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.domain-validator-modal-apply {
-  display: inline-flex;
-  float: right;
-}
-
 .domain-annotation-table td {
     vertical-align: top;
 
@@ -648,28 +630,6 @@
     }
 }
 
-.domain-color-preview {
-  height: 25px;
-  width: 25px;
-  border: 1px solid;
-  display: inline-flex;
-  vertical-align: bottom;
-  margin-bottom: 1px;
-}
-
-.domain-color-picker-btn {
-  display: inline-flex;
-  font-size: 12px;
-  margin-right: 20px;
-  width: 70%;
-}
-
-.domain-color-caret {
-  margin-left: 40%;
-  position: absolute;
-  float: left;
-}
-
 .domain-validator-collapse-icon {
   float: right;
   cursor: pointer;
diff --git a/packages/components/src/theme/form.scss b/packages/components/src/theme/form.scss
@@ -246,7 +246,7 @@ textarea.form-control {
 .color-picker__chip {
     display: inline-block;
     height: 32px;
-    margin-left: 2em;
+    margin-left: 24px;
     border-radius: 4px;
     border: solid 1px $gray;
     width: 32px;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@labkey/components",`
`3`		`- "version": "7.3.1",`
	`3`	`+ "version": "7.3.2",`
`4`	`4`	`"description": "Components, models, actions, and utility functions for LabKey applications and pages",`
`5`	`5`	`"sideEffects": false,`
`6`	`6`	`"files": [`