Consistent and configurable OK/Cancel buttons

[techniq]

Currently components like DateRangeField and MultiSelectField have OK/Cancel or Cancel/Apply buttons...

DateRangeField	MultiSelectField

They should be...

• Consistently ordered
  • What should the default be? OK/Cancel (Windows) or Cancel/OK (Mac), runtime setting based on environment/etc?

Windows	Mac

• Locale translated
  • Support changing text as well (OK vs Apply, for example)
• Support variant / color defaults?
  • Should OK (primary) be fill/primary, and Cancel (secondary) be default/default, and allow it to be configured in settings()

Related:

• MultiSelect[Field] improvements #149
• Add ability to set default props on some components #230

[dimfeld]

What should the default be? OK/Cancel (Windows) or Cancel/OK (Mac), runtime setting based on environment/etc?

Definitely don't change based on environment, it should be consistent. Otherwise you end up with different button order on desktop vs. phone for example which is disorienting.

The choice of order doesn't really matter much IMO. There are good arguments for both directions and neither really wins out.

I think the one thing that maybe tips it toward the Cancel/OK order is that when you have additional buttons in that row, the additional buttons go on the left, and then the Cancel and OK buttons are always in the same position. Minor point though.

[dimfeld]

BTW it sounds like having OkButton and CancelButton components would probably be a good idea here. Thin wrappers around Button but it would simplify the customization and ensure consistent application of i18n and so on.

[techniq]

BTW it sounds like having OkButton and CancelButton components would probably be a good idea here. Thin wrappers around Button but it would simplify the customization and ensure consistent application of i18n and so on.

That's interesting... and would make styling straight forward.