Skip to content

[Timeline][lab] Fix position alternate-reverse generated classname - #37678

Merged
ZeeshanTamboli merged 6 commits into
mui:masterfrom
ZeeshanTamboli:fix-timeline-position-alternate-reverse-classname
Jun 27, 2023
Merged

ZeeshanTamboli merged 6 commits into
mui:masterfrom
ZeeshanTamboli:fix-timeline-position-alternate-reverse-classname

Conversation

@ZeeshanTamboli

Copy link
Copy Markdown
Member

The classname generated for alternate-reverse class after adding it in #37311 should be .MuiTimeline-positionAlternateReverse, not .MuiTimeline-positionAlternate-reverse. The capitalize function only capitalizes the first letter of the first word and does not convert kebab-case to PascalCase.

@ZeeshanTamboli ZeeshanTamboli added type: bug It doesn't behave as expected. package: lab Specific to the lab. scope: timeline Changes related to the timeline. labels Jun 22, 2023
@mui-bot

mui-bot commented Jun 22, 2023 •

Copy link
Copy Markdown

Netlify deploy preview

https://deploy-preview-37678--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 2d3a4d4

@ZeeshanTamboli ZeeshanTamboli added the type: regression A bug, but worse, it used to behave as expected. label Jun 22, 2023
Comment on lines +3 to +6
export default function convertTimelinePositionToClass(position: string): string {
return position === 'alternate-reverse'
? 'positionAlternateReverse'
: `position${capitalize(position)}`;

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I'm unsure whether I should create a pascalize function specifically to convert kebab-case to PascalCase for this situation or simply keep the string positionAlternateReverse hardcoded here.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We can add a function to convert kebab case to pascal case in the utils package and use it in all occurrences where needed. Nice catch, btw 👍

@ZeeshanTamboli ZeeshanTamboli Jun 23, 2023 •

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Since there is only one occurrence in the whole code-base, would it be worth it to create a function?

@ZeeshanTamboli ZeeshanTamboli Jun 27, 2023 •

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I checked and found that it is only needed here. I think it is not worth it to create a util function just for this and so I am keeping the string hard-coded.

@ZeeshanTamboli
ZeeshanTamboli marked this pull request as ready for review June 22, 2023 15:53
@ZeeshanTamboli
ZeeshanTamboli requested a review from mnajdova June 22, 2023 15:53
@ZeeshanTamboli
ZeeshanTamboli merged commit f864cb4 into mui:master Jun 27, 2023
@ZeeshanTamboli
ZeeshanTamboli deleted the fix-timeline-position-alternate-reverse-classname branch June 27, 2023 06:37
@Sutar210599

Copy link
Copy Markdown

Hi @ZeeshanTamboli , is this the cause of Type '"alternate-reverse"' is not assignable to type '"left" | "right" | "alternate" error? The error is reproducible in the demo sandbox .

@ZeeshanTamboli ZeeshanTamboli changed the title [Timeline] Fix position alternate-reverse generated classname [Timeline][lab] Fix position alternate-reverse generated classname Jun 27, 2023
@ZeeshanTamboli

Copy link
Copy Markdown
Member Author

@Sutar210599 It is not related to this fix. The issue is that we added this feature in #37311 in the last release but we forgot to bump the version of @mui/lab package in v5.13.6 latest release - #37686.

@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Jun 27, 2023
@Sutar210599

Copy link
Copy Markdown

Ok, thanks.

@oliviertassinari oliviertassinari removed the type: bug It doesn't behave as expected. label Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: lab Specific to the lab. scope: timeline Changes related to the timeline. type: regression A bug, but worse, it used to behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants