Replace spans with Fragments in some places; Also add missing whitesp…

…ace between input labels and their access key badges
public-ui · Oct 30, 2023 · ed02f12 · ed02f12
1 parent 54863b9
commit ed02f12
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 49 deletions.
diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}

diff --git 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 (
-		<span>
+		<>
 			{first}
-			{rest.length ? <u>{accessKey}</u> : null}
-			{rest.length ? rest.join(accessKey) : null}
-		</span>
+			{rest.length ? (
+				<>
+					<u>{accessKey}</u>
+					{rest.join(accessKey)}
+				</>
+			) : null}
+		</>
 	);
 };
diff --git 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 ? (
 							<slot name="expert"></slot>
 						) : typeof this.state._accessKey === 'string' ? (
-							<span>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />
+							<>
+								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
 									{this.state._accessKey}
 								</span>
-							</span>
+							</>
 						) : (
 							<span>{this.state._label}</span>
 						)}