fix(badge): not being full rounded with one digit (#307)

Endava · Jul 3, 2023 · 3bf70c8 · 3bf70c8
1 parent 41ecdfc
commit 3bf70c8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,5 @@
 {
-  "ignoreFiles": ["**/*.{js,json,ts,tsx}"],
+  "ignoreFiles": ["**/*.{js,json,ts,tsx}", "./dist/**/*", "./node_modules/**/*"],
   "overrides": [
     {
       "files": ["**/*.css"],

diff --git a/packages/bee-q/src/components/badge/bq-badge.tsx b/packages/bee-q/src/components/badge/bq-badge.tsx
@@ -126,11 +126,11 @@ export class BqBadge {
             'bq-badge': true,
             [`size--${this.size}`]: this.contentLength === 0,
             digit: this.contentLength > 0,
-            'px-xs': this.contentLength > 1,
+            'px-xs2': this.contentLength > 1,
           }}
           part="base"
         >
-          <span ref={(element) => (this.spanElement = element)} class="text-xs font-bold leading-large" part="number">
+          <span ref={(element) => (this.spanElement = element)} class="text-xs font-bold leading-regular" part="number">
             <slot onSlotchange={this.onSlotChange}></slot>
           </span>
         </div>

diff --git a/packages/bee-q/src/components/badge/scss/bq-badge.scss b/packages/bee-q/src/components/badge/scss/bq-badge.scss
@@ -9,7 +9,11 @@
 }
 
 .bq-badge {
-  @apply flex items-center justify-center rounded-xl border-[1px] border-solid border-stroke-primary bg-[color:var(--bq-badge--background-color)] text-[color:var(--bq-badge--text-color)];
+  @apply flex items-center justify-center bg-[color:var(--bq-badge--background-color)] text-[color:var(--bq-badge--text-color)];
+  @apply rounded-[var(--bq-badge--border-radius)] border-[length:var(--bq-badge--border-width)] border-[color:var(--bq-badge--border-color)];
+
+  border-style: var(--bq-badge--border-style);
+  box-shadow: var(--bq-badge--box-shadow);
 }
 
 .size {

diff --git a/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss b/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss
@@ -3,9 +3,29 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  /**
+   * @prop --bq-badge--background-color: Badge background color
+   * @prop --bq-badge--box-shadow: Badge box shadow
+   * @prop --bq-badge--border-color: Badge border color
+   * @prop --bq-badge--border-radius: Badge border radius
+   * @prop --bq-badge--border-style: Badge border style
+   * @prop --bq-badge--border-width: Badge border width
+   * @prop --bq-badge--size-small: Badge small size
+   * @prop --bq-badge--size-medium: Badge medium size
+   * @prop --bq-badge--size-large: Badge large size
+   * @prop --bq-badge--text-color: Badge text color
+   */
+  --bq-badge--background-color: theme('colors.ui.danger');
+  --bq-badge--box-shadow: none;
+
+  --bq-badge--border-color: theme('colors.stroke.tiertary');
+  --bq-badge--border-radius: theme('borderRadius.full');
+  --bq-badge--border-style: solid;
+  --bq-badge--border-width: 1px;
+
   --bq-badge--size-small: 8px;
   --bq-badge--size-medium: 12px;
   --bq-badge--size-large: 16px;
-  --bq-badge--background-color: theme('colors.ui.danger');
+
   --bq-badge--text-color: theme('colors.text.inverse');
 }