refactor(avatar): add changes after PR review

Endava · Jun 29, 2023 · 4a13ca9 · 4a13ca9
1 parent b8d34de
commit 4a13ca9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/packages/bee-q/src/components/avatar/bq-avatar.tsx b/packages/bee-q/src/components/avatar/bq-avatar.tsx
@@ -140,10 +140,11 @@ export class BqAvatar {
           class={{
             avatar: true,
             [`size--${this.size}`]: true,
-            'rounded-full': this.shape === 'circle',
-            'rounded-xs': this.shape === 'square' && this.size === 'xsmall',
-            'rounded-s': this.shape === 'square' && this.size === 'small',
-            'rounded-m': this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
+            'rounded-[var(--bq-avatar--border-radius-circle)]': this.shape === 'circle',
+            'rounded-[var(--bq-avatar--border-radius-squareXs)]': this.shape === 'square' && this.size === 'xsmall',
+            'rounded-[var(--bq-avatar--border-radius-squareS)]': this.shape === 'square' && this.size === 'small',
+            'rounded-[var(--bq-avatar--border-radius-squareM)]':
+              this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),
           }}
           aria-label={this.label}
           role="img"

diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
@@ -9,10 +9,10 @@
 }
 
 .avatar {
-  @apply relative overflow-hidden;
-  @apply bg-[var(--bq-avatar-background)];
+  @apply relative overflow-hidden bg-[var(--bq-avatar-background)];
+  @apply border-[length:var(--bq-avatar--border-width)] border-[color:var(--bq-avatar--border-color)];
 
-  border: var(--bq-avatar--border-width) var(--bq-avatar--border-style) var(--bq-avatar--border-color);
+  border-style: var(--bq-avatar--border-style);
 }
 
 .size {

diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
@@ -9,7 +9,11 @@
   * @prop --bq-avatar--border-color: Avatar border color
   * @prop --bq-avatar--border-style: Avatar border style
   * @prop --bq-avatar--border-width: Avatar border width
-  * @prop --bq-avatar--border-radius: Avatar border radius
+
+  * @prop --bq-avatar--border-radius-circle: Avatar border radius for circle & any size
+  * @prop --bq-avatar--border-radius-squareXs: Avatar border radius for square & size xsmall
+  * @prop --bq-avatar--border-radius-squareS: Avatar border radius for square & size small
+  * @prop --bq-avatar--border-radius-squareM: Avatar border radius for square & size medium/large
 
   * @prop --bq-avatar--size-xsmall: Avatar xsmall size
   * @prop --bq-avatar--size-small: Avatar small size
@@ -25,8 +29,12 @@
 
   --bq-avatar--border-color: theme('colors.stroke.tiertary');
   --bq-avatar--border-style: solid;
-  --bq-avatar--border-width: theme('borderSpacing.xs3');
-  --bq-avatar--border-radius: theme('borderRadius.full');
+  --bq-avatar--border-width: 2px;
+
+  --bq-avatar--border-radius-circle: theme('borderRadius.full');
+  --bq-avatar--border-radius-squareXs: theme('borderRadius.xs');
+  --bq-avatar--border-radius-squareS: theme('borderRadius.s');
+  --bq-avatar--border-radius-squareM: theme('borderRadius.m');
 
   --bq-avatar--size-xsmall: 24px;
   --bq-avatar--size-small: 32px;