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(theme): theme prop is now available on each component #13718

Merged
merged 9 commits into from
Jun 1, 2021

Conversation

nekosaur
Copy link
Member

@nekosaur nekosaur commented May 27, 2021

Description

add theme prop to each component so that it can override provided value and start new context for it and all children

NOTE this will add two computed variables for every component. there is no way of conditionally providing values

fixes #13288

TODO

  • Make sure documentation is up-to-date and correct

Motivation and Context

How Has This Been Tested?

playground

Markup:

<template>
  <v-app class="fill-height">
    <v-card :theme="theme" title="foo" subtitle="bar">
      <v-btn @click="theme = theme === 'light' ? 'dark' : 'light'">toggle</v-btn>
    </v-card>

    <v-card theme="dark" title="foo" subtitle="foo" color="purple-darken-2" append-icon="$close" />

    <v-theme-provider theme="dark" with-background>
      <v-card title="foo" subtitle="bar" class="ma-10" />
    </v-theme-provider>

    <v-card theme="dark" title="first">
      <v-card theme="light" title="second" class="ma-5">
        <v-card theme="dark" title="third" class="ma-5" />
      </v-card>
    </v-card>

    <v-card theme="dark" title="foo" subtitle="bar">
      <v-theme-provider theme="light">
        <v-card-actions>
          <v-btn color="primary">foo</v-btn>
        </v-card-actions>
      </v-theme-provider>
    </v-card>
  </v-app>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Playground',
    setup () {
      const theme = ref('light')

      return { theme }
    },
  }
</script>

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

  • The PR title is no longer than 64 characters.
  • The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
  • My code follows the code style of this project.
  • I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

@nekosaur nekosaur self-assigned this May 27, 2021
@nekosaur nekosaur added this to In progress in Vuetify 3 - Titan via automation May 27, 2021
@nekosaur nekosaur added this to the v3.0.0 milestone May 27, 2021
Copy link
Member

@johnleider johnleider left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@glen-84
Copy link

glen-84 commented May 27, 2021

Closes #13288. (?)

@nekosaur nekosaur marked this pull request as ready for review May 28, 2021 17:32
Copy link
Member

@johnleider johnleider left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Any api-generator updates that need to be made?

packages/docs/src/pages/en/components/theme-providers.md Outdated Show resolved Hide resolved
packages/docs/src/pages/en/features/theme.md Outdated Show resolved Hide resolved
Vuetify 3 - Titan automation moved this from In progress to Review in progress May 29, 2021
nekosaur and others added 2 commits May 30, 2021 09:59
Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
@nekosaur nekosaur requested a review from johnleider May 31, 2021 19:57
Vuetify 3 - Titan automation moved this from Review in progress to Reviewer approved Jun 1, 2021
@nekosaur nekosaur merged commit 67ea3ce into next Jun 1, 2021
Vuetify 3 - Titan automation moved this from Reviewer approved to Done Jun 1, 2021
@nekosaur nekosaur deleted the refactor/theme branch June 1, 2021 16:28
KaelWD pushed a commit that referenced this pull request Jun 1, 2021
Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

[Bug Report] Can't update theme in v-app v3-alpha
3 participants