diff --git a/src/components/Disclosure/Disclosure.scss b/src/components/Disclosure/Disclosure.scss index f5cbfc00e..19a8e1ee5 100644 --- a/src/components/Disclosure/Disclosure.scss +++ b/src/components/Disclosure/Disclosure.scss @@ -30,7 +30,7 @@ $gap: 8px; outline: 2px solid var(--g-color-line-focus); } } - &__trigger_arrow-right { + &__trigger_arrow_end { flex-direction: row-reverse; } &__trigger_disabled { diff --git a/src/components/Disclosure/Disclosure.tsx b/src/components/Disclosure/Disclosure.tsx index 158494292..13993bdf8 100644 --- a/src/components/Disclosure/Disclosure.tsx +++ b/src/components/Disclosure/Disclosure.tsx @@ -11,7 +11,7 @@ import {b} from './cn'; import './Disclosure.scss'; export type DisclosureSize = 'm' | 'l' | 'xl'; -export type DisclosureArrowPosition = 'left' | 'right'; +export type DisclosureArrowPosition = 'left' | 'right' | 'start' | 'end'; export interface DisclosureComposition { Summary: typeof DisclosureSummary; @@ -49,7 +49,7 @@ export const Disclosure: React.FunctionComponent & DisclosureCo size = 'm', disabled = false, defaultExpanded = false, - arrowPosition = 'left', + arrowPosition = 'start', summary = '', className, keepMounted = true, diff --git a/src/components/Disclosure/DisclosureSummary/DisclosureSummary.tsx b/src/components/Disclosure/DisclosureSummary/DisclosureSummary.tsx index ffc5350e4..30421f21e 100644 --- a/src/components/Disclosure/DisclosureSummary/DisclosureSummary.tsx +++ b/src/components/Disclosure/DisclosureSummary/DisclosureSummary.tsx @@ -38,11 +38,19 @@ export function DefaultDisclosureSummary({ disabled, }: DisclosureSummaryRenderFunctionProps) { const {size, summary, arrowPosition} = useDisclosureAttributes(); + let arrowMod = arrowPosition; + + if (arrowMod === 'left') { + arrowMod = 'start'; + } + if (arrowMod === 'right') { + arrowMod = 'end'; + } return (