@knime/kds-components 0.28.0 → 0.28.1

package/dist/index.css

@@ -600,7 +600,7 @@ html.kds-legacy {
 }
 
 .button {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -614,143 +614,143 @@ html.kds-legacy {
 
   /* for LinkButton */
 }
-&[data-v-80e22f2e]:is(a) {
+&[data-v-190ac311]:is(a) {
     text-decoration: none;
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
     cursor: default;
 }
-&[data-v-80e22f2e]:focus-visible {
+&[data-v-190ac311]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
 &.filled {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-primary-inverted);
     background-color: var(--kds-color-background-primary-bold-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled-inverted);
       background-color: var(--kds-color-background-disabled-primary);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-primary-bold-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-primary-bold-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger-inverted);
       background-color: var(--kds-color-background-danger-bold-initial);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled-inverted);
         background-color: var(--kds-color-background-disabled-danger);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-bold-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-bold-active);
 }
 }
 }
 }
 &.outlined {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-default);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
       border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger);
       border: var(--kds-border-action-error);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled);
         border: var(--kds-border-action-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.transparent {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-neutral);
     background-color: var(--kds-color-background-neutral-initial);
     border: var(--kds-border-action-transparent);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-neutral-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-neutral-active);
 }
 }
 &.destructive {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
         color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
           background-color: var(--kds-color-background-danger-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
           background-color: var(--kds-color-background-danger-active);
 }
 }
 }
 }
 &.toggled {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-selected);
     background-color: var(--kds-color-background-selected-initial);
     border: var(--kds-border-action-selected);
 }
-&.disabled[data-v-80e22f2e] {
+&.disabled[data-v-190ac311] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 &:not(.disabled, .success, .error) {
-&[data-v-80e22f2e]:hover {
+&[data-v-190ac311]:hover {
         background-color: var(--kds-color-background-selected-hover);
 }
-&[data-v-80e22f2e]:active {
+&[data-v-190ac311]:active {
         background-color: var(--kds-color-background-selected-active);
 }
 }
 }
-& .label[data-v-80e22f2e] {
+& .label[data-v-190ac311] {
     max-width: 200px;
     padding: 0 var(--kds-spacing-container-0-12x);
     overflow: hidden;
@@ -758,7 +758,7 @@ html.kds-legacy {
     white-space: nowrap;
     text-rendering: geometricprecision;
 }
-&.xsmall[data-v-80e22f2e] {
+&.xsmall[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-25x);
     padding: 0
@@ -770,7 +770,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-25x)
     );
 }
-&.small[data-v-80e22f2e] {
+&.small[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-12x);
     height: var(--kds-dimension-component-height-1-5x);
     padding: 0
@@ -782,7 +782,7 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-37x)
     );
 }
-&.medium[data-v-80e22f2e] {
+&.medium[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-1-75x);
     padding: 0
@@ -795,7 +795,7 @@ html.kds-legacy {
     );
 }
 &.large {
-&[data-v-80e22f2e] {
+&[data-v-190ac311] {
     gap: var(--kds-spacing-container-0-25x);
     height: var(--kds-dimension-component-height-2-25x);
     padding: 0
@@ -807,11 +807,11 @@ html.kds-legacy {
       var(--kds-border-radius-container-0-50x)
     );
 }
-& .label[data-v-80e22f2e] {
+& .label[data-v-190ac311] {
       padding: 0 var(--kds-spacing-container-0-25x);
 }
 }
-&.success[data-v-80e22f2e] {
+&.success[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-success-inverted);
     background-color: var(--kds-color-background-success-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -820,7 +820,7 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.error[data-v-80e22f2e] {
+&.error[data-v-190ac311] {
     color: var(--kds-color-text-and-icon-danger-inverted);
     background-color: var(--kds-color-background-danger-bold-initial);
     border: var(--kds-border-action-transparent);
@@ -829,11 +829,11 @@ html.kds-legacy {
       border-color 200ms ease-out,
       color 200ms ease-out;
 }
-&.remove-border-radius-left[data-v-80e22f2e] {
+&.remove-border-radius-left[data-v-190ac311] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-&.remove-border-radius-right[data-v-80e22f2e] {
+&.remove-border-radius-right[data-v-190ac311] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

package/dist/index.js

@@ -1160,6 +1160,7 @@ const _hoisted_1$R = {
 const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
+    dataTestId: {},
     size: { default: "medium" },
     disabled: { type: Boolean, default: false },
     title: {},
@@ -1209,6 +1210,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         disabled: __props.disabled,
         title: props.title,
         "aria-label": props.ariaLabel,
+        "data-test-id": props.dataTestId,
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
       }, {
         default: withCtx(() => [
@@ -1227,16 +1229,17 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["type", "class", "disabled", "title", "aria-label"]);
+      }, 8, ["type", "class", "disabled", "title", "aria-label", "data-test-id"]);
     };
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-80e22f2e"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-190ac311"]]);
 
 const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
+    dataTestId: {},
     size: {},
     disabled: { type: Boolean },
     title: {},
@@ -1302,6 +1305,7 @@ function isExternalUrl(url) {
 const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
+    dataTestId: {},
     size: {},
     disabled: { type: Boolean, default: false },
     title: {},
@@ -1642,6 +1646,7 @@ const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v
 const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
+    dataTestId: {},
     size: {},
     disabled: { type: Boolean },
     title: {},
@@ -1680,6 +1685,7 @@ const _hoisted_2$w = ["data-visible"];
 const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
+    dataTestId: {},
     size: { default: "medium" },
     disabled: { type: Boolean, default: false },
     title: {},
@@ -2410,6 +2416,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   },
   __name: "KdsMenuButton",
   props: {
+    dataTestId: {},
     size: {},
     disabled: { type: Boolean },
     title: {},
@@ -2490,6 +2497,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
 const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "KdsSplitButton",
   props: {
+    dataTestId: {},
     size: { default: "medium" },
     disabled: { type: Boolean },
     title: {},