diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index 442dd5c57b..79ed0edb40 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "7.3.1", + "version": "7.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "7.3.1", + "version": "7.3.2", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 94c8910ad6..1d556a43bb 100644 --- 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 index eebfc5ab91..a8c2249762 100644 --- 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 index e992606695..11b0ad4fe8 100644 --- 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 index 5c9a6ef5e8..efe079f6dc 100644 --- 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 { - constructor(props) { - super(props); - - this.state = { - showTextColor: false, - showFillColor: false, - }; - } - +export class ConditionalFormatOptions extends PureComponent { static isValid = (validator: PropertyValidator): boolean => { return Filters.isValid(validator.get('formatFilter'), DOMAIN_CONDITIONAL_FORMAT_PREFIX); }; @@ -91,7 +76,7 @@ export class ConditionalFormatOptions extends PureComponent { return ( - + Add a condition to this format rule that will be tested against the value for this field. ); @@ -104,9 +89,9 @@ export class ConditionalFormatOptions extends PureComponent
{label} @@ -116,68 +101,40 @@ export class ConditionalFormatOptions extends PureComponent { - 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 (
-
- {this.getColorPickerButton( - DOMAIN_CONDITION_FORMAT_TEXT_COLOR, - 'Text Color', - textColor, - showTextColor - )} +
+
- {this.getColorPickerButton( - DOMAIN_CONDITION_FORMAT_BACKGROUND_COLOR, - 'Fill Color', - fillColor, - showFillColor - )} +
-
); }; - 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 ( -
- - {showColorPicker && ( -
-
- -
- )} -
-
- ); - }; - render(): ReactNode { const { validatorIndex, expanded, dataType, validator, mvEnabled, domainIndex } = this.props; @@ -239,14 +162,14 @@ export class ConditionalFormatOptions extends PureComponent
Display Options
{this.renderDisplayCheckbox(DOMAIN_VALIDATOR_BOLD, 'Bold', validator.bold)} diff --git a/packages/components/src/theme/domainproperties.scss b/packages/components/src/theme/domainproperties.scss index c39cb226f8..17bf43d2c0 100644 --- 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 index 28a2bb97dd..2d14c19308 100644 --- 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;