Inconsistency of ShadContextMenuItem / ShadButton / ShadInput

[jezell]

ShadButton has icon + order policy, ShadContextMenuItem has leading + trailing, and ShadInput has prefix + suffix. Find myself wondering why they have such different interfaces when both represent a very similar concepts. Both menus and buttons might want leading or trailing icons for example, but there are two different ways to accomplish this.

Maybe could be aligned?

[nank1ro]

We could definitely align them. Order policy has been added just recently.
What rename/refactor do you suggest to go with?

[nank1ro]

Ok, first problem. I can't really rename the ShadButton's icon to leading.
That's because if the user provides only icon and not child, the size of the button is 40x40:

// theme
 @override
  ShadButtonSizesTheme buttonSizesTheme() {
    return const ShadButtonSizesTheme(
      regular: ShadButtonSizeTheme(
        height: 40,
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      ),
      sm: ShadButtonSizeTheme(
        height: 36,
        padding: EdgeInsets.symmetric(horizontal: 12),
      ),
      lg: ShadButtonSizeTheme(
        height: 44,
        padding: EdgeInsets.symmetric(horizontal: 32, vertical: 8),
      ),
      icon: ShadButtonSizeTheme(
        height: 40,
        width: 40,
        padding: EdgeInsets.zero,
      ),
    );
  }
  
 // component
   ShadButtonSizeTheme sizeTheme(
    ShadThemeData theme,
    ShadButtonSize size,
  ) {
    if (widget.icon != null && widget.child == null) {
      return buttonTheme(theme).sizesTheme?.icon ??
          theme.buttonSizesTheme.icon!;
    }
    switch (size) {
      case ShadButtonSize.sm:
        return buttonTheme(theme).sizesTheme?.sm ?? theme.buttonSizesTheme.sm!;
      case ShadButtonSize.lg:
        return buttonTheme(theme).sizesTheme?.lg ?? theme.buttonSizesTheme.lg!;
      case ShadButtonSize.regular:
        return buttonTheme(theme).sizesTheme?.regular ??
            theme.buttonSizesTheme.regular!;
    }
  }

If I rename it to leading, I don't have any way to know if you placed an icon in it. The same applies to trailing.
For instance, this is strictly following the specifications of the original shadcn button https://github.com/shadcn-ui/ui/blob/1081536246b44b6664f4c99bc3f1b3614e632841/apps/www/registry/default/ui/button.tsx#L8C317-L8C331

The only way to to this is by removing this behavior, and every time the user needs an icon button has to specify the button size to icon. I don't know if it's the right way.

---

UPDATE: In fact the icon button on the official shadcn ui specifies the size, it is not automatically inferred

<Button variant="outline" size="icon">
   <ChevronRight />
</Button>

I don't know if losing the ergonomics is a benefit or not, I'm really open to suggestions!

[mjablecnik]

If I rename it to leading, I don't have any way to know if you placed an icon in it. The same applies to trailing.

You cannot create another separate widget named as IconButton which will have only one icon param without leading and trailing?

Or variant icon? For example: Button.icon(Icons.add)

It is in Material Design and it works: https://api.flutter.dev/flutter/material/IconButton-class.html

[nank1ro]

You cannot create another separate widget named as IconButton which will have only one icon param without leading and trailing?
Or variant icon? For example: Button.icon(Icons.add)

Yes would probably go with the variant icon because the code is very similar, no need to introduce a new component, thanks for the suggestion 🙏

Update: I looked again at the code and I was wrong, every variant (primary, secondary, etc) can use an icon.

I think we can rename icon to leading, add trailing, and specify the icon size like shadcn does

<Button variant="outline" size="icon">
   <ChevronRight />
</Button>

If I add an IconButton, I would have to duplicate the logic (or I can just wrap the ShadButton and receive an icon and pass it as child).

The last thing I could do is having ShadButton.icon (primary style), ShadButton.secondaryIcon, ShadButton.ghostIcon and so on, but this may confuse

[mjablecnik]

The last thing I could do is having ShadButton.icon (primary style), ShadButton.secondaryIcon, ShadButton.ghostIcon and so on, but this may confuse

You can also create:

• ShadButton.icon(type: ButtonVariant.primary || ButtonVariant.secondary || ButtonVariant.ghost)
• ShadIconButton.primary
• ShadIconButton.secondary
• ShadIconButton.ghost
• etc...

For better understanding without confuse.

[nank1ro]

Ok, aligned in the v0.20.0

[jezell]

@nank1ro noticed ShadTab still uses old pattern with icon: while upgrading to 0.20

[nank1ro]

fixed in the v0.20.2