diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx index 78d5c2bba9..122676f953 100644 --- a/packages/components/src/components/combobox/shadow.tsx +++ b/packages/components/src/components/combobox/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ComboboxAPI, ComboboxStates, HideErrorPropType, @@ -176,11 +177,11 @@ export class KolCombobox implements ComboboxAPI { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx index ae1227df51..e0edfa9196 100644 --- a/packages/components/src/components/input-checkbox/shadow.tsx +++ b/packages/components/src/components/input-checkbox/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, CheckedPropType, HideErrorPropType, IdPropType, @@ -107,11 +108,11 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx index 21447b9645..ef426e0b0d 100644 --- a/packages/components/src/components/input-color/shadow.tsx +++ b/packages/components/src/components/input-color/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -100,11 +101,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx index 7a3077c9f2..9977435c4e 100644 --- a/packages/components/src/components/input-date/shadow.tsx +++ b/packages/components/src/components/input-date/shadow.tsx @@ -1,6 +1,7 @@ import type { JSX } from '@stencil/core'; import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core'; -import type { +import { + buildBadgeText, ButtonProps, HideErrorPropType, IdPropType, @@ -154,11 +155,11 @@ export class KolInputDate implements InputDateAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx index 4f43caf0ed..e04a8983c5 100644 --- a/packages/components/src/components/input-email/shadow.tsx +++ b/packages/components/src/components/input-email/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -123,11 +124,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx index 5f3fa22b09..76f582c10f 100644 --- a/packages/components/src/components/input-file/shadow.tsx +++ b/packages/components/src/components/input-file/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -97,11 +98,11 @@ export class KolInputFile implements InputFileAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx index 0e62dcded5..67c36b8bfe 100644 --- a/packages/components/src/components/input-number/shadow.tsx +++ b/packages/components/src/components/input-number/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -116,11 +117,11 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx index a9d958df37..979bb4977d 100644 --- a/packages/components/src/components/input-password/shadow.tsx +++ b/packages/components/src/components/input-password/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -124,11 +125,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx index d78430c805..dde2cc96fa 100644 --- a/packages/components/src/components/input-radio/shadow.tsx +++ b/packages/components/src/components/input-radio/shadow.tsx @@ -1,4 +1,4 @@ -import type { +import { FocusableElement, HideErrorPropType, IdPropType, @@ -15,6 +15,7 @@ import type { SyncValueBySelectorPropType, TooltipAlignPropType, ShortKeyPropType, + buildBadgeText, } from '../../schema'; import { showExpertSlot } from '../../schema'; import type { JSX } from '@stencil/core'; @@ -94,8 +95,8 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this._accessKey === 'string' ? ( - + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( + ) : ( this._label )} diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx index bc04598f77..79a4b48f32 100644 --- a/packages/components/src/components/input-range/shadow.tsx +++ b/packages/components/src/components/input-range/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, FocusableElement, HideErrorPropType, IdPropType, @@ -147,11 +148,11 @@ export class KolInputRange implements InputRangeAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx index 235467fe7d..c557d47797 100644 --- a/packages/components/src/components/input-text/shadow.tsx +++ b/packages/components/src/components/input-text/shadow.tsx @@ -1,6 +1,7 @@ -import type { +import { AccessKeyPropType, AlertPropType, + buildBadgeText, ButtonProps, FocusableElement, HideErrorPropType, @@ -136,11 +137,11 @@ export class KolInputText implements InputTextAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx index d0050070ab..263520bb0b 100644 --- a/packages/components/src/components/input/component.tsx +++ b/packages/components/src/components/input/component.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ -import { handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema'; +import { buildBadgeText, handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema'; import type { JSX } from '@stencil/core'; import { Component, Element, Fragment, Host, Prop, h } from '@stencil/core'; import clsx from 'clsx'; @@ -114,7 +114,7 @@ export class KolInputWc implements Props { */ aria-hidden="true" class="input-tooltip" - _badgeText={this._accessKey || this._shortKey} + _badgeText={buildBadgeText(this._accessKey, this._shortKey)} _align={this._tooltipAlign} _id={this._hideLabel ? `${this._id}-label` : undefined} _label={this._label} diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx index 4fa86bd92b..fb09db6a0f 100644 --- a/packages/components/src/components/select/shadow.tsx +++ b/packages/components/src/components/select/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, FocusableElement, HideErrorPropType, IdPropType, @@ -130,11 +131,11 @@ export class KolSelect implements SelectAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx index b47d183a14..2cc15f39a7 100644 --- a/packages/components/src/components/single-select/shadow.tsx +++ b/packages/components/src/components/single-select/shadow.tsx @@ -1,4 +1,5 @@ -import type { +import { + buildBadgeText, HideErrorPropType, IdPropType, InputTypeOnDefault, @@ -201,11 +202,11 @@ export class KolSingleSelect implements SingleSelectAPI { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx index 0f368f2ddd..d90b86a944 100644 --- a/packages/components/src/components/textarea/shadow.tsx +++ b/packages/components/src/components/textarea/shadow.tsx @@ -1,5 +1,6 @@ -import type { +import { AdjustHeightPropType, + buildBadgeText, CSSResize, FocusableElement, HasCounterPropType, @@ -113,11 +114,11 @@ export class KolTextarea implements TextareaAPI, FocusableElement { {hasExpertSlot ? ( - ) : typeof this.state._accessKey === 'string' ? ( + ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( <> - {' '} + {' '} ) : ( diff --git a/packages/components/src/schema/utils/reuse.ts b/packages/components/src/schema/utils/reuse.ts index 985f294023..76bf9be44b 100644 --- a/packages/components/src/schema/utils/reuse.ts +++ b/packages/components/src/schema/utils/reuse.ts @@ -26,3 +26,14 @@ export const handleSlotContent = (hostRef: HTMLElement, slotRef: HTMLElement, sl * @returns True if the label is an empty string */ export const showExpertSlot = (label: unknown) => label === ''; + +/** + * This function builds the BadgeText. It chooses access key over shortkey or empty string, if both are empty + * @param accessKey + * @param shortKey + * @returns returns badgeText as string + */ +export const buildBadgeText = (accessKey?: string, shortKey?: string) => { + const badgeText = [accessKey, shortKey].filter((f) => f); + return badgeText[0] || ''; +}; diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx index e8accf68a3..f25c9c3255 100644 --- a/packages/samples/react/src/components/input-number/partials/cases.tsx +++ b/packages/samples/react/src/components/input-number/partials/cases.tsx @@ -35,7 +35,7 @@ export const InputNumberCases = forwardRef - + ); });