Skip to content
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.

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

feat(draggable-container): add flexDirection prop #7102

Merged
merged 1 commit into from
Dec 4, 2024
Merged

Conversation

tomdavies73
Copy link
Contributor

fix #7089

Proposed behaviour

adds the flexDirection prop which provides consumers with the means to change the flex-direction css attribute from row to row-reverse or vice versa

Screenshot 2024-11-28 at 11 32 39

Current behaviour

Currently, consumers have no control over where the "draggable" icon is placed, and it is always rendered on the right-hand side by default

Screenshot 2024-11-28 at 11 32 32

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

const StyledIcon = styled(Icon)`
margin-left: auto;
`;
const StyledIcon = styled(Icon)``;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Do we need this anymore can we just render Icon?

@@ -46,6 +46,24 @@ export const DefaultStory: Story = () => (
);
DefaultStory.storyName = "Default";

export const FlexDirectionStory: Story = () => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: it might be worth changing the children a bit here so when a user drags it's obvious the order has been updated etc

@DipperTheDan DipperTheDan self-requested a review November 28, 2024 13:31
Copy link
Contributor

@DipperTheDan DipperTheDan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing more to add from me. Address the comments by @edleeks87 and I'll get this approved 😄

adds the flexDirection prop which provides consumers with the means to change the flex-direction css
attribute from row to row-reverse or vice versa

fix #7089
@tomdavies73 tomdavies73 merged commit 2f0cbb7 into master Dec 4, 2024
44 checks passed
@tomdavies73 tomdavies73 deleted the FE-7003 branch December 4, 2024 10:39
@carbonci
Copy link
Collaborator

carbonci commented Dec 4, 2024

🎉 This PR is included in version 144.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Draggable Component Enhancements
6 participants