Button text shouldn't be uppercase

tkrotoff commented 1 year ago

Button text shouldn't be uppercase (at least by default)

Google (Chrome, web), Amazon, Microsoft (Windows, web), GitHub, Apple (iOS, macOS, web), Android, Facebook, KDE/Qt, GNOME... don't do that

Other web UI libs don't do that: Bootstrap, Mantine, MUI BaseUI, Spectrum, Chakra, Ant Design, PrimeReact, Grommet, Bulma, standard HTML...

Old Google Material (m2) did use uppercase buttons (and so old MUI). This is not the case anymore: https://m3.material.io/components/all-buttons

Without uppercase (padding should be reduced btw):

Also this makes btn-link inconsistent with link:

vs

saadeghi commented 1 year ago

Other web UI libs don't do that: Bootstrap, Mantine, MUI BaseUI, Spectrum, Chakra, Ant Design, PrimeReact, Grommet, Bulma, standard HTML...

Material design has uppercase button text by default: https://m2.material.io/components/buttons So does Material UI: https://mui.com/material-ui/react-button/

It's not uppercase in daisyUI by default. It is uppercase in daisyUI's built-in themes.
But you don't have to use the built-in themes. You can customize them or you can make your own theme and use "--btn-text-case": "none" CSS variable if you don't want uppercase text:

// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],

  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
          "--btn-text-case": "none",
        },
      },
    ],
  },
}

tkrotoff commented 1 year ago

Material design has uppercase button text by default

Material Design dropped uppercase buttons: https://m3.material.io/components/all-buttons

As for MUI it is based on old Material Design v2 guidelines: new v6 will be based on Material Design v3 guidelines. Also by the same team, BaseUI and JoyUI don't have uppercase buttons.

saadeghi commented 1 year ago

I didn't know that.

However I don't see any reasons to drop the uppercase for the built-in default theme.
Some people prefer uppercase, some don't.
Changing this variable for the built-in themes affects all the websites made by daisyUI that use the default themes and this decision is not going to be in favor of for the people who prefer uppercase by default.

It's easy to change the CSS variable if you don't like the uppercase

tkrotoff commented 1 year ago

Defaults should be carefully considered: they should embody the best practices (mainly accessibility here) and not the author's personal preferences. This is what makes the difference between a good and an excellent product.

It's not a question of "easy to change if you don't like uppercase".

Beside uppercase buttons, borderless inputs by default is also bad.

https://coyleandrew.medium.com/form-design-best-practices-9525c321d759#5759

Others don't do that: Bootstrap, Mantine, MUI BaseUI, MUI JoyUI, Spectrum, Chakra, Ant Design, PrimeReact, Bulma, standard HTML, Qt/KDE, GNOME/GTK+, Apple, Microsoft...

When there is a consensus you need strong reasons not to follow them.

saadeghi commented 1 year ago

I think I should make something clear here.
daisyUI is the library that provides the ability to make your own theme by defining colors (and other variables)

The built-in default themes only exist as a starting point to see how each component would look like with different colors and styles. I even made a theme generator page to encourage developers to make their own theme with custom colors and styles.

The uppercase text was not a random decision. It was already being used in Material design (used in various Google products and almost every Android)

The advantage of uppercase is gaining more attention for the buttons and makes it more obvious that it's an ACTION BUTTON. It is loud but I don't see any downside.

If there's a downside of having uppercase text for buttons, please let me know.

About inputs, it's important to make it obvious. It can be using borders or other design decisions. The article you mentioned is about forms. There are other ways to make an input obvious for example an icon, a placeholder text and a search button would make it obvious where is a search input. Design best practices are not absolute.

tkrotoff commented 1 year ago

The article you mentioned is about forms [...] Design best practices are not absolute

Don't miss the part where Google discover after a 4 months study and over 600 participants that fields should have a "rectangular (box) shape"

This is DaisyUI default field:

And users thinking "it's the default way so it must be the best way!"

Don't get me wrong: I love DaisyUI, its approach and the great work you put in it. I just think it could be better thx to sensible defaults.

saadeghi commented 1 year ago

And users thinking "it's the default way so it must be the best way!"

That wouldn't be a correct. The default is the bare minimum style of a component which can be modifier with modifier class names or Tailwind's utility classes.

It makes more sense if the default is without border and we use a modifier class name to add something (border) to it, that using a modifier class name to remove something from it.

tkrotoff commented 1 year ago

If there's a downside of having uppercase text for buttons, please let me know

https://material.angular.io/components/button/overview#capitalization

"[capitalizing] buttons [...] can cause issues in certain locales. [Also] using ALL CAPS in the text itself causes issues for screen-readers, which will read the text character-by-character"

^{when they say "According to the Material design spec" they are referring to the old spec - v2 instead of v3}

saadeghi commented 1 year ago

can cause issues in certain locales

If I'm going to do this change, I need more info? Which locales?

causes issues for screen-readers, which will read the text character-by-character

I haven't seen this issue with screen readers. Which screen reader software?

tkrotoff commented 1 year ago

I need more info

Couldn't find any details

Found these interesting comments that recaps all issues with ALL CAPS:

Found this in Angular Material repo (nothing new :-/):

tkrotoff commented 1 year ago

It makes more sense if the default is without border and we use a modifier class name to add something (border)

From a technical point of vue, yes it feels satisfying and clean. However not from the user (accessibility) point of vue given the Google study. So I would do the opposite (even if it's better from a technical point of vue to avoid negation):

<input class="input" /> // Bordered by default
<input class="input-borderless" />

<textarea class="textarea"></textarea> // Bordered by default
<textarea class="textarea-borderless"></textarea>

<select class="select"></select> // Bordered by default
<select class="select-borderless"></select>

btw, Tailwind already features border-none

saadeghi / daisyui

Button text shouldn't be uppercase #2187