KDS-442: use KdsCheckbox in JSONForms (#105)

Author: jschroeter

.changeset/chilled-roses-jump.md

@@ -0,0 +1,5 @@
+---
+"@knime/jsonforms": patch
+---
+
+KDS-442: use KdsCheckbox in JSONForms

.stylelintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
           "packages/styles/css/variables/index.css",
           "packages/components/src/components/forms/variables.css",
           "packages/jsonforms/src/higherOrderComponents/control/errorMessage/error-messages.css",
+          "node_modules/@knime/kds-styles/dist/tokens/css/_variables.css",
         ],
       },
     ],

package.json

@@ -40,6 +40,7 @@
     "@changesets/cli": "^2.27.7",
     "@knime/eslint-config": "workspace:*",
     "@knime/licenses": "workspace:*",
+    "@knime/kds-styles": "catalog:",
     "@tsconfig/node24": "24.0.3",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "4.17.12",

packages/jsonforms/src/JsonFormsDialog.vue

@@ -179,6 +179,6 @@ const jsonFormsDialogBindings = computed(() => ({
    * The settings subpanel does overflow for animation reasons
   */
   overflow-x: hidden;
-  background-color: var(--knime-gray-ultra-light);
+  background-color: var(--kds-color-surface-default);
 }
 </style>

packages/jsonforms/src/higherOrderComponents/control/LabeledControl.vue

@@ -75,6 +75,14 @@ const title = computed(() => (props.label === "" ? " " : props.label));
         min-width: 0;
         white-space: pre;
       }
+
+      /**
+       * see src/uiComponents/composables/useHideOnNull.ts
+       */
+      & :deep(.checkbox-hide-on-null) {
+        margin-top: 2px;
+        margin-right: var(--kds-spacing-container-0-5x);
+      }
     }
   }
 

packages/jsonforms/src/higherOrderComponents/control/withLabel.ts

@@ -1,6 +1,6 @@
 import { computed, h, ref, toRef } from "vue";
 
-import { Checkbox } from "@knime/components";
+import { KdsCheckbox } from "@knime/kds-components";
 
 import useHideOnNull from "../../uiComponents/composables/useHideOnNull";
 
@@ -53,7 +53,7 @@ const addLabelToComponent =
           },
           {
             "before-label": () =>
-              showCheckbox.value ? h(Checkbox, checkboxProps.value) : null,
+              showCheckbox.value ? h(KdsCheckbox, checkboxProps.value) : null,
             default: ({ labelForId }: { labelForId: string }) => {
               if (!showControl.value) {
                 return null;

packages/jsonforms/src/layoutComponents/section/SectionHeading.vue

@@ -21,21 +21,21 @@ defineProps<{
   top: 0;
   z-index: 1;
   margin: 0 calc(-1 * var(--horizontal-dialog-padding, 0));
-  background-color: var(--knime-gray-ultra-light);
+  background-color: var(--kds-color-surface-default);
 
   & .section-header-layout-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: calc(100% - var(--horizontal-dialog-padding, 0) * 2);
     margin: 0 var(--horizontal-dialog-padding, 0);
-    border-bottom: 1px solid var(--knime-silver-sand);
+    border-bottom: var(--kds-border-base-muted);
 
     & h3 {
       margin: 0;
       font-size: 16px;
       line-height: 40px;
-      color: var(--knime-masala);
+      color: var(--kds-color-text-and-icon-neutral);
     }
   }
 }

packages/jsonforms/src/uiComponents/CheckboxControl.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { Checkbox } from "@knime/components";
+import { KdsCheckbox, type KdsCheckboxProps } from "@knime/kds-components";
 
 import type { VueControlProps } from "../higherOrderComponents/control/types";
 
+type CheckboxValue = KdsCheckboxProps["modelValue"];
+
 defineProps<VueControlProps<boolean>>();
 const hover = ref(false);
 </script>
@@ -15,15 +17,18 @@ const hover = ref(false);
     @mouseover="hover = true"
     @mouseleave="hover = false"
   >
-    <Checkbox
-      class="checkbox"
-      :disabled="disabled"
-      :model-value="control.data"
-      @update:model-value="changeValue"
-    >
-      {{ control.label }}
+    <div class="checkbox-container">
+      <KdsCheckbox
+        class="checkbox"
+        :disabled="disabled"
+        :model-value="control.data"
+        :label="control.label"
+        @update:model-value="
+          (value: CheckboxValue) => changeValue(value as boolean)
+        "
+      />
       <slot name="icon" />
-    </Checkbox>
+    </div>
     <slot name="buttons" :hover="hover" />
   </div>
 </template>
@@ -37,12 +42,14 @@ const hover = ref(false);
   display: flex;
   margin-bottom: -10px;
 
-  & .checkbox {
+  & .checkbox-container {
+    display: flex;
     flex: 1;
     min-width: 0;
   }
 }
 
+/* via slot */
 .reexecution-icon {
   display: inline-block;
   height: 10px;

packages/jsonforms/src/uiComponents/__tests__/CheckboxControl.test.ts

@@ -9,7 +9,7 @@ import {
 } from "vitest";
 import type { VueWrapper } from "@vue/test-utils";
 
-import { Checkbox } from "@knime/components";
+import { KdsCheckbox } from "@knime/kds-components";
 
 import {
   type VueControlTestProps,
@@ -60,21 +60,23 @@ describe("CheckboxControl", () => {
   });
 
   it("renders", () => {
-    expect(wrapper.findComponent(Checkbox).exists()).toBe(true);
+    expect(wrapper.findComponent(KdsCheckbox).exists()).toBe(true);
   });
 
   it("calls changeValue when checkbox is changed", async () => {
-    await wrapper.findComponent(Checkbox).vm.$emit("update:modelValue", true);
+    await wrapper.getComponent(KdsCheckbox).vm.$emit("update:modelValue", true);
     expect(changeValue).toHaveBeenCalledWith(true);
   });
 
   it("sets correct initial value", () => {
-    expect(wrapper.findComponent(Checkbox).vm.modelValue).toBe(
+    expect(wrapper.getComponent(KdsCheckbox).props().modelValue).toBe(
       props.control.data,
     );
   });
 
   it("sets correct label", () => {
-    expect(wrapper.find("label").text()).toBe(props.control.label);
+    expect(wrapper.getComponent(KdsCheckbox).props().label).toBe(
+      props.control.label,
+    );
   });
 });

packages/jsonforms/src/uiComponents/composables/__tests__/__integrationTests__/hide-on-null.test.ts

@@ -1,15 +1,17 @@
 import { describe, expect, it, vi } from "vitest";
 import { VueWrapper, flushPromises, mount } from "@vue/test-utils";
 
-import { Checkbox, InputField } from "@knime/components";
+import { InputField } from "@knime/components";
+import { KdsCheckbox } from "@knime/kds-components";
 
 import JsonFormsDialog from "../../../../JsonFormsDialog.vue";
 import { controls, toRenderers } from "../../../../renderers";
 
 describe("hide on null", () => {
   let wrapper: VueWrapper;
 
-  const findCheckbox = (wrapper: VueWrapper) => wrapper.findComponent(Checkbox);
+  const findCheckbox = (wrapper: VueWrapper) =>
+    wrapper.findComponent(KdsCheckbox);
 
   const defaultValue = "default value";