From 44d853c14db10a18c7c8b91057deaf6a5cc2b192 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:41:01 -0500 Subject: [PATCH] feat(*): upgrade to kongponents alpha [KHCP-9642] (#1399) --- package.json | 2 +- src/assets/styles/_elements.scss | 35 ++++------- src/components/AcceptInvitationForm.vue | 1 + src/components/ChangePasswordForm.vue | 4 +- src/components/ForgotPasswordForm.vue | 2 + src/components/LoginForm.vue | 8 ++- src/components/RegisterForm.vue | 1 + src/components/ResetPasswordForm.vue | 1 + yarn.lock | 78 ++++++++++++++----------- 9 files changed, 68 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index c733c8b3c..c20e75f84 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", "@evilmartians/lefthook": "^1.5.2", "@kong/design-tokens": "^1.11.9", - "@kong/kongponents": "^8.126.2", + "@kong/kongponents": "^9.0.0-alpha.54", "@rushstack/eslint-patch": "^1.5.1", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", diff --git a/src/assets/styles/_elements.scss b/src/assets/styles/_elements.scss index 39766e738..b1a7a9f3c 100644 --- a/src/assets/styles/_elements.scss +++ b/src/assets/styles/_elements.scss @@ -13,7 +13,7 @@ } .kong-auth-register-region { - margin-bottom: var(--kui-space-60, $kui-space-60); + margin-bottom: var(--kui-space-70, $kui-space-70); .k-select { width: 100% !important; @@ -26,12 +26,11 @@ } .register-alert { - margin-top: var(--kui-space-60, $kui-space-60); + margin-top: var(--kui-space-70, $kui-space-70); } .register-submit { - justify-content: center !important; - margin-top: var(--kui-space-90, $kui-space-90); + margin-top: var(--kui-space-70, $kui-space-70); width: 100% !important; } } @@ -51,12 +50,11 @@ .login-seo-button, .login-button { - justify-content: center !important; width: 100% !important; } .login-button { - margin-top: var(--kui-space-90, $kui-space-90); + margin-top: var(--kui-space-40, $kui-space-40); } .forgot-password-link { @@ -102,10 +100,8 @@ justify-content: end; .k-button { - justify-content: center !important; - &:first-of-type { - margin-right: var(--kui-space-20, $kui-space-20); + margin-right: var(--kui-space-70, $kui-space-70); } } } @@ -113,7 +109,6 @@ .kong-auth-reset-password-form { .reset-password-submit { - justify-content: center !important; width: 100% !important; } } @@ -123,13 +118,8 @@ line-height: var(--kui-line-height-40, $kui-line-height-40); } - .forgot-password-return-to-login-btn { - justify-content: center !important; - width: 100% !important; - } - + .forgot-password-return-to-login-btn, .forgot-password-submit { - justify-content: center !important; width: 100% !important; } @@ -147,17 +137,15 @@ font-size: var(--kui-font-size-60, $kui-font-size-60); font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold); line-height: var(--kui-line-height-60, $kui-line-height-60); - margin-bottom: var(--kui-space-90, $kui-space-90); + margin-bottom: var(--kui-space-70, $kui-space-70); } .accept-invitation-submit { - justify-content: center !important; - margin-top: var(--kui-space-90, $kui-space-90) !important; width: 100% !important; } .invitation-form-error { - margin-bottom: var(--kui-space-60, $kui-space-60); + margin-bottom: var(--kui-space-70, $kui-space-70); } } @@ -243,12 +231,11 @@ a { } .kong-auth-input { - margin-bottom: var(--kui-space-60, $kui-space-60); - width: 100% !important; + margin-bottom: var(--kui-space-70, $kui-space-70); } .form-error { - margin: var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0); + margin: var(--kui-space-70, $kui-space-70) var(--kui-space-0, $kui-space-0); } input.hidden-input { @@ -263,7 +250,7 @@ input.hidden-input { color: var(--kui-color-text-neutral, $kui-color-text-neutral); font-size: var(--kui-font-size-30, $kui-font-size-30); - .k-checkbox-label { + .k-label.checkbox-label { display: inline; } } diff --git a/src/components/AcceptInvitationForm.vue b/src/components/AcceptInvitationForm.vue index ed9024a85..41655ffee 100644 --- a/src/components/AcceptInvitationForm.vue +++ b/src/components/AcceptInvitationForm.vue @@ -86,6 +86,7 @@ class="accept-invitation-submit" data-testid="kong-auth-accept-invitation-submit" :disabled="btnDisabled" + size="large" type="submit" > diff --git a/src/components/ChangePasswordForm.vue b/src/components/ChangePasswordForm.vue index 98cc5624a..438a866e5 100644 --- a/src/components/ChangePasswordForm.vue +++ b/src/components/ChangePasswordForm.vue @@ -67,9 +67,10 @@ {{ messages.changePassword.cancelText }} @@ -81,6 +82,7 @@ appearance="primary" data-testid="kong-auth-change-password-submit" :disabled="btnDisabled" + size="large" type="submit" > diff --git a/src/components/ForgotPasswordForm.vue b/src/components/ForgotPasswordForm.vue index 6c5a25412..f329d5972 100644 --- a/src/components/ForgotPasswordForm.vue +++ b/src/components/ForgotPasswordForm.vue @@ -14,6 +14,7 @@ appearance="primary" class="forgot-password-return-to-login-btn" data-testid="kong-auth-forgot-password-return-to-login-btn" + size="large" @click.prevent="$emit('click-login-link')" >{{ loginLinkText }} @@ -50,6 +51,7 @@ class="forgot-password-submit" data-testid="kong-auth-forgot-password-submit" :disabled="btnDisabled" + size="large" type="submit" > diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue index 3d0e54fee..d172838a1 100644 --- a/src/components/LoginForm.vue +++ b/src/components/LoginForm.vue @@ -11,11 +11,12 @@