diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx index 15038f21ebf4..bb87923b4976 100644 --- a/packages/main/cypress/specs/Table.cy.tsx +++ b/packages/main/cypress/specs/Table.cy.tsx @@ -756,6 +756,18 @@ describe("Table - Fixed Header", () => { check(50, "#row-100"); }); + + it("creates a stacking context on the table host", () => { + cy.mount( + + + ColumnA + +
, + ); + + cy.get("#table").should("have.css", "z-index", "0"); + }); }); describe("Table - Horizontal Scrolling", () => { diff --git a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx index bed59a7355d1..41382126fbf4 100644 --- a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx +++ b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx @@ -32,7 +32,6 @@ const { TABLE_SELECTION: { defaultText: SELECTION }, TABLE_COLUMN_HEADER_ROW: { defaultText: COLUMN_HEADER_ROW }, TABLE_ROW_SELECTED: { defaultText: SELECTED }, - TABLE_ROW_NAVIGABLE: { defaultText: NAVIGABLE }, TABLE_ROW_NAVIGATED: { defaultText: NAVIGATED }, TABLE_ROW_ACTIVE: { defaultText: ACTIVE }, } = Translations; @@ -59,7 +58,7 @@ describe("Cell Custom Announcement - More details", () => {
- + @@ -146,22 +145,25 @@ describe("Cell Custom Announcement - More details", () => { checkAnnouncement(`Button with custom accessibility text . ${CONTAINS_CONTROL}`, true); cy.realPress("ArrowRight"); // Row actions cell - checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2)); + checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 3)); cy.focused().should("have.attr", "aria-colindex", "6") .should("have.attr", "role", "gridcell") .then($rowActionsCell => { const rowActionsCell = $rowActionsCell[0]; const invisibleText = document.getElementById("ui5-invisible-text"); - expect(rowActionsCell.ariaLabelledByElements[0]).to.equal(invisibleText); + expect(rowActionsCell.ariaLabelledByElements![0]).to.equal(invisibleText); rowActionsCell.blur(); expect(rowActionsCell.ariaLabelledByElements).to.equal(null); rowActionsCell.focus(); }); cy.get("#row1-edit-action").invoke("remove"); - checkAnnouncement(ONE_ROW_ACTION, true); + checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2), true); cy.get("#row1-add-action").invoke("remove"); + checkAnnouncement(ONE_ROW_ACTION, true); + + cy.get("#row1-nav-action").invoke("remove"); checkAnnouncement(EMPTY, true); cy.get("@row1NavigatedCell").should("have.attr", "role", "none") @@ -251,7 +253,7 @@ describe("Row Custom Announcement - Less details", () => { C4 - + @@ -283,7 +285,7 @@ describe("Row Custom Announcement - Less details", () => { }); }); - function checkAnnouncement(expectedText: string, focusAgain = false, check = "contains") { + function checkAnnouncement(expectedText: string, focusAgain = false, check: "contains" | "equal" = "contains") { focusAgain && cy.focused().then($el => { if ($el.attr("ui5-table-header-row") !== undefined) { cy.realPress("ArrowDown"); @@ -301,14 +303,14 @@ describe("Row Custom Announcement - Less details", () => { it("should announce table rows", () => { cy.get("@row1").realClick(); - checkAnnouncement(`Row . 2 of 2 . ${SELECTED} . ${NAVIGABLE} . H1`); + checkAnnouncement(`Row . 2 of 2 . ${SELECTED} . ${ACTIVE} . H1`); checkAnnouncement(`H1 . R1C1 . H2 . ${CONTAINS_CONTROLS} . H3 . ${EMPTY} . H4 . C4 Button C4Button`); - checkAnnouncement(ONE_ROW_ACTION); + checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2)); cy.focused().should("have.attr", "aria-rowindex", "2") .should("have.attr", "role", "row"); cy.get("#selection").invoke("attr", "selected", ""); - checkAnnouncement(`Row . 2 of 2 . ${NAVIGABLE}`, true); + checkAnnouncement(`Row . 2 of 2 . ${ACTIVE}`, true); cy.get("#row1-nav-action").invoke("prop", "interactive", true); checkAnnouncement(`Row . 2 of 2 . ${ACTIVE} . H1`, true); diff --git a/packages/main/cypress/specs/TableRowActions.cy.tsx b/packages/main/cypress/specs/TableRowActions.cy.tsx index 399763e14a5f..69031421a5d7 100644 --- a/packages/main/cypress/specs/TableRowActions.cy.tsx +++ b/packages/main/cypress/specs/TableRowActions.cy.tsx @@ -59,7 +59,7 @@ describe("TableRowActions", () => { - + @@ -71,7 +71,7 @@ describe("TableRowActions", () => { checkTemplateColumn(`${8 + 36 + 8}px`); cy.get("@row1").find("[icon=add]").shadow().find("ui5-button").should("exist"); cy.get("@row2").find("[icon=add]").should("have.css", "display", "block"); - cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow"); + cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow"); cy.get("@row4").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow"); cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick")); @@ -213,7 +213,7 @@ describe("TableRowActions", () => { it("tests that the aligment of navigation is more important than avoiding overflow", () => { mountTable(3, () => <> - + diff --git a/packages/main/src/TableRowActionBase.ts b/packages/main/src/TableRowActionBase.ts index 4f7bd435d67f..4c83b15aacf7 100644 --- a/packages/main/src/TableRowActionBase.ts +++ b/packages/main/src/TableRowActionBase.ts @@ -125,7 +125,7 @@ abstract class TableRowActionBase extends UI5Element { } get _isInteractive() { - return this.getRenderInfo().interactive; + return this.getRenderInfo().interactive !== false; } } diff --git a/packages/main/src/TableRowActionNavigation.ts b/packages/main/src/TableRowActionNavigation.ts index 81817951677a..64eca011a239 100644 --- a/packages/main/src/TableRowActionNavigation.ts +++ b/packages/main/src/TableRowActionNavigation.ts @@ -31,7 +31,7 @@ class TableRowActionNavigation extends TableRowActionBase { * @deprecated As of version 2.20.0, the navigation icon is deprecated. * For better accessibility, the interactive mode which renders a button, must be used instead. To handle the action, attach a listener to the `click` event. * If the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of the `ui5-table`. - * This property will be removed in a future release. + * This property will be removed in the next major version. */ @property({ type: Boolean }) interactive = false; @@ -43,6 +43,19 @@ class TableRowActionNavigation extends TableRowActionBase { return true; } + onEnterDOM(): void { + super.onEnterDOM(); + if (!this.interactive) { + // eslint-disable-next-line no-console + console.warn( + "[ui5-table-row-action-navigation] The non-interactive (icon) rendering mode is deprecated and will be removed in the next major version. " + + "Set the `interactive` property to render the navigation action as an accessible button and handle the action via the `click` event. " + + "If the navigation should be triggered when a row is pressed, set the row's `interactive` property and use the `row-click` event of `ui5-table`. " + + "Button rendering will become the only supported behavior, and the `interactive` property will then be removed.", + ); + } + } + getRenderInfo() { return { text: this._i18nNavigation, diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index 319ec481504c..98e76cb0842d 100644 --- a/packages/main/src/themes/Table.css +++ b/packages/main/src/themes/Table.css @@ -1,6 +1,7 @@ :host { display: block; position: relative; + z-index: 0; /* create a stacking context for the sticky elements */ color: var(--sapList_TextColor); font: var(--sapFontSize) var(--sapFontFamily); } @@ -36,8 +37,4 @@ inset: 0; height: 100%; z-index: 2; -} - -:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) { - opacity: var(--sapContent_DisabledOpacity); } \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Table/Basic/main.js b/packages/website/docs/_samples/main/Table/Basic/main.js index 5eef1b6cc847..ece43ec39e37 100644 --- a/packages/website/docs/_samples/main/Table/Basic/main.js +++ b/packages/website/docs/_samples/main/Table/Basic/main.js @@ -1,4 +1,4 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; \ No newline at end of file +import "@ui5/webcomponents/dist/Text.js"; diff --git a/packages/website/docs/_samples/main/Table/Basic/sample.html b/packages/website/docs/_samples/main/Table/Basic/sample.html index b7ae512d7114..785d6dd73bd9 100644 --- a/packages/website/docs/_samples/main/Table/Basic/sample.html +++ b/packages/website/docs/_samples/main/Table/Basic/sample.html @@ -20,25 +20,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/Basic/sample.tsx b/packages/website/docs/_samples/main/Table/Basic/sample.tsx index a9f2a3249c06..a5c96c515042 100644 --- a/packages/website/docs/_samples/main/Table/Basic/sample.tsx +++ b/packages/website/docs/_samples/main/Table/Basic/sample.tsx @@ -1,17 +1,17 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { return ( @@ -36,77 +36,77 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + diff --git a/packages/website/docs/_samples/main/Table/ColumnWidths/main.js b/packages/website/docs/_samples/main/Table/ColumnWidths/main.js index 67867160f2dc..002f194111d7 100644 --- a/packages/website/docs/_samples/main/Table/ColumnWidths/main.js +++ b/packages/website/docs/_samples/main/Table/ColumnWidths/main.js @@ -1,8 +1,8 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Slider.js"; +import "@ui5/webcomponents/dist/Text.js"; const slider = document.getElementById("slider"); const table = document.getElementById("table"); diff --git a/packages/website/docs/_samples/main/Table/ColumnWidths/sample.html b/packages/website/docs/_samples/main/Table/ColumnWidths/sample.html index e5426509a2cc..02c872cc3ce6 100644 --- a/packages/website/docs/_samples/main/Table/ColumnWidths/sample.html +++ b/packages/website/docs/_samples/main/Table/ColumnWidths/sample.html @@ -21,22 +21,22 @@ - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.1 KG + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.1 KG diff --git a/packages/website/docs/_samples/main/Table/ColumnWidths/sample.tsx b/packages/website/docs/_samples/main/Table/ColumnWidths/sample.tsx index f7cceff4855a..b9b10a37247f 100644 --- a/packages/website/docs/_samples/main/Table/ColumnWidths/sample.tsx +++ b/packages/website/docs/_samples/main/Table/ColumnWidths/sample.tsx @@ -1,21 +1,21 @@ import { useRef } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import SliderClass from "@ui5/webcomponents/dist/Slider.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Slider = createReactComponent(SliderClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { const tableRef = useRef(null); @@ -53,62 +53,62 @@ function App() { {/* playground-fold */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + Technocom - + 32 x 21 x 4 cm - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/DragAndDrop/main.js b/packages/website/docs/_samples/main/Table/DragAndDrop/main.js index 66a8717d7913..f0bb71b16ca0 100644 --- a/packages/website/docs/_samples/main/Table/DragAndDrop/main.js +++ b/packages/website/docs/_samples/main/Table/DragAndDrop/main.js @@ -1,7 +1,7 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; function tableMoveOver(e) { const { source, destination } = e.detail; diff --git a/packages/website/docs/_samples/main/Table/DragAndDrop/sample.html b/packages/website/docs/_samples/main/Table/DragAndDrop/sample.html index dbf08c5c4ccd..219386ba8fc7 100644 --- a/packages/website/docs/_samples/main/Table/DragAndDrop/sample.html +++ b/packages/website/docs/_samples/main/Table/DragAndDrop/sample.html @@ -19,22 +19,22 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/DragAndDrop/sample.tsx b/packages/website/docs/_samples/main/Table/DragAndDrop/sample.tsx index 5029420e19ef..1e9b1d1aeea8 100644 --- a/packages/website/docs/_samples/main/Table/DragAndDrop/sample.tsx +++ b/packages/website/docs/_samples/main/Table/DragAndDrop/sample.tsx @@ -1,18 +1,18 @@ import { useRef, useEffect } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { const tableRef = useRef(null); @@ -86,62 +86,62 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + Technocom - + 32 x 21 x 4 cm - + diff --git a/packages/website/docs/_samples/main/Table/Growing/main.js b/packages/website/docs/_samples/main/Table/Growing/main.js index 0824c7e74019..05f17f6098d9 100644 --- a/packages/website/docs/_samples/main/Table/Growing/main.js +++ b/packages/website/docs/_samples/main/Table/Growing/main.js @@ -2,8 +2,8 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableGrowing.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Text.js"; const MAX_GROW = 3; diff --git a/packages/website/docs/_samples/main/Table/Growing/sample.html b/packages/website/docs/_samples/main/Table/Growing/sample.html index 96f6e347cdec..c82d8fe667c3 100644 --- a/packages/website/docs/_samples/main/Table/Growing/sample.html +++ b/packages/website/docs/_samples/main/Table/Growing/sample.html @@ -22,25 +22,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/Growing/sample.tsx b/packages/website/docs/_samples/main/Table/Growing/sample.tsx index c25c73eee10f..b8da0cf53056 100644 --- a/packages/website/docs/_samples/main/Table/Growing/sample.tsx +++ b/packages/website/docs/_samples/main/Table/Growing/sample.tsx @@ -1,20 +1,20 @@ import { useState, useRef } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableGrowingClass from "@ui5/webcomponents/dist/TableGrowing.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableGrowing = createReactComponent(TableGrowingClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); const MAX_GROW = 3; @@ -66,103 +66,103 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {extraRows.map((row) => ( - + - + Technocom - + 32 x 21 x 4 cm - + - + ))} diff --git a/packages/website/docs/_samples/main/Table/HAlign/main.js b/packages/website/docs/_samples/main/Table/HAlign/main.js index 5eef1b6cc847..ece43ec39e37 100644 --- a/packages/website/docs/_samples/main/Table/HAlign/main.js +++ b/packages/website/docs/_samples/main/Table/HAlign/main.js @@ -1,4 +1,4 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; \ No newline at end of file +import "@ui5/webcomponents/dist/Text.js"; diff --git a/packages/website/docs/_samples/main/Table/HAlign/sample.html b/packages/website/docs/_samples/main/Table/HAlign/sample.html index fbe97336c48d..6dad04e04a89 100644 --- a/packages/website/docs/_samples/main/Table/HAlign/sample.html +++ b/packages/website/docs/_samples/main/Table/HAlign/sample.html @@ -20,25 +20,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/HAlign/sample.tsx b/packages/website/docs/_samples/main/Table/HAlign/sample.tsx index 7ad85b65b65f..5c340332702e 100644 --- a/packages/website/docs/_samples/main/Table/HAlign/sample.tsx +++ b/packages/website/docs/_samples/main/Table/HAlign/sample.tsx @@ -1,17 +1,17 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { return ( @@ -44,77 +44,77 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + diff --git a/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.html b/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.html index cab7180f4a2e..57026357ea3b 100644 --- a/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.html +++ b/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.html @@ -29,25 +29,25 @@ - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 290 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 290 EUR diff --git a/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx b/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx index cc2e87ec51ed..f105a2560d71 100644 --- a/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx +++ b/packages/website/docs/_samples/main/Table/HeaderCellActionAI/sample.tsx @@ -91,77 +91,77 @@ function App() { - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + diff --git a/packages/website/docs/_samples/main/Table/Interactive/main.js b/packages/website/docs/_samples/main/Table/Interactive/main.js index 8e39643a765c..7ac6b231fc6e 100644 --- a/packages/website/docs/_samples/main/Table/Interactive/main.js +++ b/packages/website/docs/_samples/main/Table/Interactive/main.js @@ -1,8 +1,8 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Toast.js"; +import "@ui5/webcomponents/dist/Text.js"; const table = document.getElementById("table"); const toast = document.getElementById("message"); diff --git a/packages/website/docs/_samples/main/Table/Interactive/sample.html b/packages/website/docs/_samples/main/Table/Interactive/sample.html index 21a23c8071a1..52b3ad6c4258 100644 --- a/packages/website/docs/_samples/main/Table/Interactive/sample.html +++ b/packages/website/docs/_samples/main/Table/Interactive/sample.html @@ -21,22 +21,22 @@ - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/Interactive/sample.tsx b/packages/website/docs/_samples/main/Table/Interactive/sample.tsx index 95f2725983ec..91312e8b1aef 100644 --- a/packages/website/docs/_samples/main/Table/Interactive/sample.tsx +++ b/packages/website/docs/_samples/main/Table/Interactive/sample.tsx @@ -1,21 +1,21 @@ import { useRef } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import ToastClass from "@ui5/webcomponents/dist/Toast.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const Toast = createReactComponent(ToastClass); +const Text = createReactComponent(TextClass); function App() { const toastRef = useRef(null); @@ -49,62 +49,62 @@ function App() { {/* playground-fold-end */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + Technocom - + 32 x 21 x 4 cm - + diff --git a/packages/website/docs/_samples/main/Table/MergedCells/main.js b/packages/website/docs/_samples/main/Table/MergedCells/main.js index 8e734f077319..bab0b3bfec59 100644 --- a/packages/website/docs/_samples/main/Table/MergedCells/main.js +++ b/packages/website/docs/_samples/main/Table/MergedCells/main.js @@ -2,7 +2,6 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; import "@ui5/webcomponents/dist/TableSelectionMulti.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Text.js"; import "@ui5/webcomponents/dist/Bar.js"; import "@ui5/webcomponents/dist/SegmentedButton.js"; diff --git a/packages/website/docs/_samples/main/Table/NoDataSlot/main.js b/packages/website/docs/_samples/main/Table/NoDataSlot/main.js index 96448805e6eb..48c0b09e4cb7 100644 --- a/packages/website/docs/_samples/main/Table/NoDataSlot/main.js +++ b/packages/website/docs/_samples/main/Table/NoDataSlot/main.js @@ -1,6 +1,5 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js"; import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html b/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html index bf9fd02e4949..b320ab728cbc 100644 --- a/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html +++ b/packages/website/docs/_samples/main/Table/NoDataSlot/sample.html @@ -14,7 +14,7 @@ - Product + Product Supplier Dimensions Weight diff --git a/packages/website/docs/_samples/main/Table/NoDataSlot/sample.tsx b/packages/website/docs/_samples/main/Table/NoDataSlot/sample.tsx index d222f74fc061..7d1118f36349 100644 --- a/packages/website/docs/_samples/main/Table/NoDataSlot/sample.tsx +++ b/packages/website/docs/_samples/main/Table/NoDataSlot/sample.tsx @@ -16,7 +16,7 @@ function App() { {/* playground-fold */} - + Product diff --git a/packages/website/docs/_samples/main/Table/Popin/main.js b/packages/website/docs/_samples/main/Table/Popin/main.js index d0774679b8b9..e14830185cf5 100644 --- a/packages/website/docs/_samples/main/Table/Popin/main.js +++ b/packages/website/docs/_samples/main/Table/Popin/main.js @@ -1,11 +1,11 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; import "@ui5/webcomponents/dist/Slider.js"; import "@ui5/webcomponents/dist/Bar.js"; import "@ui5/webcomponents/dist/SegmentedButton.js"; +import "@ui5/webcomponents/dist/Text.js"; import "@ui5/webcomponents-icons/dist/detail-more.js"; import "@ui5/webcomponents-icons/dist/detail-less.js"; diff --git a/packages/website/docs/_samples/main/Table/Popin/sample.html b/packages/website/docs/_samples/main/Table/Popin/sample.html index 14d856346f59..64c90b7e4d3b 100644 --- a/packages/website/docs/_samples/main/Table/Popin/sample.html +++ b/packages/website/docs/_samples/main/Table/Popin/sample.html @@ -33,25 +33,25 @@ - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/Popin/sample.tsx b/packages/website/docs/_samples/main/Table/Popin/sample.tsx index 43f3531d388c..f03d2f220c3c 100644 --- a/packages/website/docs/_samples/main/Table/Popin/sample.tsx +++ b/packages/website/docs/_samples/main/Table/Popin/sample.tsx @@ -2,7 +2,6 @@ import { useRef } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; import BarClass from "@ui5/webcomponents/dist/Bar.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import SegmentedButtonClass from "@ui5/webcomponents/dist/SegmentedButton.js"; import SegmentedButtonItemClass from "@ui5/webcomponents/dist/SegmentedButtonItem.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; @@ -10,11 +9,11 @@ import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; import "@ui5/webcomponents-icons/dist/detail-more.js"; import "@ui5/webcomponents-icons/dist/detail-less.js"; const Bar = createReactComponent(BarClass); -const Label = createReactComponent(LabelClass); const SegmentedButton = createReactComponent(SegmentedButtonClass); const SegmentedButtonItem = createReactComponent(SegmentedButtonItemClass); const Table = createReactComponent(TableClass); @@ -22,6 +21,7 @@ const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); const HIDDEN_COLUMNS = ["dimensionsCol", "weightCol"]; @@ -111,77 +111,77 @@ function App() { {/* playground-fold */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/RowAction/main.js b/packages/website/docs/_samples/main/Table/RowAction/main.js index 01afe72402a5..85dfefeee8ad 100644 --- a/packages/website/docs/_samples/main/Table/RowAction/main.js +++ b/packages/website/docs/_samples/main/Table/RowAction/main.js @@ -5,7 +5,7 @@ import "@ui5/webcomponents/dist/TableRow.js"; import "@ui5/webcomponents/dist/TableCell.js"; import "@ui5/webcomponents/dist/TableRowAction.js"; import "@ui5/webcomponents/dist/TableRowActionNavigation.js"; -import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; import "@ui5/webcomponents-icons/dist/add.js"; import "@ui5/webcomponents-icons/dist/edit.js"; import "@ui5/webcomponents-icons/dist/share.js"; diff --git a/packages/website/docs/_samples/main/Table/RowAction/sample.html b/packages/website/docs/_samples/main/Table/RowAction/sample.html index 9cdd1e19d887..2ee209fc4b00 100644 --- a/packages/website/docs/_samples/main/Table/RowAction/sample.html +++ b/packages/website/docs/_samples/main/Table/RowAction/sample.html @@ -20,16 +20,16 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 899.99 EUR - + Notebook Basic 15
HT-1000 + Very Best Screens + 899.99 EUR + - Astro Laptop 216
HT-1251 - Technocom - 679.99 EUR + Astro Laptop 216
HT-1251 + Technocom + 679.99 EUR @@ -39,17 +39,17 @@ - Benda Laptop 1408
HT-6102 - Ultrasonic United - 699.99 EUR + Benda Laptop 1408
HT-6102 + Ultrasonic United + 699.99 EUR - Broad Screen 22HD
HT-1255 - Speaker Experts - 399.99 EUR + Broad Screen 22HD
HT-1255 + Speaker Experts + 399.99 EUR diff --git a/packages/website/docs/_samples/main/Table/RowAction/sample.tsx b/packages/website/docs/_samples/main/Table/RowAction/sample.tsx index a4cf4758b69e..72f91c0defaf 100644 --- a/packages/website/docs/_samples/main/Table/RowAction/sample.tsx +++ b/packages/website/docs/_samples/main/Table/RowAction/sample.tsx @@ -1,6 +1,5 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; @@ -15,8 +14,8 @@ import "@ui5/webcomponents-icons/dist/heart.js"; import "@ui5/webcomponents-icons/dist/delete.js"; import TableRowActionClass from "@ui5/webcomponents/dist/TableRowAction.js"; import TableRowActionNavigationClass from "@ui5/webcomponents/dist/TableRowActionNavigation.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); @@ -24,6 +23,7 @@ const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const TableRowAction = createReactComponent(TableRowActionClass); const TableRowActionNavigation = createReactComponent(TableRowActionNavigationClass); +const Text = createReactComponent(TextClass); const handlers: Record void> = { onAdd: (row) => { @@ -73,38 +73,38 @@ function App() { - + - + Very Best Screens - + - + {/* playground-fold-end */} - + - + Technocom - + - + - + Ultrasonic United - + - + - + Speaker Experts - + { diff --git a/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.html b/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.html index a167178d6666..1163f859bc89 100644 --- a/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.html +++ b/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.html @@ -20,29 +20,29 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 899.99 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 899.99 EUR - Astro Laptop 216
HT-1251 - Technocom - 679.99 EUR - + Astro Laptop 216
HT-1251 + Technocom + 679.99 EUR + - Benda Laptop 1408
HT-6102 - Ultrasonic United - 699.99 EUR - + Benda Laptop 1408
HT-6102 + Ultrasonic United + 699.99 EUR + - Broad Screen 22HD
HT-1255 - Speaker Experts - 399.99 EUR + Broad Screen 22HD
HT-1255 + Speaker Experts + 399.99 EUR diff --git a/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx b/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx index f8710e7e94b4..37b683292bdf 100644 --- a/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx +++ b/packages/website/docs/_samples/main/Table/RowActionNavigation/sample.tsx @@ -1,6 +1,5 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import { type UI5CustomEvent } from "@ui5/webcomponents-base"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; @@ -8,14 +7,15 @@ import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import "@ui5/webcomponents/dist/TableRowActionNavigation.js"; import TableRowActionNavigationClass from "@ui5/webcomponents/dist/TableRowActionNavigation.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const TableRowActionNavigation = createReactComponent(TableRowActionNavigationClass); +const Text = createReactComponent(TextClass); function App() { const handleTableRowActionClick = ( @@ -40,19 +40,19 @@ function App() { - + - + Very Best Screens - + - + - + Technocom - + - + {/* playground-fold */} - + - + Ultrasonic United - + - + - + Speaker Experts - + - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/ScrollMode/sample.tsx b/packages/website/docs/_samples/main/Table/ScrollMode/sample.tsx index c08b546ed03c..95bcb33e9145 100644 --- a/packages/website/docs/_samples/main/Table/ScrollMode/sample.tsx +++ b/packages/website/docs/_samples/main/Table/ScrollMode/sample.tsx @@ -1,17 +1,17 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { return ( @@ -37,77 +37,77 @@ function App() { {/* playground-fold */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/ScrollToLoad/main.js b/packages/website/docs/_samples/main/Table/ScrollToLoad/main.js index e21c58c99383..9a8314318286 100644 --- a/packages/website/docs/_samples/main/Table/ScrollToLoad/main.js +++ b/packages/website/docs/_samples/main/Table/ScrollToLoad/main.js @@ -2,8 +2,8 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableGrowing.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; +import "@ui5/webcomponents/dist/Text.js"; const MAX_GROW = 20; diff --git a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html index c776818833c4..b35769b27338 100644 --- a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html +++ b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html @@ -22,25 +22,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx index 0ee734a3f773..fd32dcad56c2 100644 --- a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx +++ b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.tsx @@ -1,20 +1,20 @@ import { useState } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableGrowingClass from "@ui5/webcomponents/dist/TableGrowing.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableGrowing = createReactComponent(TableGrowingClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); const MAX_GROW = 20; @@ -66,103 +66,103 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {extraRows.map((row) => ( - + - + Technocom - + 32 x 21 x 4 cm - + - + ))} diff --git a/packages/website/docs/_samples/main/Table/Selection/main.js b/packages/website/docs/_samples/main/Table/Selection/main.js index 89d32b1a8118..d6218bb338ed 100644 --- a/packages/website/docs/_samples/main/Table/Selection/main.js +++ b/packages/website/docs/_samples/main/Table/Selection/main.js @@ -2,10 +2,10 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; import "@ui5/webcomponents/dist/TableSelection.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; import "@ui5/webcomponents/dist/ComboBox.js"; import "@ui5/webcomponents/dist/ComboBoxItem.js"; +import "@ui5/webcomponents/dist/Text.js"; const selectionFeature = document.getElementById("selection"); const selectionGroup = document.getElementById("selectionGroup"); diff --git a/packages/website/docs/_samples/main/Table/Selection/sample.html b/packages/website/docs/_samples/main/Table/Selection/sample.html index 8a3ab932c9aa..0659c82a193c 100644 --- a/packages/website/docs/_samples/main/Table/Selection/sample.html +++ b/packages/website/docs/_samples/main/Table/Selection/sample.html @@ -28,25 +28,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards + Notebook Basic 17
HT-1001 + Smartcards - 4.5 KG - 1249 EUR + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/Selection/sample.tsx b/packages/website/docs/_samples/main/Table/Selection/sample.tsx index 8494aed5a303..fa8b02a39dbd 100644 --- a/packages/website/docs/_samples/main/Table/Selection/sample.tsx +++ b/packages/website/docs/_samples/main/Table/Selection/sample.tsx @@ -1,7 +1,6 @@ import { useRef } from "react"; import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import InputClass from "@ui5/webcomponents/dist/Input.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import RadioButtonClass from "@ui5/webcomponents/dist/RadioButton.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; @@ -9,9 +8,9 @@ import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import TableSelectionClass from "@ui5/webcomponents/dist/TableSelection.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; const Input = createReactComponent(InputClass); -const Label = createReactComponent(LabelClass); const RadioButton = createReactComponent(RadioButtonClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); @@ -19,6 +18,7 @@ const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const TableSelection = createReactComponent(TableSelectionClass); +const Text = createReactComponent(TextClass); function App() { const selectionRef = useRef(null); @@ -67,77 +67,77 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/SelectionMulti/main.js b/packages/website/docs/_samples/main/Table/SelectionMulti/main.js index 1bb75cfc3f9a..117fa4381aa2 100644 --- a/packages/website/docs/_samples/main/Table/SelectionMulti/main.js +++ b/packages/website/docs/_samples/main/Table/SelectionMulti/main.js @@ -5,6 +5,7 @@ import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; import "@ui5/webcomponents/dist/TableSelectionMulti.js"; import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; const selectionFeature = document.getElementById("selection"); let oldSelectedSet = selectionFeature.getSelectedAsSet(); diff --git a/packages/website/docs/_samples/main/Table/SelectionMulti/sample.html b/packages/website/docs/_samples/main/Table/SelectionMulti/sample.html index bf87e1eb736f..d5a3a10ecbab 100644 --- a/packages/website/docs/_samples/main/Table/SelectionMulti/sample.html +++ b/packages/website/docs/_samples/main/Table/SelectionMulti/sample.html @@ -35,25 +35,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/SelectionMulti/sample.tsx b/packages/website/docs/_samples/main/Table/SelectionMulti/sample.tsx index 607129024679..77b2fbd12e8d 100644 --- a/packages/website/docs/_samples/main/Table/SelectionMulti/sample.tsx +++ b/packages/website/docs/_samples/main/Table/SelectionMulti/sample.tsx @@ -8,6 +8,7 @@ import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import TableSelectionMultiClass from "@ui5/webcomponents/dist/TableSelectionMulti.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; const Label = createReactComponent(LabelClass); const RadioButton = createReactComponent(RadioButtonClass); @@ -17,6 +18,7 @@ const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const TableSelectionMulti = createReactComponent(TableSelectionMultiClass); +const Text = createReactComponent(TextClass); function App() { const selectionRef = useRef(null); @@ -123,77 +125,77 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/SelectionSingle/main.js b/packages/website/docs/_samples/main/Table/SelectionSingle/main.js index ff3949bd942d..e2d434ed792e 100644 --- a/packages/website/docs/_samples/main/Table/SelectionSingle/main.js +++ b/packages/website/docs/_samples/main/Table/SelectionSingle/main.js @@ -5,6 +5,7 @@ import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; import "@ui5/webcomponents/dist/TableSelectionSingle.js"; import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Text.js"; const selectionFeature = document.getElementById("selection"); selectionFeature.addEventListener("change", (e) => { diff --git a/packages/website/docs/_samples/main/Table/SelectionSingle/sample.html b/packages/website/docs/_samples/main/Table/SelectionSingle/sample.html index 18238e8ba951..acfc3338c0bc 100644 --- a/packages/website/docs/_samples/main/Table/SelectionSingle/sample.html +++ b/packages/website/docs/_samples/main/Table/SelectionSingle/sample.html @@ -29,25 +29,25 @@ Price - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/SelectionSingle/sample.tsx b/packages/website/docs/_samples/main/Table/SelectionSingle/sample.tsx index 8827962230f5..9a2bf03acdeb 100644 --- a/packages/website/docs/_samples/main/Table/SelectionSingle/sample.tsx +++ b/packages/website/docs/_samples/main/Table/SelectionSingle/sample.tsx @@ -8,6 +8,7 @@ import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import TableSelectionSingleClass from "@ui5/webcomponents/dist/TableSelectionSingle.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; const Label = createReactComponent(LabelClass); const RadioButton = createReactComponent(RadioButtonClass); @@ -17,6 +18,7 @@ const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const TableSelectionSingle = createReactComponent(TableSelectionSingleClass); +const Text = createReactComponent(TextClass); function App() { const selectionRef = useRef(null); @@ -82,77 +84,77 @@ function App() { - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/StickyHeader/main.js b/packages/website/docs/_samples/main/Table/StickyHeader/main.js index a30264111081..89e08372a7d1 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeader/main.js +++ b/packages/website/docs/_samples/main/Table/StickyHeader/main.js @@ -2,6 +2,6 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableGrowing.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; -import "@ui5/webcomponents/dist/Title.js"; \ No newline at end of file +import "@ui5/webcomponents/dist/Title.js"; +import "@ui5/webcomponents/dist/Text.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Table/StickyHeader/sample.html b/packages/website/docs/_samples/main/Table/StickyHeader/sample.html index c4ae761deb9a..46a032aacbda 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeader/sample.html +++ b/packages/website/docs/_samples/main/Table/StickyHeader/sample.html @@ -20,46 +20,46 @@ - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR - Notebook Basic 19
HT-1003 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 19
HT-1003 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 20
HT-1004 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 20
HT-1004 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 21
HT-1005 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 21
HT-1005 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/StickyHeader/sample.tsx b/packages/website/docs/_samples/main/Table/StickyHeader/sample.tsx index ae67eb077791..f3b4c01ae0ad 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeader/sample.tsx +++ b/packages/website/docs/_samples/main/Table/StickyHeader/sample.tsx @@ -1,17 +1,17 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); +const Text = createReactComponent(TextClass); function App() { return ( @@ -31,152 +31,152 @@ function App() { {/* playground-fold */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */} diff --git a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/main.js b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/main.js index 6fa9d6602a1b..bc688cfb7ef2 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/main.js +++ b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/main.js @@ -2,7 +2,7 @@ import "@ui5/webcomponents/dist/Table.js"; import "@ui5/webcomponents/dist/TableGrowing.js"; import "@ui5/webcomponents/dist/TableHeaderRow.js"; import "@ui5/webcomponents/dist/TableHeaderCell.js"; -import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents/dist/Input.js"; import "@ui5/webcomponents/dist/Title.js"; -import "@ui5/webcomponents/dist/Bar.js"; \ No newline at end of file +import "@ui5/webcomponents/dist/Bar.js"; +import "@ui5/webcomponents/dist/Text.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.html b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.html index a3338909cc74..67d1d21ea317 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.html +++ b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.html @@ -24,46 +24,46 @@ - Notebook Basic 15
HT-1000 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 15
HT-1000 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 17
HT-1001 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 17
HT-1001 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 18
HT-1002 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 18
HT-1002 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR - Notebook Basic 19
HT-1003 - Very Best Screens - 30 x 18 x 3 cm - 4.2 KG - 956 EUR + Notebook Basic 19
HT-1003 + Very Best Screens + 30 x 18 x 3 cm + 4.2 KG + 956 EUR - Notebook Basic 20
HT-1004 - Smartcards - 29 x 17 x 3.1 cm - 4.5 KG - 1249 EUR + Notebook Basic 20
HT-1004 + Smartcards + 29 x 17 x 3.1 cm + 4.5 KG + 1249 EUR - Notebook Basic 21
HT-1005 - Technocom - 32 x 21 x 4 cm - 3.7 KG - 29 EUR + Notebook Basic 21
HT-1005 + Technocom + 32 x 21 x 4 cm + 3.7 KG + 29 EUR diff --git a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx index f4cdc713535e..f8609d173081 100644 --- a/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx +++ b/packages/website/docs/_samples/main/Table/StickyHeaderContainer/sample.tsx @@ -1,21 +1,21 @@ import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; import BarClass from "@ui5/webcomponents/dist/Bar.js"; -import LabelClass from "@ui5/webcomponents/dist/Label.js"; import TableClass from "@ui5/webcomponents/dist/Table.js"; import TableCellClass from "@ui5/webcomponents/dist/TableCell.js"; import TableHeaderCellClass from "@ui5/webcomponents/dist/TableHeaderCell.js"; import TableHeaderRowClass from "@ui5/webcomponents/dist/TableHeaderRow.js"; import TableRowClass from "@ui5/webcomponents/dist/TableRow.js"; import TitleClass from "@ui5/webcomponents/dist/Title.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; const Bar = createReactComponent(BarClass); -const Label = createReactComponent(LabelClass); const Table = createReactComponent(TableClass); const TableCell = createReactComponent(TableCellClass); const TableHeaderCell = createReactComponent(TableHeaderCellClass); const TableHeaderRow = createReactComponent(TableHeaderRowClass); const TableRow = createReactComponent(TableRowClass); const Title = createReactComponent(TitleClass); +const Text = createReactComponent(TextClass); function App() { return ( @@ -46,152 +46,152 @@ function App() { {/* playground-fold */} - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + - + - + Very Best Screens - + 30 x 18 x 3 cm - + - + - + - + Smartcards - + 29 x 17 x 3.1 cm - + - + - + - + Technocom - + 32 x 21 x 4 cm - + - + {/* playground-fold-end */}