refactor: ripple should more closely resemble MD spec

[nekosaur]

Description

Updated ripple effect to hopefully more closely resemble material design ripple.

I was unable to find a good single solution for both rectangular and circular ripples, so I've added a circle option to the ripple directive. Someone smarter than me might have a better solution?

Motivation and Context

because (also fixes #5021)

How Has This Been Tested?

with provided markup

Markup:

<template>
  <v-app id="inspire">
    <v-container fluid fill-height>
      <v-layout column wrap fill-height align-center justify-center>
        <v-flex class="d-flex no-grow align-center">
          <v-card class="ma-3" ripple height="132px" width="232px"></v-card>
          <v-card :ripple="{ circle: true, center: true }" height="200px" width="200px" class="ma-3 border"></v-card>
          <v-btn color="purple" flat>baseline</v-btn>
          <v-btn>hello</v-btn>
          <v-btn icon large>
            <v-icon>home</v-icon>
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
    })
  }
</script>

<style lang="stylus">
  .border
    border-radius: 50% !important

  .no-grow
    flex-grow: 0

  .no-select
    user-select: none
</style>

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 feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have created a PR in the documentation with the necessary changes.

[codecov]

Codecov Report

Merging #5059 into dev will decrease coverage by 0.23%.
The diff coverage is 18.42%.

@@            Coverage Diff             @@
##              dev    #5059      +/-   ##
==========================================
- Coverage   89.08%   88.85%   -0.24%     
==========================================
  Files         235      238       +3     
  Lines        5563     5618      +55     
  Branches     1436     1447      +11     
==========================================
+ Hits         4956     4992      +36     
- Misses        483      502      +19     
  Partials      124      124

Impacted Files	Coverage Δ
src/mixins/routable.ts	100% <100%> (ø)	⬆️
src/components/VBtn/VBtn.ts	100% <100%> (ø)	⬆️
src/directives/ripple.ts	35.77% <6.06%> (-6.27%)	⬇️
src/components/index.js	100% <0%> (ø)	⬆️
src/components/VTimeline/VTimelineItem.ts	100% <0%> (ø)
src/components/VTimeline/VTimeline.ts	100% <0%> (ø)
src/components/VTimeline/index.ts	100% <0%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9618f66...90b831f. Read the comment docs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord