From ed02f12913f03417e4f2b5ba67c32fd4241fd5e7 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Mon, 30 Oct 2023 09:24:59 +0100 Subject: [PATCH] Replace spans with Fragments in some places; Also add missing whitespace between input labels and their access key badges --- .../src/components/input-checkbox/component.tsx | 8 ++++---- .../src/components/input-color/component.tsx | 8 ++++---- .../src/components/input-date/component.tsx | 8 ++++---- .../src/components/input-email/component.tsx | 8 ++++---- .../src/components/input-file/component.tsx | 8 ++++---- .../src/components/input-number/component.tsx | 8 ++++---- .../src/components/input-password/component.tsx | 8 ++++---- .../src/components/input-range/component.tsx | 8 ++++---- .../src/components/input-text/component.tsx | 8 ++++---- .../components/src/components/select/component.tsx | 8 ++++---- .../span/InternalUnderlinedAccessKey.tsx | 14 +++++++++----- .../src/components/textarea/component.tsx | 8 ++++---- 12 files changed, 53 insertions(+), 49 deletions(-) diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index d43ee397e6..cc04c31090 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { InputTypeOnDefault } from '../../types/input/types'; @@ -71,12 +71,12 @@ export class KolInputCheckbox implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-color/component.tsx b/packages/components/src/components/input-color/component.tsx index 2bd625d734..0c1ec4213a 100644 --- a/packages/components/src/components/input-color/component.tsx +++ b/packages/components/src/components/input-color/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -68,12 +68,12 @@ export class KolInputColor implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-date/component.tsx b/packages/components/src/components/input-date/component.tsx index dcc722c1a6..652cdca3aa 100644 --- a/packages/components/src/components/input-date/component.tsx +++ b/packages/components/src/components/input-date/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -84,12 +84,12 @@ export class KolInputDate implements ComponentApi { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-email/component.tsx b/packages/components/src/components/input-email/component.tsx index 5c989fe5e6..9f3e2dde51 100644 --- a/packages/components/src/components/input-email/component.tsx +++ b/packages/components/src/components/input-email/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -90,12 +90,12 @@ export class KolInputEmail implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-file/component.tsx b/packages/components/src/components/input-file/component.tsx index 86083934f6..577e0eba0c 100644 --- a/packages/components/src/components/input-file/component.tsx +++ b/packages/components/src/components/input-file/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -67,12 +67,12 @@ export class KolInputFile implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-number/component.tsx b/packages/components/src/components/input-number/component.tsx index a3efc4ef7c..fbf22cff56 100644 --- a/packages/components/src/components/input-number/component.tsx +++ b/packages/components/src/components/input-number/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -86,12 +86,12 @@ export class KolInputNumber implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-password/component.tsx b/packages/components/src/components/input-password/component.tsx index 7ebfb40887..41c5237a7e 100644 --- a/packages/components/src/components/input-password/component.tsx +++ b/packages/components/src/components/input-password/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -89,12 +89,12 @@ export class KolInputPassword implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-range/component.tsx b/packages/components/src/components/input-range/component.tsx index bbfdc1c775..a092801819 100644 --- a/packages/components/src/components/input-range/component.tsx +++ b/packages/components/src/components/input-range/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -92,12 +92,12 @@ export class KolInputRange implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/input-text/component.tsx b/packages/components/src/components/input-text/component.tsx index 6351801901..5c03b4fa5f 100644 --- a/packages/components/src/components/input-text/component.tsx +++ b/packages/components/src/components/input-text/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -106,12 +106,12 @@ export class KolInputText implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx index 83fcb6437b..77694deef6 100644 --- a/packages/components/src/components/select/component.tsx +++ b/packages/components/src/components/select/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { Stringified } from '../../types/common'; import { KoliBriHorizontalIcons } from '../../types/icons'; @@ -97,12 +97,12 @@ export class KolSelect implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )} diff --git a/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx b/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx index bdd707e7c8..7dae4bf774 100644 --- a/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx +++ b/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx @@ -1,4 +1,4 @@ -import { h } from '@stencil/core'; +import { Fragment, h } from '@stencil/core'; type Props = { accessKey: string; @@ -16,10 +16,14 @@ export const InternalUnderlinedAccessKey = ({ accessKey, label }: Props) => { [first, ...rest] = label.split(accessKey); } return ( - + <> {first} - {rest.length ? {accessKey} : null} - {rest.length ? rest.join(accessKey) : null} - + {rest.length ? ( + <> + {accessKey} + {rest.join(accessKey)} + + ) : null} + ); }; diff --git a/packages/components/src/components/textarea/component.tsx b/packages/components/src/components/textarea/component.tsx index aa6cbe5b5a..207740bf1f 100644 --- a/packages/components/src/components/textarea/component.tsx +++ b/packages/components/src/components/textarea/component.tsx @@ -1,4 +1,4 @@ -import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { InputTypeOnDefault } from '../../types/input/types'; import { AdjustHeightPropType } from '../../types/props/adjust-height'; @@ -80,12 +80,12 @@ export class KolTextarea implements API { {hasExpertSlot ? ( ) : typeof this.state._accessKey === 'string' ? ( - - + <> + {' '} - + ) : ( {this.state._label} )}