feat(select): add bl-select label

#747
Trendyol · Dec 23, 2023 · d46fbba · d46fbba
1 parent ecc8a30
commit d46fbba
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/src/components/switch/bl-switch.css b/src/components/switch/bl-switch.css
@@ -1,6 +1,7 @@
 :host {
   display: inline-block;
   cursor: pointer;
+  vertical-align: middle;
 }
 
 span {
@@ -40,6 +41,32 @@ span {
   width: var(--thumb-width);
 }
 
+label {
+  display: flex;
+  gap: var(--bl-size-2xs);
+  color: var(--bl-color-neutral-darker);
+  font: var(--bl-font-title-3);
+  cursor: pointer;
+  user-select: none;
+  line-height: normal;
+  align-items: var(--bl-radio-align-items, center);
+  margin-block: 0;
+}
+
+.label {
+  overflow-wrap: anywhere;
+}
+
+:host([disabled]) .label {
+  color: var(--bl-color-neutral-light);
+  border: 1px solid var(--bl-color-neutral-lighter);
+}
+
+:host([checked]) .label,
+:host(:hover) .label {
+  color: var(--bl-color-primary);
+}
+
 :host([checked]) .switch {
   --switch-color: var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)));
 }

diff --git a/src/components/switch/bl-switch.stories.mdx b/src/components/switch/bl-switch.stories.mdx
@@ -26,14 +26,11 @@ export const SwitchTemplate = (args) => html`
 `;
 
 export const SwitchWithLabel = (args) => html`
-<div style="display: flex;align-items: center;gap: var(--bl-size-2xs)">
-  <label style="font: var(--bl-font-title-3);color: var(--bl-color-neutral-dark)">${args.label}</label>
   <bl-switch
     ?disabled=${args.disabled}
     ?checked=${args.checked}
     aria-label="${args.label}"
-  ></bl-switch>
-</div>
+  >${args.label}</bl-switch>
 `;
 
 export const SwitchStyled = args => html`
@@ -75,8 +72,6 @@ Switch is _Off_ by default.
 
 Switch with label.
 
-<bl-alert variant="warning" icon>Inline styles in this example are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
-
 <Canvas>
   <Story name="Switch with label" args={{ label: "Label for Switch" }}>
     {SwitchWithLabel.bind({})}

diff --git a/src/components/switch/bl-switch.ts b/src/components/switch/bl-switch.ts
@@ -56,17 +56,19 @@ export default class BlSwitch extends LitElement {
       this.ariaLabel ?? this.attributes.getNamedItem("aria-label")?.value ?? undefined;
 
     return html`
-      <span
-        class="switch"
-        role="switch"
-        aria-checked=${this.checked}
-        aria-readonly=${!!this.disabled}
-        @click=${this.toggle}
-        @keydown=${this.handleKeyDown}
-        aria-label=${ifDefined(ariaLabel)}
-        tabindex="0"
-      >
-      </span>
+      <label @click=${this.toggle}>
+        <slot class="label"></slot>
+        <span
+          class="switch"
+          role="switch"
+          aria-checked=${this.checked}
+          aria-readonly=${!!this.disabled}
+          @keydown=${this.handleKeyDown}
+          aria-label=${ifDefined(ariaLabel)}
+          tabindex="0"
+        >
+        </span>
+      </label>
     `;
   }
 }