@aquera/nile-elements 2.0.14 → 2.0.15

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-badge/nile-badge.css.ts

@@ -63,11 +63,11 @@ export const styles = css`
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-error-600));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-300));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-50));
   }
 
   .badge--purple {
@@ -120,7 +120,7 @@ export const styles = css`
     color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-300));
     background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
   }
 
@@ -153,7 +153,7 @@ export const styles = css`
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-300));
   }
 
   .badge--purple.badge--pill-outline {
@@ -181,7 +181,7 @@ export const styles = css`
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-300));
   }
 
   .badge--error.badge--pill-outline {
@@ -202,6 +202,27 @@ export const styles = css`
     padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
   }
+
+  /* Sizes — md is the base .badge rule above, so the default is unchanged. */
+  .badge.badge--sm {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-height-22px, var(--ng-height-22px));
+  }
+
+  .badge--sm .badge__content {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-xs));
+  }
+
+  .badge.badge--lg {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .badge--lg .badge__content {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+  }
 `;
 export default [styles];
 

package/src/nile-badge/nile-badge.test.ts

@@ -1,6 +1,7 @@
 import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
 import './nile-badge';
 import NileBadge from './nile-badge';
+import { styles } from './nile-badge.css';
 
 describe('NileBadge', () => {
   // === RENDERING ===
@@ -657,4 +658,90 @@ describe('NileBadge', () => {
     const el = await fixture<NileBadge>(html`<nile-badge>\u2713 Done</nile-badge>`);
     expect(el.textContent).to.contain('\u2713');
   });
+
+  // === SIZE TESTS ===
+  it('101. should have size default to md', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge></nile-badge>`);
+    expect(el.size).to.equal('md');
+    const span = el.shadowRoot!.querySelector('span');
+    expect(span!.classList.contains('badge--md')).to.be.true;
+  });
+
+  it('102. should reflect size attribute', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge size="lg"></nile-badge>`);
+    expect(el.getAttribute('size')).to.equal('lg');
+  });
+
+  for (const size of ['sm', 'md', 'lg'] as const) {
+    it(`103. should apply only the ${size} size class`, async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+      const span = el.shadowRoot!.querySelector('span')!;
+      for (const other of ['sm', 'md', 'lg']) {
+        expect(span.classList.contains(`badge--${other}`)).to.equal(other === size);
+      }
+    });
+  }
+
+  it('104. should update size class when size changes', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+    el.size = 'sm';
+    await elementUpdated(el);
+    const span = el.shadowRoot!.querySelector('span')!;
+    expect(span.classList.contains('badge--sm')).to.be.true;
+    expect(span.classList.contains('badge--md')).to.be.false;
+  });
+
+  describe('size dimensions (nxtgen tokens)', () => {
+    let tokens: HTMLStyleElement;
+
+    before(() => {
+      tokens = document.createElement('style');
+      tokens.textContent = `:root {
+        --ng-height-22px: 22px; --ng-height-24px: 24px; --ng-height-28px: 28px;
+        --ng-spacing-xxs: 2px; --ng-spacing-xs: 4px; --ng-spacing-md: 8px;
+        --ng-spacing-md-alt: 10px; --ng-spacing-lg: 12px;
+      }`;
+      document.head.appendChild(tokens);
+    });
+
+    after(() => tokens.remove());
+
+    it('105. should render 22px, 24px and 28px tall for sm, md and lg', async () => {
+      const heights: number[] = [];
+      for (const size of ['sm', 'md', 'lg']) {
+        const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+        heights.push(el.shadowRoot!.querySelector('span')!.getBoundingClientRect().height);
+      }
+      expect(heights).to.deep.equal([22, 24, 28]);
+    });
+
+    it('106. should keep size padding when rounded', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size="lg" rounded>Label</nile-badge>`);
+      const style = getComputedStyle(el.shadowRoot!.querySelector('span')!);
+      expect(style.paddingTop).to.equal('4px');
+      expect(style.paddingLeft).to.equal('12px');
+    });
+  });
+
+  describe('error / orange / warning colour tokens', () => {
+    const css = styles.cssText;
+    const rule = (selector: string) => css.slice(css.indexOf(`${selector} {`)).split('}')[0];
+    const ng = (token: string) => `var(--ng-componentcolors-utility-${token})`;
+
+    const cases: [string, string, string, string][] = [
+      ['error', 'error-50', 'error-200', 'error-700'],
+      ['orange', 'orange-50', 'orange-300', 'error-600'],
+      ['warning', 'warning-50', 'warning-300', 'warning-700'],
+    ];
+
+    cases.forEach(([variant, fill, border, text], i) => {
+      it(`${107 + i}. should map ${variant} to ${fill} / ${border} / ${text}`, () => {
+        const base = rule(`.badge--${variant}`);
+        expect(base).to.contain(`background-${variant}, ${ng(fill)})`);
+        expect(base).to.contain(`border-color-${variant}, ${ng(border)})`);
+        expect(base).to.contain(`font-${variant}, ${ng(text)})`);
+        expect(rule(`.badge--${variant}.badge--pill-outline`)).to.contain(`pill-outline-${variant}, ${ng(border)})`);
+      });
+    });
+  });
 });

package/src/nile-badge/nile-badge.ts

@@ -84,6 +84,9 @@ export class NileBadge extends NileElement {
     | 'pill-outline'
     | 'badge-color'='badge-color';
 
+  /** The badge's size. `md` keeps the existing default dimensions. */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
   render() {
     return html`
       <span
@@ -111,6 +114,9 @@ export class NileBadge extends NileElement {
             this.rounded ||
             this.pilltype == 'pill-outline' ||
             this.pilltype == 'pill-color',
+          'badge--sm': this.size === 'sm',
+          'badge--md': this.size === 'md',
+          'badge--lg': this.size === 'lg',
         })}
       >
         <slot part="content" class="badge__content"></slot>

package/vscode-html-custom-data.json

@@ -496,7 +496,7 @@
     },
     {
       "name": "nile-badge",
-      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -572,6 +572,21 @@
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperty: size\n\nDefault: md",
+          "values": [
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            }
+          ]
+        },
         {
           "name": "onnile-remove",
           "description": "`nile-remove` {} - Emitted when the remove button is activated."