From 5a3253a07090d1de3848f18e007587ccd50bd203 Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 13:27:15 +0100 Subject: [PATCH 01/12] back-button: flip icon on rtl --- core/src/components/back-button/back-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 043ea045949..80b239587e8 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -149,7 +149,7 @@ export class BackButton implements ComponentInterface, ButtonInterface { aria-label={ariaLabel} > - {backButtonIcon && } + {backButtonIcon && } {backButtonText && } {mode === 'md' && } From ff525e94770229f946c08c7eff405778f7a14edf Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 13:28:31 +0100 Subject: [PATCH 02/12] item: flip detail icon on rtl --- core/src/components/item/item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 345ebb54dab..4b8ec9c0ac5 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -369,7 +369,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac - {showDetail && } + {showDetail && }
{canActivate && mode === 'md' && } From 68312bdb59eef5880625423085f42bff0a7e027a Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 13:29:39 +0100 Subject: [PATCH 03/12] breadcrumb: flip separator icon on rtl --- core/src/components/breadcrumb/breadcrumb.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx index 706502a50ec..0e512e9b438 100644 --- a/core/src/components/breadcrumb/breadcrumb.tsx +++ b/core/src/components/breadcrumb/breadcrumb.tsx @@ -212,7 +212,7 @@ export class Breadcrumb implements ComponentInterface { { mode === 'ios' - ? + ? : / } From c8e19e9a5721a560d0b29895e2b30b4c582d1148 Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 20:28:42 +0100 Subject: [PATCH 04/12] back-button: fix flip icon on RTL Flip the back button icon on RTL when there's not a custom icon --- core/src/components/back-button/back-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 80b239587e8..072f13b02db 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -149,7 +149,7 @@ export class BackButton implements ComponentInterface, ButtonInterface { aria-label={ariaLabel} > - {backButtonIcon && } + {backButtonIcon && } {backButtonText && } {mode === 'md' && } From 986f29aa22f5c75d8e575de1dd1439625d6e5007 Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 20:42:08 +0100 Subject: [PATCH 05/12] back-button: fix missing icon variable --- core/src/components/back-button/back-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 072f13b02db..7e4116f3ff9 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -121,7 +121,7 @@ export class BackButton implements ComponentInterface, ButtonInterface { } render() { - const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, inheritedAttributes } = this; + const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes } = this; const showBackButton = defaultHref !== undefined; const mode = getIonMode(this); const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back'; From 5886c2621f4cdb9022bb757ac7455bf28fad8087 Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 3 Feb 2022 20:48:38 +0100 Subject: [PATCH 06/12] Item: fix flip default detail icon on RTL fix flip the item default detail icon on RTL when there's not a custom icon --- core/src/components/item/item.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 4b8ec9c0ac5..7d88c26216e 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -62,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac /** * The icon to use when `detail` is set to `true`. */ - @Prop() detailIcon = chevronForward; + @Prop() detailIcon?: string | null; /** * If `true`, the user cannot interact with the item. @@ -217,6 +217,10 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac }); } + get itemDetailIcon() { + return this.detailIcon ?? chevronForward; + } + // If the item contains multiple clickable elements and/or inputs, then the item // should not have a clickable input cover over the entire item to prevent // interfering with their individual click events @@ -310,7 +314,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } render() { - const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection } = this; + const { counterString, detail, detailIcon, download, fill, itemDetailIcon, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection } = this; const childStyles = {} as any; const mode = getIonMode(this); const clickable = this.isClickable(); @@ -369,7 +373,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac - {showDetail && } + {showDetail && }
{canActivate && mode === 'md' && } From 255cd4b0a0327ea36da64b0f4db6a3e3bd9f0b1e Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 10 Feb 2022 19:43:33 +0100 Subject: [PATCH 07/12] fix defaultIcon type --- core/src/components/item/item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 7d88c26216e..72eb2173722 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -62,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac /** * The icon to use when `detail` is set to `true`. */ - @Prop() detailIcon?: string | null; + @Prop() detailIcon?: string; /** * If `true`, the user cannot interact with the item. From 661219d32e2c57f183f9219995fa11a84bea3cd6 Mon Sep 17 00:00:00 2001 From: "Wael M.B" Date: Thu, 10 Feb 2022 19:53:51 +0100 Subject: [PATCH 08/12] fix rtl without breaking changes --- core/src/components/item/item.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 72eb2173722..7254f9be2cb 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -62,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac /** * The icon to use when `detail` is set to `true`. */ - @Prop() detailIcon?: string; + @Prop() detailIcon = chevronForward; /** * If `true`, the user cannot interact with the item. @@ -217,10 +217,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac }); } - get itemDetailIcon() { - return this.detailIcon ?? chevronForward; - } - // If the item contains multiple clickable elements and/or inputs, then the item // should not have a clickable input cover over the entire item to prevent // interfering with their individual click events @@ -314,7 +310,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac } render() { - const { counterString, detail, detailIcon, download, fill, itemDetailIcon, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection } = this; + const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection } = this; const childStyles = {} as any; const mode = getIonMode(this); const clickable = this.isClickable(); @@ -373,7 +369,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac - {showDetail && } + {showDetail && }
{canActivate && mode === 'md' && } From c6cf8d2664db180366216c46b552686f590793e7 Mon Sep 17 00:00:00 2001 From: Wael Mohamed BETTAYEB Date: Sun, 13 Feb 2022 12:32:01 +0100 Subject: [PATCH 09/12] fix BackButton: strict boolean on flip-rtl --- core/src/components/back-button/back-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 7e4116f3ff9..d0dfa521417 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -149,7 +149,7 @@ export class BackButton implements ComponentInterface, ButtonInterface { aria-label={ariaLabel} > - {backButtonIcon && } + {backButtonIcon && } {backButtonText && } {mode === 'md' && } From 1b149bdbc3ae2a7ee501027a83d82f1799aeccdc Mon Sep 17 00:00:00 2001 From: Wael Mohamed BETTAYEB Date: Sun, 13 Feb 2022 12:35:05 +0100 Subject: [PATCH 10/12] test Item: add item with details component --- core/src/components/item/test/basic/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html index e5aa87f5feb..3ecf534f127 100644 --- a/core/src/components/item/test/basic/index.html +++ b/core/src/components/item/test/basic/index.html @@ -120,6 +120,10 @@

H4 Title Text

Item with overflow scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin. + + + Item with details. + From ea74aad90ea99a5594c3907cfa4e2d42fa18305d Mon Sep 17 00:00:00 2001 From: Wael Mohamed BETTAYEB Date: Sun, 13 Feb 2022 12:54:48 +0100 Subject: [PATCH 11/12] test BackButton: add rtl e2e test --- core/src/components/back-button/test/basic/e2e.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/core/src/components/back-button/test/basic/e2e.ts b/core/src/components/back-button/test/basic/e2e.ts index 5b813c6da8d..5f007e1d762 100644 --- a/core/src/components/back-button/test/basic/e2e.ts +++ b/core/src/components/back-button/test/basic/e2e.ts @@ -8,3 +8,12 @@ test('back-button: basic', async () => { const compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); }); + +test('back-button: basic-rtl', async () => { + const page = await newE2EPage({ + url: '/src/components/back-button/test/basic?ionic:_testing=true&rtl=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); From bfbf409b812225e33ac52a43a8376c89f1de0009 Mon Sep 17 00:00:00 2001 From: Wael Mohamed BETTAYEB Date: Sun, 13 Feb 2022 12:54:58 +0100 Subject: [PATCH 12/12] test Breadcrumbs: add rtl e2e test --- core/src/components/breadcrumbs/test/basic/e2e.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/core/src/components/breadcrumbs/test/basic/e2e.ts b/core/src/components/breadcrumbs/test/basic/e2e.ts index 1c206b37287..e4fcab9a75d 100644 --- a/core/src/components/breadcrumbs/test/basic/e2e.ts +++ b/core/src/components/breadcrumbs/test/basic/e2e.ts @@ -8,3 +8,12 @@ test('breadcrumbs: basic', async () => { const compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); }); + +test('breadcrumbs: basic-rtl', async () => { + const page = await newE2EPage({ + url: '/src/components/breadcrumbs/test/basic?ionic:_testing=true&rtl=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); \ No newline at end of file