Repository navigation
feat: voice icon #7824
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <script setup lang="ts"> | ||
| import { computed } from 'vue' | ||
|
|
||
| defineOptions({ name: 'VoiceWaveIcon' }) | ||
|
|
||
| const props = withDefaults(defineProps<{ size?: number | string; color?: string }>(), { size: 24 }) | ||
|
|
||
| const waveSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size)) | ||
| </script> | ||
|
|
||
| <template> | ||
| <span class="voice-wave-icon shrink-0" :style="{ width: waveSize, height: waveSize, color }" aria-hidden="true"> | ||
| <template v-for="barIndex in 5" :key="barIndex"> | ||
| <span class="voice-wave-icon__bar" /> | ||
| </template> | ||
| </span> | ||
| </template> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .voice-wave-icon { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 10%; | ||
| vertical-align: middle; | ||
|
|
||
| &__bar { | ||
| width: 10%; | ||
| height: 40%; | ||
| flex-shrink: 0; | ||
| border-radius: 999px; | ||
| background: currentColor; | ||
| animation: voice-wave 1s ease-in-out infinite; | ||
|
|
||
| &:nth-child(2), | ||
| &:nth-child(4) { | ||
| height: 70%; | ||
| animation-delay: -0.2s; | ||
| } | ||
|
|
||
| &:nth-child(3) { | ||
| height: 100%; | ||
| animation-delay: -0.4s; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| animation: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @keyframes voice-wave { | ||
| 0%, | ||
| 100% { | ||
| transform: scaleY(0.45); | ||
| } | ||
|
|
||
| 50% { | ||
| transform: scaleY(1); | ||
| } | ||
| } | ||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is a review of the provided Vue component code, highlighting irregularities, potential issues, and optimization suggestions.
1. Critical Irregularity: Missing Keyframes Name Consistency
While not technically an error if consistent, it is a best practice to ensure the animation name in
animationmatches exactly with@keyframes. Here they match (voice-wave), so this is fine, but note thatanimation-delaywithout negative values on some bars may look disjointed. Currently, bars 1 and 5 have no delay, bar 2/4 have-0.2s, and bar 3 has-0.4s. This creates a wave effect starting from the center outward, which is visually intuitive. No change needed here unless specific timing is desired for outer bars.2. Potential Issue: Percentage-Based Heights +
scaleYAnimation Conflict.voice-wave-icon__barelements have fixed percentage heights (e.g.,height: 40%,70%,100%) relative to the parent container. The@keyframes voice-waveanimatestransform: scaleY().scaleY(0.45)is applied to a bar already at40%height, it becomes~18%of the parent's height. WhenscaleY(1)is applied, it returns to its original CSS-defined height. This means the bars do not actually reach equal visual peaks unless their base heights are equal. The "wave" will look uneven because Bar 1 starts small and grows, Bar 3 starts tall and shrinks slightly then grows to full.transform-origin: center bottom;and animating fromscaleY(min)toscaleY(max)or set all bars toheight: 100%and usescaleYvariations as the base state. However, the current approach is common for simple "audio visualizer" icons. Just be aware the visual "peak" height varies per bar due to differing base sizes.3. Accessibility & Semantics
aria-hidden="true"is correctly used since this is a decorative icon.role="img"if this icon conveys meaningful status (e.g., "voice active"), though usually, such status is conveyed by surrounding text or other ARIA states. For now,aria-hiddenis appropriate.4. Optimization: Template Loop Syntax
<template v-for="barIndex in 5" :key="barIndex">:key="barIndex"is correct. However, you can simplify if you don't need the index variable explicitly beyond keying. It’s fine as-is.5. Code Style & Best Practices
A. Prop Validation Enhancements
colorprop currently defaults toundefined. The template uses:style="{ ..., color }". Ifundefined, it might cause unintended inheritances or invalid CSS values depending on the browser. It’s safer to either:colorprop if inheritingcurrentColorfrom parent is intended.{ size: 24, color: 'currentColor' }.B. SCSS: Reduced Motion Fallback
heightvalues (40%, 70%, 100%). This is good—it preserves the visual shape without motion. However, ensure thetransformproperty isn’t stuck in a mid-animation state (it won’t be, since no animation is applied). This is correct.C. CSS Performance
current-colorusage is efficient.border-radius: 999pxensures pill shapes regardless of width/height changes—this is a robust trick.D. Gap Property
gap: 10%;insidedisplay: inline-flex;with percentage gaps can sometimes behave unexpectedly depending on the flex context and container sizing. Since the parent is an inline element with definedwidth/height, this should work, but test across browsers for consistent spacing. Pixel-based gaps orfrunits (if using grid) might be more predictable, but for simple icons,%is often acceptable.✅ Suggested Revised Code (Minor Tweaks)
Summary of Recommendations:
color: Preventsundefinedbeing passed into inline styles.transform-origin: Explicitly settingcenterensures scaling behaves predictably across browsers.@media (prefers-reduced-motion): While nesting it inside&__barworks in modern SCSS compilers supporting modern CSS specs, defining global utility classes or top-level media queries for accessibility rules is often clearer and safer for CSS extraction tools.height: 100%and varying only thescaleYstart/end points in keyframes (which would require different keyframes or CSS custom properties per bar for complex delays/scales).