fix: use a rounded corner decoration by default for ShadTabs to match the official shadcn implementation #203
Conversation
# Conflicts: # lib/src/components/slider.dart
… the official shadcn implementation
|
Just noticed that I should probably also change ShadDefaultThemeNoSecondaryBorderVariant |
|
Please enable the dart formatter otherwise I can't figure out what lines you changed. Yes the no-secondary-border-variant must be adapted too, you can test it from the example providing |
|
I did format it, but seemingly my ide formatter somehow did it differently than the command line formatter, I'll do that after changing the other file in the final commit. |
…and fix indentation
|
Alright should be done now. |
| @@ -756,6 +756,9 @@ class ShadDefaultThemeNoSecondaryBorderVariant extends ShadThemeVariant { | |||
| tabForegroundColor: colorScheme.foreground, | |||
| tabSelectedForegroundColor: colorScheme.foreground, | |||
| tabSelectedShadows: ShadShadows.sm, | |||
| tabDecoration: ShadDecoration( | |||
| border: ShadBorder.all(radius: radius, width: 0), | |||
There was a problem hiding this comment.
Update the radius to 4
As you can see in the image above, the default radius used by ui.shadcn.com is 4px.
0.5 rem = 8 px
8px - 4px = 4px
There was a problem hiding this comment.
Just checked the source code and it uses rounded-sm which is 2px.
https://github.com/shadcn-ui/ui/blob/805ed4120a6a8ae6f6e9714cbd776e18eeba92c7/apps/www/registry/default/ui/tabs.tsx#L32C66-L32C76
So the source code and what is rendered on the docs is different.
No idea of what is supposed to be the right value.
Probably 4px is more elegant than just 2px
| @@ -728,6 +728,9 @@ class ShadDefaultThemeVariant extends ShadThemeVariant { | |||
| tabForegroundColor: colorScheme.foreground, | |||
| tabSelectedForegroundColor: colorScheme.foreground, | |||
| tabSelectedShadows: ShadShadows.sm, | |||
| tabDecoration: ShadDecoration( | |||
| border: ShadBorder.all(radius: radius, width: 0), | |||
There was a problem hiding this comment.
Update the radius to 4 as mentioned above
Comparing https://ui.shadcn.com/docs/components/tabs with https://flutter-shadcn-ui.mariuti.com/components/tabs/ shows the difference and I think it would be beneficial to adopt the original design because the sharp corners stand out quite a bit.