diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss index 867c39b184..3ca401f383 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss @@ -11,6 +11,11 @@ input[type="checkbox"].three-state-checkbox { -webkit-appearance: none; transform: translateZ(0); + &:disabled { + // reset default disabled cursor + cursor: initial; + } + &:before, &:after { position: absolute; @@ -41,7 +46,7 @@ input[type="checkbox"].three-state-checkbox { } &:indeterminate:after { - // Checkmark + // Dash-mark for indeterminate width: 8px; height: 4px; margin: 5px 4px; @@ -72,13 +77,13 @@ input[type="checkbox"].three-state-checkbox { background-color: #f8f8f8; } + &:indeterminate:disabled:before, &:checked:disabled:before { border-color: transparent; background-color: rgba(#264ae5, 0.4); } - &:disabled:after, - &:checked:disabled:after { + &:disabled:after { border-color: #f8f8f8; } diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md index 86cf41418b..98c21eba9e 100644 --- a/packages/pluggableWidgets/combobox-web/CHANGELOG.md +++ b/packages/pluggableWidgets/combobox-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Changed + +- We improved the combobox behavior by disabling the Select All checkbox when no items are available. + ## [2.3.0] - 2025-03-19 ### Changed diff --git a/packages/pluggableWidgets/combobox-web/package.json b/packages/pluggableWidgets/combobox-web/package.json index 7c10e13870..b7f9d9634b 100644 --- a/packages/pluggableWidgets/combobox-web/package.json +++ b/packages/pluggableWidgets/combobox-web/package.json @@ -1,7 +1,7 @@ { "name": "@mendix/combobox-web", "widgetName": "Combobox", - "version": "2.3.0", + "version": "2.3.1", "description": "Configurable Combo box widget with suggestions and autocomplete.", "copyright": "© Mendix Technology BV 2025. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx index c5e7451dd2..1b12725c9c 100644 --- a/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx +++ b/packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx @@ -163,6 +163,7 @@ export function MultiSelection({ menuHeaderContent={ selector.selectAllButton ? ( > { id?: string; + disabled?: boolean; ariaLabel?: string; value: ThreeStateCheckBoxEnum; onChange?: () => void; } -export function SelectAllButton({ id, ariaLabel, value, onChange }: SelectAllButtonProps): ReactElement { +export function SelectAllButton({ id, disabled, ariaLabel, value, onChange }: SelectAllButtonProps): ReactElement { return ( - + {ariaLabel ? ( // empty onclick function is being set to allow label clicking diff --git a/packages/pluggableWidgets/combobox-web/src/package.xml b/packages/pluggableWidgets/combobox-web/src/package.xml index 7576ccddfe..7c57309917 100644 --- a/packages/pluggableWidgets/combobox-web/src/package.xml +++ b/packages/pluggableWidgets/combobox-web/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss index 779270a069..0588eeecbe 100644 --- a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss +++ b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss @@ -77,6 +77,16 @@ $cb-skeleton-dark: #d2d2d2; content: ""; border-color: var(--btn-default-bg-hover, $cb-hover-color); } + + &-select-all-button { + & + label { + transition: color 0.2s ease-in-out; + } + + &-disabled + label { + color: var(--color-default-dark, $cb-disabled-text-color); + } + } } &-footer { diff --git a/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx b/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx index 9ce15c8e96..4d9c139e78 100644 --- a/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx +++ b/packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx @@ -4,11 +4,12 @@ export type ThreeStateCheckBoxEnum = "all" | "some" | "none"; export interface ThreeStateCheckBoxProps { id?: string; + disabled?: boolean; value: ThreeStateCheckBoxEnum; onChange?: () => void; } -export function ThreeStateCheckBox({ id, value, onChange }: ThreeStateCheckBoxProps): ReactElement { +export function ThreeStateCheckBox({ id, disabled, value, onChange }: ThreeStateCheckBoxProps): ReactElement { const checkboxRef = useRef(null); useEffect(() => { if (!checkboxRef.current) { @@ -28,6 +29,7 @@ export function ThreeStateCheckBox({ id, value, onChange }: ThreeStateCheckBoxPr className="three-state-checkbox" ref={checkboxRef} checked={value !== "none"} + disabled={disabled} onChange={onChange} /> );