Revert "[CPT-2535] Add property to place accordion icon on the left" (#…

…4526) * Revert "[CPT-2535] Add property to place accordion icon on the left (#4522)" This reverts commit 34f55d4. * Add changeset
toptal · Sep 5, 2024 · 310302a · 310302a
1 parent 889d0e6
commit 310302a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 157 deletions.
diff --git a/.changeset/violet-frogs-bake.md b/.changeset/violet-frogs-bake.md
@@ -0,0 +1,16 @@
+---
+'@toptal/picasso-rich-text-editor': major
+'@toptal/picasso-typography-overflow': major
+'@toptal/picasso-pictograms': major
+'@toptal/picasso-accordion': major
+'@toptal/picasso-file-input': major
+'@toptal/picasso-dropzone': major
+'@toptal/picasso-timeline': major
+'@toptal/picasso-forms': major
+'@toptal/picasso-page': major
+'@toptal/picasso-step': major
+'@toptal/picasso-tabs': major
+'@toptal/picasso': major
+---
+
+- revert add `expandIconPlacement` prop to Picasso Accordion
diff --git a/packages/base/Accordion/src/Accordion/Accordion.tsx b/packages/base/Accordion/src/Accordion/Accordion.tsx
@@ -18,7 +18,6 @@ import { AccordionDetails } from '../AccordionDetails'
 import styles from './styles'
 
 export type Borders = 'all' | 'middle' | 'none'
-export type ExpandIconPlacement = 'left' | 'right'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoAccordion',
@@ -45,8 +44,6 @@ export interface Props
   disabled?: boolean
   /** Customize icon indicating expanded status */
   expandIcon?: ReactElement
-  /** Customize icon placement */
-  expandIconPlacement?: ExpandIconPlacement
   /** Defines where the horizontal borders show */
   borders?: Borders
   /** Callback invoked when `Accordion` item is toggled */
@@ -78,7 +75,6 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
     expanded,
     defaultExpanded,
     expandIcon,
-    expandIconPlacement = 'right',
     borders,
     disabled,
     className,
@@ -114,23 +110,6 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
 
   const appliedBorders = children || expanded ? (borders as Borders) : 'none'
 
-  const renderExpandIcon = (expandIconPosition: 'left' | 'right') => {
-    if (expandIcon) {
-      return decorateWithExpandIconClasses(expandIcon, expandIconClass)
-    }
-
-    return (
-      <div
-        className={cx({
-          [classes.expandIconAlignTop]: true,
-          [classes.expandIconLeft]: expandIconPosition === 'left',
-        })}
-      >
-        <ButtonAction icon={<ArrowDownMinor16 className={expandIconClass} />} />
-      </div>
-    )
-  }
-
   return (
     <MUIAccordion
       {...rest}
@@ -150,17 +129,22 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
         <AccordionSummary
           classes={{
             root: classes.summary,
-            content: `${classes.content} ${
-              expandIconPlacement === 'left' ? classes.contentRight : ''
-            }`,
+            content: classes.content,
           }}
           expandIcon={null}
           onClick={handleSummaryClick}
           data-testid={testIds?.accordionSummary}
         >
-          {expandIconPlacement === 'left' && renderExpandIcon('left')}
           {children}
-          {expandIconPlacement === 'right' && renderExpandIcon('right')}
+          {expandIcon ? (
+            decorateWithExpandIconClasses(expandIcon, expandIconClass)
+          ) : (
+            <div className={classes.expandIconAlignTop}>
+              <ButtonAction
+                icon={<ArrowDownMinor16 className={expandIconClass} />}
+              />
+            </div>
+          )}
         </AccordionSummary>
       ) : (
         <EmptyAccordionSummary data-testid={testIds?.emptyAccordionSummary} />

diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
@@ -229,87 +229,3 @@ exports[`Accordion renders disabled 1`] = `
   </div>
 </div>
 `;
-
-exports[`Accordion renders expand icon on the left if the \`expandIconPlacement\` prop is provided 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersAll MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
-    >
-      <div
-        aria-disabled="false"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary"
-        role="button"
-        tabindex="0"
-      >
-        <div
-          class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoAccordion-contentRight"
-        >
-          <div
-            class="PicassoAccordion-expandIconAlignTop PicassoAccordion-expandIconLeft"
-          >
-            <button
-              aria-disabled="false"
-              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
-              data-component-type="button"
-              role="button"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="items-center inline-flex font-semibold text-blue text-md"
-              >
-                <svg
-                  class="PicassoSvgArrowDownMinor16-root text-[1.2em] flex-1 w-4 h-4 text-graphite PicassoAccordion-expandIcon"
-                  style="min-width: 16px; min-height: 16px;"
-                  viewBox="0 0 16 16"
-                >
-                  <path
-                    d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            class="PicassoAccordion-summaryWrapper"
-            data-testid="accordion-summary"
-          >
-            What is a dog?
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiCollapse-root MuiCollapse-hidden"
-        style="min-height: 0px;"
-      >
-        <div
-          class="MuiCollapse-wrapper"
-        >
-          <div
-            class="MuiCollapse-wrapperInner"
-          >
-            <div
-              role="region"
-            >
-              <div
-                class="flex p-0"
-              >
-                <div
-                  class="PicassoAccordion-detailsWrapper"
-                  data-testid="accordion-details"
-                >
-                  A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx b/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx
diff --git a/packages/base/Accordion/src/Accordion/story/index.jsx b/packages/base/Accordion/src/Accordion/story/index.jsx
@@ -53,15 +53,6 @@ page
     },
     'base/Accordion'
   )
-  .addExample(
-    'Accordion/story/ExpandIconPlacement.example.tsx',
-    {
-      title: 'Expand Icon Placement',
-      description:
-        'Accordion expand icon is placed to the right until the `expandIconPlacement` prop is set to `left`.',
-    },
-    'base/Accordion'
-  )
   .addExample(
     'Accordion/story/BorderedGroups.example.tsx',
     {

diff --git a/packages/base/Accordion/src/Accordion/styles.ts b/packages/base/Accordion/src/Accordion/styles.ts
@@ -78,9 +78,6 @@ export default ({ palette, typography }: Theme) => {
       height: '1.5em',
       alignSelf: 'flex-start',
     },
-    expandIconLeft: {
-      marginRight: '0.5em',
-    },
     summary: {
       color: palette.common.black,
     },
@@ -104,8 +101,5 @@ export default ({ palette, typography }: Theme) => {
       justifyContent: 'space-between',
       lineHeight: '1.5em',
     },
-    contentRight: {
-      justifyContent: 'normal',
-    },
   })
 }
diff --git a/packages/base/Accordion/src/Accordion/test.tsx b/packages/base/Accordion/src/Accordion/test.tsx
@@ -77,12 +77,6 @@ describe('Accordion', () => {
     expect(handleChange).toHaveBeenCalledTimes(3)
   })
 
-  it('renders expand icon on the left if the `expandIconPlacement` prop is provided', () => {
-    const { container } = renderAccordion({ expandIconPlacement: 'left' })
-
-    expect(container).toMatchSnapshot()
-  })
-
   it('renders disabled', async () => {
     const { container } = renderAccordion({ disabled: true })