Skip to content

Commit 825a99d

Browse files
maximilianimaximiliani
committed
minor design optimizations
Signed-off-by: Maximilian Inckmann <[email protected]>
1 parent 2e8d58c commit 825a99d

File tree

5 files changed

+76
-44
lines changed

5 files changed

+76
-44
lines changed

‎packages/react-library/lib/components/stencil-generated/components.server.ts‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,28 @@
88

99
/* eslint-disable */
1010

11-
import { ColorHighlight as ColorHighlightElement } from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
11+
import {
12+
ColorHighlight as ColorHighlightElement,
13+
} from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
1214
import { CopyButton as CopyButtonElement } from '@kit-data-manager/pid-component/dist/components/copy-button.js';
1315
import { JsonViewer as JsonViewerElement } from '@kit-data-manager/pid-component/dist/components/json-viewer.js';
14-
import { LocaleVisualization as LocaleVisualizationElement } from '@kit-data-manager/pid-component/dist/components/locale-visualization.js';
16+
import {
17+
LocaleVisualization as LocaleVisualizationElement,
18+
} from '@kit-data-manager/pid-component/dist/components/locale-visualization.js';
1519
import { PidActions as PidActionsElement } from '@kit-data-manager/pid-component/dist/components/pid-actions.js';
16-
import { PidCollapsible as PidCollapsibleElement } from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
20+
import {
21+
PidCollapsible as PidCollapsibleElement,
22+
} from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
1723
import { PidComponent as PidComponentElement } from '@kit-data-manager/pid-component/dist/components/pid-component.js';
1824
import { PidDataTable as PidDataTableElement } from '@kit-data-manager/pid-component/dist/components/pid-data-table.js';
19-
import { PidPagination as PidPaginationElement } from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
25+
import {
26+
PidPagination as PidPaginationElement,
27+
} from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
2028
import { PidTooltip as PidTooltipElement } from '@kit-data-manager/pid-component/dist/components/pid-tooltip.js';
2129
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
2230
import { createComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
2331

24-
export const serializeShadowRoot: SerializeShadowRootOptions = { default: 'declarative-shadow-dom' };
25-
26-
export type ColorHighlightEvents = NonNullable<unknown>;
32+
export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative'declarative-shadow-dom'type ColorHighlightEvents = NonNullable<unknown>;
2733

2834
export const ColorHighlight: StencilReactComponent<ColorHighlightElement, ColorHighlightEvents> = /*@__PURE__*/ createComponent<ColorHighlightElement, ColorHighlightEvents>({
2935
tagName: 'color-highlight',
@@ -62,10 +68,7 @@ export const JsonViewer: StencilReactComponent<JsonViewerElement, JsonViewerEven
6268

6369
export type LocaleVisualizationEvents = NonNullable<unknown>;
6470

65-
export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<
66-
LocaleVisualizationElement,
67-
LocaleVisualizationEvents
68-
>({
71+
export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<LocaleVisualizationElement, LocaleVisualizationEvents>({
6972
tagName: 'locale-visualization',
7073
properties: {
7174
locale: 'locale',
@@ -89,8 +92,8 @@ export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEven
8992
});
9093

9194
export type PidCollapsibleEvents = {
92-
onCollapsibleToggle: EventName<CustomEvent<boolean>>;
93-
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>;
95+
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
96+
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
9497
};
9598

9699
export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
@@ -133,8 +136,8 @@ export const PidComponent: StencilReactComponent<PidComponentElement, PidCompone
133136
});
134137

135138
export type PidDataTableEvents = {
136-
onPageChange: EventName<CustomEvent<number>>;
137-
onItemsPerPageChange: EventName<CustomEvent<number>>;
139+
onPageChange: EventName<CustomEvent<number>>,
140+
onItemsPerPageChange: EventName<CustomEvent<number>>
138141
};
139142

140143
export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTableEvents> = /*@__PURE__*/ createComponent<PidDataTableElement, PidDataTableEvents>({
@@ -156,8 +159,8 @@ export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTab
156159
});
157160

158161
export type PidPaginationEvents = {
159-
onPageChange: EventName<CustomEvent<number>>;
160-
onItemsPerPageChange: EventName<CustomEvent<number>>;
162+
onPageChange: EventName<CustomEvent<number>>,
163+
onItemsPerPageChange: EventName<CustomEvent<number>>
161164
};
162165

163166
export const PidPagination: StencilReactComponent<PidPaginationElement, PidPaginationEvents> = /*@__PURE__*/ createComponent<PidPaginationElement, PidPaginationEvents>({

‎packages/react-library/lib/components/stencil-generated/components.ts‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,46 @@
77

88
/* eslint-disable */
99

10-
import { ColorHighlight as ColorHighlightElement, defineCustomElement as defineColorHighlight } from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
11-
import { CopyButton as CopyButtonElement, defineCustomElement as defineCopyButton } from '@kit-data-manager/pid-component/dist/components/copy-button.js';
12-
import { defineCustomElement as defineJsonViewer, JsonViewer as JsonViewerElement } from '@kit-data-manager/pid-component/dist/components/json-viewer.js';
10+
import {
11+
ColorHighlight as ColorHighlightElement,
12+
defineCustomElement as defineColorHighlight,
13+
} from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
14+
import {
15+
CopyButton as CopyButtonElement,
16+
defineCustomElement as defineCopyButton,
17+
} from '@kit-data-manager/pid-component/dist/components/copy-button.js';
18+
import {
19+
defineCustomElement as defineJsonViewer,
20+
JsonViewer as JsonViewerElement,
21+
} from '@kit-data-manager/pid-component/dist/components/json-viewer.js';
1322
import {
1423
defineCustomElement as defineLocaleVisualization,
1524
LocaleVisualization as LocaleVisualizationElement,
1625
} from '@kit-data-manager/pid-component/dist/components/locale-visualization.js';
17-
import { defineCustomElement as definePidActions, PidActions as PidActionsElement } from '@kit-data-manager/pid-component/dist/components/pid-actions.js';
18-
import { defineCustomElement as definePidCollapsible, PidCollapsible as PidCollapsibleElement } from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
19-
import { defineCustomElement as definePidComponent, PidComponent as PidComponentElement } from '@kit-data-manager/pid-component/dist/components/pid-component.js';
20-
import { defineCustomElement as definePidDataTable, PidDataTable as PidDataTableElement } from '@kit-data-manager/pid-component/dist/components/pid-data-table.js';
21-
import { defineCustomElement as definePidPagination, PidPagination as PidPaginationElement } from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
22-
import { defineCustomElement as definePidTooltip, PidTooltip as PidTooltipElement } from '@kit-data-manager/pid-component/dist/components/pid-tooltip.js';
26+
import {
27+
defineCustomElement as definePidActions,
28+
PidActions as PidActionsElement,
29+
} from '@kit-data-manager/pid-component/dist/components/pid-actions.js';
30+
import {
31+
defineCustomElement as definePidCollapsible,
32+
PidCollapsible as PidCollapsibleElement,
33+
} from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
34+
import {
35+
defineCustomElement as definePidComponent,
36+
PidComponent as PidComponentElement,
37+
} from '@kit-data-manager/pid-component/dist/components/pid-component.js';
38+
import {
39+
defineCustomElement as definePidDataTable,
40+
PidDataTable as PidDataTableElement,
41+
} from '@kit-data-manager/pid-component/dist/components/pid-data-table.js';
42+
import {
43+
defineCustomElement as definePidPagination,
44+
PidPagination as PidPaginationElement,
45+
} from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
46+
import {
47+
defineCustomElement as definePidTooltip,
48+
PidTooltip as PidTooltipElement,
49+
} from '@kit-data-manager/pid-component/dist/components/pid-tooltip.js';
2350
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
2451
import { createComponent } from '@stencil/react-output-target/runtime';
2552
import React from 'react';
@@ -32,10 +59,10 @@ export const ColorHighlight: StencilReactComponent<ColorHighlightElement, ColorH
3259
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
3360
react: React,
3461
events: {} as ColorHighlightEvents,
35-
defineCustomElement: defineColorHighlight,
62+
defineCustomElement: defineColorHighlight
3663
});
3764

38-
export type CopyButtonEvents = NonNullable<unknown>;
65+
export type CopyButtonEvents = NonNulla,ble<unknown>;
3966

4067
export const CopyButton: StencilReactComponent<CopyButtonElement, CopyButtonEvents> = /*@__PURE__*/ createComponent<CopyButtonElement, CopyButtonEvents>({
4168
tagName: 'copy-button',
@@ -59,10 +86,7 @@ export const JsonViewer: StencilReactComponent<JsonViewerElement, JsonViewerEven
5986

6087
export type LocaleVisualizationEvents = NonNullable<unknown>;
6188

62-
export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<
63-
LocaleVisualizationElement,
64-
LocaleVisualizationEvents
65-
>({
89+
export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<LocaleVisualizationElement, LocaleVisualizationEvents>({
6690
tagName: 'locale-visualization',
6791
elementClass: LocaleVisualizationElement,
6892
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
@@ -83,8 +107,8 @@ export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEven
83107
});
84108

85109
export type PidCollapsibleEvents = {
86-
onCollapsibleToggle: EventName<CustomEvent<boolean>>;
87-
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>;
110+
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
111+
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
88112
};
89113

90114
export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
@@ -111,8 +135,8 @@ export const PidComponent: StencilReactComponent<PidComponentElement, PidCompone
111135
});
112136

113137
export type PidDataTableEvents = {
114-
onPageChange: EventName<CustomEvent<number>>;
115-
onItemsPerPageChange: EventName<CustomEvent<number>>;
138+
onPageChange: EventName<CustomEvent<number>>,
139+
onItemsPerPageChange: EventName<CustomEvent<number>>
116140
};
117141

118142
export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTableEvents> = /*@__PURE__*/ createComponent<PidDataTableElement, PidDataTableEvents>({
@@ -128,8 +152,8 @@ export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTab
128152
});
129153

130154
export type PidPaginationEvents = {
131-
onPageChange: EventName<CustomEvent<number>>;
132-
onItemsPerPageChange: EventName<CustomEvent<number>>;
155+
onPageChange: EventName<CustomEvent<number>>,
156+
onItemsPerPageChange: EventName<CustomEvent<number>>
133157
};
134158

135159
export const PidPagination: StencilReactComponent<PidPaginationElement, PidPaginationEvents> = /*@__PURE__*/ createComponent<PidPaginationElement, PidPaginationEvents>({

‎packages/stencil-library/src/components/pid-collapsible/pid-collapsible.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,7 @@ export class PidCollapsible {
677677
* Gets host classes based on current state
678678
*/
679679
private getHostClasses() {
680-
const baseClasses = ['relative', 'mx-2', 'font-sans', 'transition-all', 'duration-200', 'ease-in-out', 'box-border', 'leading-normal'];
680+
const baseClasses = ['relative', 'mx-2', 'font-sans', 'transition-all', 'duration-200', 'ease-in-out', 'box-border', 'leading-normal', 'w-3/4'];
681681

682682
// Add emphasis classes
683683
if (this.emphasize) {
@@ -868,7 +868,7 @@ export class PidCollapsible {
868868
</div>
869869
</summary>
870870

871-
<div class={`${contentClasses} ${this.expanded ? 'mt-[8px]' : ''}`}>
871+
<div class={`${contentClasses} ${this.expanded ? 'mt-2' : ''}`}>
872872
<slot></slot>
873873
</div>
874874

‎packages/stencil-library/src/components/pid-component/pid-component.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -615,7 +615,12 @@ export class PidComponent {
615615
</span>
616616

617617
{this.currentLevelOfSubcomponents === 0 && this.showTopLevelCopy && (this.emphasizeComponent || this.temporarilyEmphasized) ? (
618-
<copy-button slot="summary-actions" value={this.value} class="relative my-auto ml-auto flex-shrink-0" aria-label={`Copy value: ${this.value}`} />
618+
<copy-button
619+
slot="summary-actions"
620+
value={this.value}
621+
// class="relative my-auto ml-auto flex-shrink-0"
622+
aria-label={`Copy value: ${this.value}`}
623+
/>
619624
) : null}
620625

621626
{/* Table and content */}
@@ -631,7 +636,7 @@ export class PidComponent {
631636
settings={this.settings}
632637
darkMode={this.darkMode}
633638
onPageChange={e => (this.tablePage = e.detail)}
634-
class="flex-grow overflow-auto"
639+
// class="flex-grow overflow-auto"
635640
aria-label={`Data table for ${this.value}`}
636641
aria-describedby={`${this.el.id}-table-description`}
637642
/>

‎packages/stencil-library/src/components/pid-data-table/pid-data-table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ export class PidDataTable {
154154
>
155155
<thead class="sticky top-0 z-20 rounded-t-lg bg-slate-600 text-slate-200">
156156
<tr class="font-semibold" role="row">
157-
<th class="w-[30%] min-w-[150px] rounded-tl-lg px-2 py-2" scope="col" role="columnheader">
157+
<th class="w-[30%] min-w-[150px] rounded-tl-lg p-2" scope="col" role="columnheader">
158158
Key
159159
</th>
160-
<th class="w-[70%] rounded-tr-lg px-2 py-2" scope="col" role="columnheader">
160+
<th class="w-[70%] rounded-tr-lg p-2" scope="col" role="columnheader">
161161
Value
162162
</th>
163163
</tr>

0 commit comments

Comments
 (0)