Merge branch '494-tooltip-docs' of https://github.com/deven-org/B01LE…

…R-Kitchen into 494-tooltip-docs
deven-org · Jan 22, 2024 · 1d8400b · 1d8400b
2 parents 6320be2 + c532c11
commit 1d8400b
Show file tree

Hide file tree

Showing 29 changed files with 703 additions and 706 deletions.
diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html
@@ -30,6 +30,19 @@ <h2>Vanilla JS Example Application</h2>
           <button id="toggleDisabledState">Toggle Disabled State</button>
         </div>
 
+        <div class="component">
+          <p>Select</p>
+          <blr-select label="Boiler Select Component">
+            <option value="" label="--Please choose an option--"></option>
+            <option value="option1" label="Option 1"></option>
+            <option value="option2" label="Option 2"></option>
+            <option value="option3" label="Option 3"></option>
+            <option value="option4" label="Option 4"></option>
+            <option value="option5" label="Option 5"></option>
+            <option value="option6" label="Option 6"></option>
+          </blr-select>
+        </div>
+
         <div class="component">
           <p>Checkbox</p>
           <blr-checkbox hasLabel="true" label="Please check" checkInputId="Test123"></blr-checkbox>
@@ -63,64 +76,6 @@ <h2>Vanilla JS Example Application</h2>
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar
-            tabs="[
-          {
-            label: 'Tab 1',
-            icon: 'blr360',
-            href: './',
-            disabled: true,
-          },
-          {
-            label: 'Tab 2',
-            icon: 'blrInfo',
-            href: './',
-          },
-          {
-            label: 'Tab 3',
-            icon: 'blrCrop',
-            href: './',
-          },
-          {
-            label: 'Tab 4',
-            icon: 'blrDocumentNew',
-            href: './',
-          },
-          {
-            label: 'Tab 5',
-            icon: 'blrDocumentTwo',
-            href: './',
-          },
-          {
-            label: 'Tab 6',
-            icon: 'blrDownload',
-            href: './',
-          },
-          {
-            label: 'Tab 7',
-            icon: 'blrHeart',
-            href: './',
-          },
-          {
-            label: 'Tab 8',
-            icon: 'blrHome',
-            href: './',
-          },
-          {
-            label: 'Tab 9',
-            icon: 'blrLockClosed',
-            href: './',
-          },
-          {
-            label: 'Tab 10',
-            icon: 'blrMusic',
-            href: './',
-          },
-          {
-            label: 'Tab 11',
-            icon: 'blrPen',
-            href: './',
-          },
-        ]"
             variant="standard"
             overflowVariantStandard="buttons"
             overflowVariantFullWidth="browserOverflow"
@@ -129,7 +84,18 @@ <h2>Vanilla JS Example Application</h2>
             tabContent="labelAndIcon"
             iconPosition="leading"
             alignment="left"
-          ></blr-tab-bar>
+          ><p disabled label="Tab 1" icon="blr360">Tab 1</p>
+          <p label="Tab 2" icon="blrInfo">Tab 2</p>
+          <p label="Tab 3" icon="blrCrop">Tab 3</p>
+          <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+          <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+          <p label="Tab 6" icon="blrDownload">Tab 6</p>
+          <p label="Tab 7" icon="blrHeart">Tab 7</p>
+          <p label="Tab 8" icon="blrHome">Tab 8</p>
+          <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+          <p label="Tab 10" icon="blrMusic">Tab 10</p>
+          <p label="Tab 11" icon="blrPen">Tab 11</p>
+        </blr-tab-bar>
         </div>
       </div>
 

diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
@@ -7,6 +7,7 @@ const logsContainer = document.querySelector('#logs');
 
 const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
+const blrSelect = document.getElementsByTagName('blr-select')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -61,3 +62,7 @@ blrCheckbox.addEventListener('blrFocus', () => {
 blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
+
+blrSelect.addEventListener('blrChange', (e) => {
+  addLog('blr-select changed');
+});
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -102,6 +102,7 @@ export class BlrIconButton extends LitElement {
         <span
           aria-label=${this.arialabel || nothing}
           class="blr-semantic-action blr-icon-button ${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click=${this.handleClick}
           id=${this.buttonId || nothing}
           tabindex=${this.disabled ? nothing : '0'}

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -148,11 +148,12 @@ export class BlrTextButton extends LitElement {
         </style>
         <span
           class="${classes}"
+          aria-disabled=${this.disabled ? 'true' : nothing}
           @click="${this.handleClick}"
           tabindex=${this.disabled ? nothing : '0'}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
-          role=${this.disabled ? nothing : 'button'}
+          role="button"
           @keydown=${(event: KeyboardEvent) => {
             if (event.code === 'Space') {
               this.handleClick(event);

diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
@@ -6,6 +6,7 @@ import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit';
 // this loads the all components instances and registers their html tags
 import '../../../../index';
+
 const sharedStyles = html`
   <style>
     .wrapper {
@@ -19,7 +20,7 @@ export default {
   argTypes: {
     size: {
       name: 'sizeVariant',
-      description: ' Choose size of the component. ',
+      description: ' Choose size of the component.',
       options: InputSizes,
       control: { type: 'radio' },
       table: {

diff --git a/packages/ui-library/src/components/forms/select/index.css.ts b/packages/ui-library/src/components/forms/select/index.css.ts
@@ -15,6 +15,10 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
     const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms;
 
     return typeSafeNestedCss`
+      slot {
+        display: none;
+      }
+
       .blr-input-icon {
         pointer-events: none;
       }