Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VBtn): remove default text transform #21079

Draft
wants to merge 1 commit into
base: next
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/docs/auto-imports.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ declare global {
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const openCache: typeof import('./src/utils/pwa')['openCache']
const preferredLocale: typeof import('./src/utils/routes')['preferredLocale']
const propsToString: typeof import('./src/utils/helpers')['propsToString']
Expand Down Expand Up @@ -125,10 +126,12 @@ declare global {
const useGtag: typeof import('vue-gtag-next')['useGtag']
const useHttpStore: typeof import('@vuetify/one')['useHttpStore']
const useI18n: typeof import('vue-i18n')['useI18n']
const useId: typeof import('vue')['useId']
const useJobsStore: typeof import('./src/stores/jobs')['useJobsStore']
const useLink: typeof import('vue-router')['useLink']
const useLocaleStore: typeof import('./src/stores/locale')['useLocaleStore']
const useMadeWithVuetifyStore: typeof import('./src/stores/made-with-vuetify')['useMadeWithVuetifyStore']
const useModel: typeof import('vue')['useModel']
const useOneStore: typeof import('@vuetify/one')['useOneStore']
const usePinsStore: typeof import('./src/stores/pins')['usePinsStore']
const usePlayground: typeof import('./src/composables/playground')['usePlayground']
Expand All @@ -146,6 +149,7 @@ declare global {
const useSponsorsStore: typeof import('./src/stores/sponsors')['useSponsorsStore']
const useSpotStore: typeof import('./src/stores/spot')['useSpotStore']
const useTeamStore: typeof import('./src/stores/team')['useTeamStore']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const useTheme: typeof import('vuetify')['useTheme']
const useUserStore: typeof import('@vuetify/one')['useUserStore']
const wait: typeof import('./src/utils/helpers')['wait']
Expand Down
47 changes: 47 additions & 0 deletions packages/docs/src/pages/en/getting-started/upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,53 @@ Affected components:
- isValid
- items

### VBtn

The default text transform of _uppercase_ has been **removed**. To restore the previous behavior, set the `text-transform` prop to `uppercase`.

- Set it in the SASS variables for typography:

```scss
@use 'vuetify/settings' with (
$typography: (
'button': (
'text-transform': 'uppercase',
),
),
)
```

- Or set it in the SASS variables for buttons:

```scss
@use 'vuetify/settings' with (
$button-text-transform: 'uppercase',
)
```

- Set it as a global default:

```js
import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
defaults: {
VBtn: {
class: 'text-uppercase',
// or if you are using $utilities: false
style: 'text-transform: uppercase;',
},
},
})
```

- Manually type uppercase letters:

```diff
- <v-btn>button</v-btn>
+ <v-btn>BUTTON</v-btn>
```

### VSelect/VCombobox/VAutocomplete

#### `item` in slots has been renamed to `internalItem`
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/styles/settings/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ $typography: map-deep-merge(
'line-height': 2.6,
'letter-spacing': .0892857143em,
'font-family': $body-font-family,
'text-transform': uppercase
'text-transform': none
),
'caption': (
'size': .75rem,
Expand Down
Loading