[CPT-2535] Add property to place accordion icon on the left

[angelinastavniiciuc]

CPT-2535

Description

While working on Call Assistant modal there was a design where expand Accordion button is placed to the left, there was no possibility to add it via Picasso so we implemented workaround solution. In this PR we added this prop and provided an example for it.

How to test

• Temploy
• Open Picasso Accordion on Temploy
• Check Expand Icon Placement example
• Make sure that the icon is placed to the left

Screenshots

After.

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• n/a codemod is created and showcased in the changeset
• n/a test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ea5407

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@toptal/picasso-accordion	Minor
@toptal/picasso	Patch
@toptal/picasso-page	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[toptal-devbot]

Greetings from FX team, @angelinastavniiciuc 👋

Thank you so much for contributing 🙇

We have got high priority ticket generated on our Kanban board so we will do our best to make your experience supreme!

What's next? We will collaborate using this workflow. For you this practically means making sure DONE criteria is met and responding promptly to code review comments 😉

🙏 please, help us improve, rate your contributing experience after merge

[angelinastavniiciuc]

@toptal-anvil ping reviewers

[sashuk]

@angelinastavniiciuc Can you please confirm that Design Team approved this change? Is there a Figma or https://toptal.enterprise.slack.com/archives/CCC3GP6CC discussion for this decision?

Can you please also check why visual changes affect existing stories, can it be avoided?

[toptalwadiibasmi]

@angelinastavniiciuc Can you please confirm that Design Team approved this change? Is there a Figma or https://toptal.enterprise.slack.com/archives/CCC3GP6CC discussion for this decision?

Can you please also check why visual changes affect existing stories? Can they be avoided?

Hello @sashuk, we created this ticket because we had to work around it in the Staff portal / Call assistant to place the accordion arrow on the left. It worked by overriding the styles.

1. The changes are supposed not to affect existing styles.
2. We did not open a conversation with the Design team, nor a figma designed specifically for Picasso component; however, you can find the accordion arrow placed on the left here: https://www.figma.com/design/ZQYgv6RusbmakdzxLEkeHx/Call-Assistant?node-id=5521-79029&node-type=FRAME&t=91POMFybF2sZQw8O-0
3. The goal is to propose a minor feature to do that via a property without causing any breaking changes to existing functionality.

What do you think?

[sashuk]

Hello, @toptalwadiibasmi! Let's double check with Design Team here, as the designs that Picasso is supposed to follow do not have this case

[angelinastavniiciuc]

@angelinastavniiciuc Can you please confirm that Design Team approved this change? Is there a Figma or https://toptal.enterprise.slack.com/archives/CCC3GP6CC discussion for this decision?

Can you please also check why visual changes affect existing stories, can it be avoided?

Hey @sashuk yep I asked design team for feedback about this change and they confirmed it, here is the thread https://toptal-core.slack.com/archives/C02AN1SSGK0/p1725363298979669
about visual checks changes will check and will update the PR !

[sashuk]

Thank you @angelinastavniiciuc for checking!

[sashuk]

Looks good, the only visual addition is approved

[angelinastavniiciuc]

@toptal-anvil ping reviewers

[toptalwadiibasmi]

Looks great!

[karlavdelgadof]

QA approved ✅