feat(Disclosure): use logical properties (#1140)

gravity-ui · Dec 6, 2023 · a064970 · a064970
1 parent 8663c2d
commit a064970
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git 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
@@ -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<DisclosureProps> & 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
@@ -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 (
         <button
             type="button"
             aria-expanded={expanded}
-            className={b('trigger', {disabled, 'arrow-right': arrowPosition === 'right'})}
+            className={b('trigger', {disabled, arrow: arrowMod})}
             aria-controls={ariaControls}
             id={id}
             onClick={onClick}

diff --git a/src/components/Disclosure/README.md b/src/components/Disclosure/README.md
@@ -11,7 +11,7 @@ Disclosure component that shows and hides enclosed content.
 | disabled        | `Boolean`                     |          | `false` | Disabled state                                           |
 | defaultExpanded | `Boolean`                     |          | `false` | Default opening state                                    |
 | expanded        | `Boolean`                     |          |         | Controlled opening state                                 |
-| arrowPosition   | `left` `right`                |          | `left`  | Control position                                         |
+| arrowPosition   | `start` `end`                 |          | `start` | Control position                                         |
 | summary         | `String`                      |          |         | Content summary                                          |
 | keepMounted     | `Boolean`                     |          | `true`  | Keep content in DOM                                      |
 | onUpdate        | `(expanded: boolean) => void` |          |         | Callback fired when the expand/collapse state is changed |

diff --git a/src/components/Disclosure/__stories__/Disclosure.stories.tsx b/src/components/Disclosure/__stories__/Disclosure.stories.tsx
@@ -18,7 +18,7 @@ export default {
         summary: 'Default summary',
         size: 'm',
         disabled: false,
-        arrowPosition: 'left',
+        arrowPosition: 'start',
     },
 } as Meta;
 
@@ -47,8 +47,8 @@ export const Size = SizeTemplate.bind({});
 const ArrowPositionTemplate: StoryFn<DisclosureProps> = (args) => {
     return (
         <div className="disclosure-stories">
-            <Disclosure {...args} arrowPosition="left" />
-            <Disclosure {...args} arrowPosition="right" />
+            <Disclosure {...args} arrowPosition="start" />
+            <Disclosure {...args} arrowPosition="end" />
         </div>
     );
 };

diff --git a/src/components/Disclosure/__tests__/Disclosure .test.tsx b/src/components/Disclosure/__tests__/Disclosure .test.tsx
@@ -127,16 +127,16 @@ describe.only('Disclosure', () => {
         const text = screen.queryByText(content);
         expect(text).toBeInTheDocument();
     });
-    test('arrow on the left by default', () => {
+    test('arrow on the start position by default', () => {
         render(<Disclosure />);
         const disclosure = screen.getByRole('button');
 
-        expect(disclosure).not.toHaveClass('g-disclosure__trigger_arrow-right');
+        expect(disclosure).not.toHaveClass('g-disclosure__trigger_arrow_end');
     });
-    test('arrow on the right if arrowPosition=right', () => {
-        render(<Disclosure arrowPosition="right" />);
+    test('arrow on the end position if arrowPosition=end', () => {
+        render(<Disclosure arrowPosition="end" />);
         const disclosure = screen.getByRole('button');
 
-        expect(disclosure).toHaveClass('g-disclosure__trigger_arrow-right');
+        expect(disclosure).toHaveClass('g-disclosure__trigger_arrow_end');
     });
 });