From 4a3965388cdafcb72b475d38d344ccf49d26ae9d Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Fri, 22 Mar 2024 13:51:56 +0200 Subject: [PATCH 1/2] refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType --- packages/main/src/Carousel.ts | 8 ++++---- ...PageIndicatorStyle.ts => CarouselPageIndicatorType.ts} | 6 +++--- packages/main/test/pages/Carousel.html | 4 ++-- packages/main/test/specs/Carousel.spec.js | 2 +- .../playground/_stories/main/Carousel/Carousel.stories.ts | 2 +- .../_samples/main/Carousel/PageIndicatorType/sample.html | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) rename packages/main/src/types/{CarouselPageIndicatorStyle.ts => CarouselPageIndicatorType.ts} (77%) diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index e1684d2fc1c8..3b99a4d2f650 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -29,7 +29,7 @@ import { CAROUSEL_NEXT_ARROW_TEXT, } from "./generated/i18n/i18n-defaults.js"; import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js"; -import CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js"; +import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js"; import BackgroundDesign from "./types/BackgroundDesign.js"; import BorderDesign from "./types/BorderDesign.js"; import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js"; @@ -189,8 +189,8 @@ class Carousel extends UI5Element { * @default "Default" * @public */ - @property({ type: CarouselPageIndicatorStyle, defaultValue: CarouselPageIndicatorStyle.Default }) - pageIndicatorStyle!: `${CarouselPageIndicatorStyle}`; + @property({ type: CarouselPageIndicatorType, defaultValue: CarouselPageIndicatorType.Default }) + pageIndicatorType!: `${CarouselPageIndicatorType}`; /** * Defines the carousel's background design. @@ -615,7 +615,7 @@ class Carousel extends UI5Element { } get isPageTypeDots() { - if (this.pageIndicatorStyle === CarouselPageIndicatorStyle.Numeric) { + if (this.pageIndicatorType === CarouselPageIndicatorType.Numeric) { return false; } diff --git a/packages/main/src/types/CarouselPageIndicatorStyle.ts b/packages/main/src/types/CarouselPageIndicatorType.ts similarity index 77% rename from packages/main/src/types/CarouselPageIndicatorStyle.ts rename to packages/main/src/types/CarouselPageIndicatorType.ts index a1d6dadb6785..fb61ec75af04 100644 --- a/packages/main/src/types/CarouselPageIndicatorStyle.ts +++ b/packages/main/src/types/CarouselPageIndicatorType.ts @@ -1,8 +1,8 @@ /** - * Different Carousel page indicator styles. + * Different Carousel page indicator types. * @public */ -enum CarouselPageIndicatorStyle { +enum CarouselPageIndicatorType { /** * The page indicator will be visualized as dots if there are fewer than 9 pages. * If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y) @@ -17,4 +17,4 @@ enum CarouselPageIndicatorStyle { Numeric = "Numeric", } -export default CarouselPageIndicatorStyle; +export default CarouselPageIndicatorType; diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html index e27bc366e3ca..600859285dfb 100644 --- a/packages/main/test/pages/Carousel.html +++ b/packages/main/test/pages/Carousel.html @@ -448,8 +448,8 @@ - Carousel with Numeric style page indicator - + Carousel with Numeric type page indicator + Button 1 Button 2 diff --git a/packages/main/test/specs/Carousel.spec.js b/packages/main/test/specs/Carousel.spec.js index dfad786f460f..4bc4e3bd6eee 100644 --- a/packages/main/test/specs/Carousel.spec.js +++ b/packages/main/test/specs/Carousel.spec.js @@ -191,7 +191,7 @@ describe("Carousel general interaction", () => { assert.strictEqual(await eventCounter.getProperty("value"), "6", "The navigate event is not fired as no previous item."); }); - it("page-indicator-style property", async () => { + it("page-indicator-type property", async () => { const carousel = await browser.$("#carouselNumericPageIndicator"); await carousel.scrollIntoView(); diff --git a/packages/playground/_stories/main/Carousel/Carousel.stories.ts b/packages/playground/_stories/main/Carousel/Carousel.stories.ts index df62d1dfd87b..06c017a32920 100644 --- a/packages/playground/_stories/main/Carousel/Carousel.stories.ts +++ b/packages/playground/_stories/main/Carousel/Carousel.stories.ts @@ -25,7 +25,7 @@ const Template: UI5StoryArgs = (args) => { items-per-page-l="${ifDefined(args.itemsPerPageL)}" ?hide-navigation-arrows="${ifDefined(args.hideNavigationArrows)}" ?hide-page-indicator="${ifDefined(args.hidePageIndicator)}" - page-indicator-style="${ifDefined(args.pageIndicatorStyle)}" + page-indicator-type="${ifDefined(args.pageIndicatorType)}" arrows-placement="${ifDefined(args.arrowsPlacement)}" > ${unsafeHTML(args.default)} diff --git a/packages/website/docs/_samples/main/Carousel/PageIndicatorType/sample.html b/packages/website/docs/_samples/main/Carousel/PageIndicatorType/sample.html index 7aedf4682d3c..85cd88535014 100644 --- a/packages/website/docs/_samples/main/Carousel/PageIndicatorType/sample.html +++ b/packages/website/docs/_samples/main/Carousel/PageIndicatorType/sample.html @@ -12,7 +12,7 @@ - + Landscape 1 Landscape 2 Bulb From 5578cb57e2bd5679fd699e1b0db1f2d37db4f541 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Fri, 22 Mar 2024 14:22:06 +0200 Subject: [PATCH 2/2] docs: update mdx --- packages/website/docs/_components_pages/main/Carousel.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/website/docs/_components_pages/main/Carousel.mdx b/packages/website/docs/_components_pages/main/Carousel.mdx index 9dec114dc4e1..21292dd26d6c 100644 --- a/packages/website/docs/_components_pages/main/Carousel.mdx +++ b/packages/website/docs/_components_pages/main/Carousel.mdx @@ -23,14 +23,14 @@ When the first page is reached, pressing "Backward" will navigate to the last pa ### Arrows Placement -When **pageIndicatorStyle** is set to **"Content"**, the arrows are placed on the sides of the current page. -When **pageIndicatorStyle** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator. +When **arrowsPlacement** is set to **"Content"**, the arrows are placed on the sides of the current page. +When **arrowsPlacement** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator. ### Page Indicator -When **pageIndicatorStyle** is set to **"Default"**, the page indicator appear as dots. -When **pageIndicatorStyle** is set to **"Numeric"** - as numbers. +When **pageIndicatorType** is set to **"Default"**, the page indicator appear as dots. +When **pageIndicatorType** is set to **"Numeric"** - as numbers.