Skip to content

fix(dialog, flow-item, panel): fix iconFlipRtl not working in RTL contexts #12668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Amretasre002762670 merged 5 commits into from
Aug 11, 2025
Merged

fix(dialog, flow-item, panel): fix iconFlipRtl not working in RTL contexts #12668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d10d29b
fix(panel): fix missing property on calcite-icon
Amretasre002762670 Aug 7, 2025
a9ac0ac
removed only from test case
Amretasre002762670 Aug 7, 2025
c4ae484
removed unit test and updated screenshot test
Amretasre002762670 Aug 8, 2025
08f4d00
Merge branch 'dev' into Amretasre002762670/iconFlipRtl-not-flipping-f…
Amretasre002762670 Aug 11, 2025
82c42ff
Merge branch 'dev' into Amretasre002762670/iconFlipRtl-not-flipping-f…
Amretasre002762670 Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/calcite-components/src/components/panel/panel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,6 @@ export default {
},
};

const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;

const contentHTML = html`
<p>
Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
Expand Down Expand Up @@ -93,7 +91,7 @@ const footerHTML = html`
<calcite-button slot="${SLOTS.footerEnd}" width="half">Footer end</calcite-button>
`;

const panelContent = `${headerHTML}
const panelContent = `
<calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
<calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
${contentHTML}
Expand Down Expand Up @@ -153,7 +151,15 @@ export const withDescriptionAndIcon = (): string => html`
`;

export const darkModeRTL_TestOnly = (): string => html`
<calcite-panel collapse-direction="down" height-scale="m" dir="rtl" class="calcite-mode-dark">
<calcite-panel
collapse-direction="down"
height-scale="m"
dir="rtl"
class="calcite-mode-dark"
heading="Heading"
icon="arrow-bold-left"
icon-flip-rtl
>
${panelContent}
</calcite-panel>
`;
Expand Down
7 changes: 6 additions & 1 deletion packages/calcite-components/src/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,12 @@ export class Panel extends LitElement implements InteractiveComponent {
const { heading, headingLevel, description, hasHeaderContent, icon, scale } = this;

const iconNode = icon ? (
<calcite-icon class={CSS.icon} icon={icon} scale={getIconScale(scale)} />
<calcite-icon
class={CSS.icon}
flipRtl={this.iconFlipRtl}
icon={icon}
scale={getIconScale(scale)}
/>
) : null;

const headingNode = heading ? (
Expand Down
Loading