Skip to content

Commit

Permalink
fix(klabel): address PR feedback [KHCP-8987]
Browse files Browse the repository at this point in the history
  • Loading branch information
@portikM
portikM committed Oct 17, 2023
1 parent 2be1998 commit 9613e68
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 5 deletions.
12 changes: 12 additions & 0 deletions src/components/KButton/KButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,15 +170,19 @@ export default {
// TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot
// enforce icon size exported by @kong/icons because it's defined by the design system
:deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-40, $kui-icon-size-40) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-40, $kui-icon-size-40) !important;
// TODO: [beta] remove this once once we remove the icon prop & slot
svg {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-40, $kui-icon-size-40) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-40, $kui-icon-size-40) !important;
}
Expand Down Expand Up @@ -324,15 +328,19 @@ export default {
// TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot
// enforce icon size exported by @kong/icons because it's defined by the design system
:deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-50, $kui-icon-size-50) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-50, $kui-icon-size-50) !important;
// TODO: [beta] remove this once once we remove the icon prop & slot
svg {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-50, $kui-icon-size-50) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-50, $kui-icon-size-50) !important;
}
Expand All @@ -358,15 +366,19 @@ export default {
// TODO: [beta] remove :deep(.kong-icon) once once we remove the icon prop & slot
// enforce icon size exported by @kong/icons because it's defined by the design system
:deep(#{$kongponentsKongIconSelector}), :deep(.kong-icon) {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-30, $kui-icon-size-30) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-30, $kui-icon-size-30) !important;
// TODO: [beta] remove this once once we remove the icon prop & slot
svg {
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-30, $kui-icon-size-30) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-30, $kui-icon-size-30) !important;
}
Expand Down
11 changes: 7 additions & 4 deletions src/components/KLabel/KLabel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const hasTooltip = computed((): boolean => !!(props.info || slots.tooltip))
/* Component variables */
$kLabelSpacingX: var(--kui-space-40, $kui-space-40);
$kLabelRequiredDotSize: 6px;
/* Component styles */
Expand All @@ -67,19 +68,19 @@ $kLabelSpacingX: var(--kui-space-40, $kui-space-40);
margin-bottom: var(--kui-space-40, $kui-space-40);
&.is-required {
margin-left: calc($kLabelSpacingX + 6px); // 6px to compensate for the 6px width of the dot
margin-left: calc($kLabelSpacingX + $kLabelRequiredDotSize); // 6px to compensate for the 6px width of the dot
position: relative;
&::before {
background-color: var(--kui-color-background-danger, $kui-color-background-danger);
border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
bottom: calc(50% - 2px); // place the dot in the middle of the text
content: '';
height: 6px;
height: $kLabelRequiredDotSize;
left: 0px;
margin-left: calc((-1 * $kLabelSpacingX) - 6px); // -6px to compensate for the 6px width
margin-left: calc((-1 * $kLabelSpacingX) - $kLabelRequiredDotSize); // -6px to compensate for the 6px width
position: absolute;
width: 6px;
width: $kLabelRequiredDotSize;
}
}
Expand All @@ -88,8 +89,10 @@ $kLabelSpacingX: var(--kui-space-40, $kui-space-40);
.tooltip-trigger-icon {
cursor: pointer;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
height: var(--kui-icon-size-30, $kui-icon-size-30) !important;
// override use-proper-token stylelint rule here to override the icon size
/* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
width: var(--kui-icon-size-30, $kui-icon-size-30) !important;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/KTooltip/KTooltip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
trigger="hover"
width="auto"
>
<div tabindex="0">
<div :tabindex="$slots.default ? '0' : '-1'">
<slot />
</div>

Expand Down

0 comments on commit 9613e68

Please sign in to comment.