From 3f1c2241c95ad3d8e0df6d3d9e44e14d5da23e9f Mon Sep 17 00:00:00 2001 From: portikM Date: Fri, 13 Oct 2023 10:57:45 -0400 Subject: [PATCH] fix(*): fix components affected by klabel [KHCP-8987] --- src/components/KFileUpload/KFileUpload.cy.ts | 8 ++++---- src/components/KInput/KInput.cy.ts | 12 ++++++------ src/components/KInput/KInput.vue | 2 +- src/components/KMultiselect/KMultiselect.cy.ts | 8 ++++---- src/components/KSelect/KSelect.cy.ts | 8 ++++---- src/components/KStepper/KStep.vue | 4 ++-- src/components/KTextArea/KTextArea.cy.ts | 8 ++++---- 7 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/KFileUpload/KFileUpload.cy.ts b/src/components/KFileUpload/KFileUpload.cy.ts index 77f6ba976f..0956cd4b7c 100644 --- a/src/components/KFileUpload/KFileUpload.cy.ts +++ b/src/components/KFileUpload/KFileUpload.cy.ts @@ -11,7 +11,7 @@ describe('KFileUpload', () => { }, }) - cy.get('.k-input-label').should('contain.text', text) + cy.get('.k-label').should('contain.text', text) }) it('remove-button should not exist if there is no selected file', () => { @@ -42,13 +42,13 @@ describe('KFileUpload', () => { testMode: true, label: labelText, labelAttributes: { - help: 'random text', + info: 'random text', }, }, }) - cy.get('.k-input-label').should('contain.text', labelText) - cy.get('.k-input-label .kong-icon-help').should('be.visible') + cy.get('.k-label').should('contain.text', labelText) + cy.get('.k-label .tooltip-trigger-icon').should('be.visible') }) it('does not render cancel button, if removable is false', () => { diff --git a/src/components/KInput/KInput.cy.ts b/src/components/KInput/KInput.cy.ts index fda6d96cc6..ca173e411a 100644 --- a/src/components/KInput/KInput.cy.ts +++ b/src/components/KInput/KInput.cy.ts @@ -57,7 +57,7 @@ describe('KInput', () => { }, }) - cy.get('.k-input-label').should('contain.text', label) + cy.get('.k-label').should('contain.text', label) }) it('renders label with labelAttributes applied', () => { @@ -67,13 +67,13 @@ describe('KInput', () => { testMode: true, label, labelAttributes: { - help: 'some help text', + info: 'some info text', }, }, }) - cy.get('.k-input-label').should('contain.text', label) - cy.get('.k-input-label .kong-icon-help').should('exist').and('be.visible') + cy.get('.k-label').should('contain.text', label) + cy.get('.k-label .tooltip-trigger-icon').should('exist').and('be.visible') }) it('renders label and tooltip with `label-tooltip` slot applied', () => { @@ -88,8 +88,8 @@ describe('KInput', () => { }, }) - cy.get('.k-input-label').should('contain.text', label) - cy.get('.k-input-label .kong-icon-infoFilled').should('exist').and('be.visible') + cy.get('.k-label').should('contain.text', label) + cy.get('.k-label .tooltip-trigger-icon').should('exist').and('be.visible') }) it('renders overlayed label when value is passed', () => { diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue index c1b5534fd8..b535543831 100644 --- a/src/components/KInput/KInput.vue +++ b/src/components/KInput/KInput.vue @@ -204,7 +204,7 @@ const isReadonly = computed((): boolean => attrs?.readonly !== undefined && Stri const isRequired = computed((): boolean => attrs?.required !== undefined && String(attrs?.required) !== 'false') const inputId = computed((): string => attrs.id ? String(attrs.id) : props.testMode ? 'test-input-id-1234' : uuidv4()) const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value)) -const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.help || props.labelAttributes?.info || slots['label-tooltip'])) +const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.info || slots['label-tooltip'])) // we need this so we can create a watcher for programmatic changes to the modelValue const value = computed({ get(): string | number { diff --git a/src/components/KMultiselect/KMultiselect.cy.ts b/src/components/KMultiselect/KMultiselect.cy.ts index 70562a86f9..4b36b646ef 100644 --- a/src/components/KMultiselect/KMultiselect.cy.ts +++ b/src/components/KMultiselect/KMultiselect.cy.ts @@ -114,7 +114,7 @@ describe('KMultiselect', () => { }, }) - cy.get('.k-input-label').should('contain.text', labelText) + cy.get('.k-label').should('contain.text', labelText) }) it('renders label with labelAttributes applied', () => { @@ -124,7 +124,7 @@ describe('KMultiselect', () => { testMode: true, label: labelText, labelAttributes: { - help: 'some help text', + info: 'some info text', }, items: [{ label: 'Label 1', @@ -133,8 +133,8 @@ describe('KMultiselect', () => { }, }) - cy.get('.k-input-label').should('contain.text', labelText) - cy.get('.k-input-label .kong-icon-help').should('be.visible') + cy.get('.k-label').should('contain.text', labelText) + cy.get('.k-label .tooltip-trigger-icon').should('be.visible') }) it('reacts to text change and select', () => { diff --git a/src/components/KSelect/KSelect.cy.ts b/src/components/KSelect/KSelect.cy.ts index f62919cc50..7c86371bbf 100644 --- a/src/components/KSelect/KSelect.cy.ts +++ b/src/components/KSelect/KSelect.cy.ts @@ -97,7 +97,7 @@ describe('KSelect', () => { }, }) - cy.get('.k-input-label').should('contain.text', labelText) + cy.get('.k-label').should('contain.text', labelText) }) it('renders label with labelAttributes applied', () => { @@ -107,7 +107,7 @@ describe('KSelect', () => { testMode: true, label: labelText, labelAttributes: { - help: 'some help text', + info: 'some info text', }, items: [{ label: 'Label 1', @@ -116,8 +116,8 @@ describe('KSelect', () => { }, }) - cy.get('.k-input-label').should('contain.text', labelText) - cy.get('.k-input-label .kong-icon-help').should('be.visible') + cy.get('.k-label').should('contain.text', labelText) + cy.get('.k-label .tooltip-trigger-icon').should('be.visible') }) it('renders an asterisk when `overlayLabel` is true and `required` attr is set', () => { diff --git a/src/components/KStepper/KStep.vue b/src/components/KStepper/KStep.vue index 1ca554a0d4..a5e2c0bf26 100644 --- a/src/components/KStepper/KStep.vue +++ b/src/components/KStepper/KStep.vue @@ -86,7 +86,7 @@ const labelStyle = computed(() => { padding-top: var(--kui-space-50, $kui-space-50); text-align: center; - :deep(.k-input-label) { + :deep(.k-label) { color: var(--kui-color-text-neutral, $kui-color-text-neutral); font-size: var(--kui-font-size-40, $kui-font-size-40); font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium); @@ -121,7 +121,7 @@ const labelStyle = computed(() => {