feat: create tooltip slot for input elements (#1579)

solid-design-system · Nov 8, 2024 · 4fa2304 · 4fa2304
1 parent 28dbb7b
commit 4fa2304
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 64 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.stories.ts b/packages/components/src/components/checkbox-group/checkbox-group.stories.ts
@@ -14,6 +14,7 @@ const { overrideArgs } = storybookHelpers('sd-checkbox-group');
  *
  * **Related templates:**
  * - [Checkbox Group](?path=/docs/templates-checkbox-group--docs)
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
  */
 export default {
   title: 'Components/sd-checkbox-group',

diff --git a/packages/components/src/components/checkbox-group/checkbox-group.ts b/packages/components/src/components/checkbox-group/checkbox-group.ts
@@ -18,6 +18,7 @@ import type SdCheckbox from '../checkbox/checkbox';
  * @slot - The default slot where `<sd-checkbox>` elements are placed.
  * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label`
  * attribute.
+ * @slot tooltip - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.
  **/
 
 @customElement('sd-checkbox-group')
@@ -99,14 +100,18 @@ export default class SdCheckboxGroup extends SolidElement {
         role="group"
         aria-labelledby="label"
       >
-        <label
-          part="form-control-label"
-          id="label"
-          class=${cx('mb-2 p-0 font-bold leading-normal text-black', hasLabel ? 'flex' : 'hidden')}
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
+        <div class="flex items-center gap-1 mb-2">
+          <label
+            part="form-control-label"
+            id="label"
+            class=${cx('p-0 font-bold leading-normal text-black', hasLabel ? 'flex' : 'hidden')}
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+          >
+            <slot name="label">${this.label}</slot>
+          </label>
+
+          <slot name="tooltip"></slot>
+        </div>
 
         <div
           part="form-control-input"

diff --git a/packages/components/src/components/input/input.stories.ts b/packages/components/src/components/input/input.stories.ts
@@ -12,6 +12,8 @@ const { overrideArgs } = storybookHelpers('sd-input');
  * **Related templates**:
  * - [Input](?path=/docs/templates-input--docs)
  * - [Autocomplete](?path=/docs/templates-autocomplete--docs)
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
+ *
  */
 export default {
   tags: ['!dev'],

diff --git a/packages/components/src/components/input/input.ts b/packages/components/src/components/input/input.ts
@@ -41,6 +41,7 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot tooltip - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.
  *
  * @event sd-blur - Emitted when the control loses focus.
  * @event sd-change - Emitted when an alteration to the control's value is committed by the user.
@@ -473,15 +474,19 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     // Render
     return html`
       <div part="form-control" class=${cx(this.disabled && 'pointer-events-none')}>
-        <label
-          part="form-control-label"
-          id="label"
-          class=${cx('mb-2', hasLabel ? 'inline-block' : 'hidden', textSize)}
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
+        <div class="flex items-center gap-1 mb-2">
+          <label
+            part="form-control-label"
+            id="label"
+            class=${cx(hasLabel ? 'inline-block' : 'hidden', textSize)}
+            for="input"
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+          >
+            <slot name="label">${this.label}</slot>
+          </label>
+
+          <slot name="tooltip"></slot>
+        </div>
 
         <div part="form-control-input" class="relative w-full">
           <div

diff --git a/packages/components/src/components/radio-group/radio-group.stories.ts b/packages/components/src/components/radio-group/radio-group.stories.ts
@@ -12,6 +12,9 @@ const { overrideArgs } = storybookHelpers('sd-radio-group');
  *  **Related components**:
  * - [sd-radio](?path=/docs/components-sd-radio--docs)
  * - [sd-radio-button](?path=/docs/components-sd-radio-button--docs)
+ *
+ * **Related templates**:
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
  */
 
 export default {

diff --git a/packages/components/src/components/radio-group/radio-group.ts b/packages/components/src/components/radio-group/radio-group.ts
@@ -28,6 +28,7 @@ import type SdRadioButton from '../../components/radio-button/radio-button';
  * @slot - The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.
  * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
  *  attribute.
+ * @slot tooltip - An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.
  *
  * @event sd-change - Emitted when the radio group's selected value changes.
  * @event sd-input - Emitted when the radio group receives user input.
@@ -377,19 +378,19 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
         aria-labelledby="label"
         aria-errormessage="error-text"
       >
-        <label
-          part="form-control-label"
-          id="label"
-          class=${cx(
-            'mb-2 p-0 leading-normal text-black text-left',
-            !hasLabel && 'hidden',
-            this.boldLabel && 'font-bold'
-          )}
-          @click=${this.focus}
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
+        <div class="flex items-center gap-1 mb-2">
+          <label
+            part="form-control-label"
+            id="label"
+            class=${cx('p-0 leading-normal text-black text-left', !hasLabel && 'hidden', this.boldLabel && 'font-bold')}
+            @click=${this.focus}
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+          >
+            <slot name="label">${this.label}</slot>
+          </label>
+
+          <slot name="tooltip"></slot>
+        </div>
 
         <div
           part="form-control-input"

diff --git a/packages/components/src/components/select/select.stories.ts b/packages/components/src/components/select/select.stories.ts
@@ -24,6 +24,7 @@ const labelConstant: ConstantDefinition = { type: 'attribute', name: 'label', va
  *
  * **Related templates:**
  * - [Select](?path=/docs/templates-select--docs)
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
  */
 export default {
   title: 'Components/sd-select',

diff --git a/packages/components/src/components/select/select.ts b/packages/components/src/components/select/select.ts
@@ -36,6 +36,7 @@ import type SdOption from '../option/option';
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot tooltip - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.
 
  *
  * @event sd-change - Emitted when the control's value changes.
@@ -829,15 +830,19 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
           this.open && 'z-50'
         )}
       >
-        <label
-          id="label"
-          part="form-control-label"
-          class=${hasLabel && 'inline-block mb-2'}
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
+        <div class="flex items-center gap-1 mb-2">
+          <label
+            id="label"
+            part="form-control-label"
+            class=${hasLabel && 'inline-block'}
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+            @click=${this.handleLabelClick}
+          >
+            <slot name="label">${this.label}</slot>
+          </label>
+
+          <slot name="tooltip"></slot>
+        </div>
 
         <div
           part="form-control-input"

diff --git a/packages/components/src/components/textarea/textarea.stories.ts b/packages/components/src/components/textarea/textarea.stories.ts
@@ -9,6 +9,9 @@ const { overrideArgs } = storybookHelpers('sd-textarea');
 
 /**
  * Used to allow users to input and edit multiple lines of text.
+ *
+ * **Related templates:**
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
  */
 export default {
   title: 'Components/sd-textarea',

diff --git a/packages/components/src/components/textarea/textarea.ts b/packages/components/src/components/textarea/textarea.ts
@@ -20,6 +20,7 @@ import type { SolidFormControl } from '../../internal/solid-element';
  *
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot tooltip - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.
  *
  * @event sd-blur - Emitted when the control loses focus.
  * @event sd-change - Emitted when an alteration to the control's value is committed by the user.
@@ -334,15 +335,19 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
 
     return html`
       <div part="form-control" class="flex flex-col h-full text-left">
-        <label
-          part="form-control-label"
-          id="label"
-          class=${cx('mb-2', hasLabel ? 'inline-block' : 'hidden', textSize)}
-          for="input"
-          aria-hidden=${hasLabel ? 'false' : 'true'}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
+        <div class="flex items-center gap-1 mb-2">
+          <label
+            part="form-control-label"
+            id="label"
+            class=${cx(hasLabel ? 'inline-block' : 'hidden', textSize)}
+            for="input"
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+          >
+            <slot name="label">${this.label}</slot>
+          </label>
+
+          <slot name="tooltip"></slot>
+        </div>
 
         <div part="form-control-input" class=${cx('relative h-full w-full', this.disabled && 'cursor-not-allowed')}>
           <div

diff --git a/packages/components/src/components/tooltip/tooltip.stories.ts b/packages/components/src/components/tooltip/tooltip.stories.ts
@@ -11,7 +11,7 @@ const { generateTemplate } = storybookTemplate('sd-tooltip');
  * Used as a floating and non-actionable text label that explains an element or function of the user interface.
  *
  *  **Related templates:**
- * - [Select with Tooltip](?path=/docs/templates-select--docs#select%20with%20tooltip)
+ * - [Tooltip](?path=/docs/templates-tooltip--docs)
  */
 export default {
   title: 'Components/sd-tooltip',

diff --git a/packages/components/src/templates/select.stories.ts b/packages/components/src/templates/select.stories.ts
@@ -43,18 +43,3 @@ export const Default = {
       </sd-select>
     </div>`
 };
-
-export const SelectWithTooltip = {
-  render: () =>
-    html`<div class="w-[400px] h-[500px] flex gap-12 mt-12">
-      <sd-select size="lg" placement="bottom" label="Access Role" placeholder="Please Select" value="">
-        <div slot="label" class="flex items-center">
-          <label class="text-black font-bold mr-2">Access Role</label>
-          <sd-tooltip content="Lorem ipsum sic semper" placement="top" trigger="hover" size="sm"></sd-tooltip>
-        </div>
-        <sd-option value="option-1">Viewer</sd-option>
-        <sd-option value="option-2">Editor</sd-option>
-        <sd-option value="option-3">Owner</sd-option>
-      </sd-select>
-    </div>`
-};
diff --git a/packages/components/src/templates/tooltip.stories.ts b/packages/components/src/templates/tooltip.stories.ts
@@ -0,0 +1,97 @@
+import '../solid-components';
+import { html } from 'lit-html';
+
+export default {
+  tags: ['!dev'],
+  title: 'Templates/Tooltip',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=3687-40468&t=ilrs806pHHSfnwKM-4'
+    }
+  }
+};
+
+export const InputWithTooltip = {
+  name: 'Input with Tooltip',
+  render: () => html`
+    <sd-input class="w-[400px] py-6">
+      <span slot="right" class="text-sm inline-flex items-center">
+        <span class="text-neutral-700">EUR</span>
+      </span>
+
+      <label slot="label">Liquid assets</label>
+      <sd-tooltip slot="tooltip" placement="top-start" size="sm" content="Available cash assets"></sd-tooltip>
+    </sd-input>
+  `
+};
+
+export const SelectWithTooltip = {
+  name: 'Select with Tooltip',
+  render: () => html`
+    <sd-select class="w-[400px] h-[300px] py-6" size="lg" placement="top" placeholder="Please select" value="">
+      <div slot="label">Access role</div>
+      <sd-tooltip slot="tooltip" content="Select the level of access for this user" size="sm" hoist></sd-tooltip>
+
+      <sd-option value="option-1">Viewer</sd-option>
+      <sd-option value="option-2">Editor</sd-option>
+      <sd-option value="option-3">Owner</sd-option>
+    </sd-select>
+  `
+};
+
+export const TextAreaWithTooltip = {
+  name: 'Textarea with Tooltip',
+  render: () => html`
+    <sd-textarea
+      class="w-[540px] py-4"
+      value="A solid design system is more than a collection of components; it’s a living document that aligns teams, maintains consistency, and supports scalability. Here, you can capture the reasoning behind design choices, specific use cases, and any nuances that will aid other team members in understanding how to implement this component effectively."
+    >
+      <div slot="label">Project description</div>
+      <sd-tooltip slot="tooltip" content="Explain your project in clear terms" size="sm"></sd-tooltip>
+    </sd-textarea>
+  `
+};
+
+export const RadioGroupWithTooltip = {
+  name: 'Radio Group with Tooltip',
+  render: () => html`
+    <sd-radio-group class="w-[400px] py-6" boldLabel>
+      <div slot="label">Choose your Subscription Plan</div>
+      <sd-tooltip slot="tooltip" content="Select the plan that best meets your needs" size="sm"></sd-tooltip>
+
+      <sd-radio value="basic">Basic Plan</sd-radio>
+      <sd-radio value="standard">Standard Plan</sd-radio>
+      <sd-radio value="premium">Premium Plan</sd-radio>
+    </sd-radio-group>
+  `
+};
+
+export const CheckboxGroupWithTooltip = {
+  name: 'Checkbox Group with Tooltip',
+  render: () => html`
+    <sd-checkbox-group class="w-[400px] py-6">
+      <div slot="label">Select your Interests</div>
+      <sd-tooltip slot="tooltip" content="Choose all that apply to you" size="sm"></sd-tooltip>
+
+      <sd-checkbox value="newsletters">Subscribe to our Newsletters</sd-checkbox>
+      <sd-checkbox value="promotions">Receive our Promotions</sd-checkbox>
+      <sd-checkbox value="updates">Get our Product Updates</sd-checkbox>
+    </sd-checkbox-group>
+  `
+};
+
+export const TooltipWithBoldedText = {
+  name: 'Tooltip with Bolded Text',
+  render: () => html`
+    <div class="h-40 flex items-center pl-20">
+      <sd-tooltip placement="top-start"
+        ><span slot="content" class="sd-prose sd-prose--inverted"
+          ><h5>Guidelines</h5>
+          Document design standards and usage</span
+        ></sd-tooltip
+      >
+    </div>
+  `
+};