@pine-ds/core 2.14.0-mercury.0 → 2.14.0

package/dist/collection/components/pds-textarea/pds-textarea.js

@@ -1,16 +1,18 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, isRequired, messageId } from "../../utils/form";
 import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsTextarea {
     constructor() {
         this.onTextareaChange = (ev) => {
             const textarea = ev.target;
             isRequired(textarea, this);
             if (textarea) {
-                this.value = textarea.innerHTML;
+                this.value = textarea.value;
             }
             this.pdsTextareaChange.emit({ value: this.value, event: ev });
         };
+        this.autocomplete = undefined;
         this.componentId = undefined;
         this.disabled = false;
         this.errorMessage = undefined;
@@ -32,25 +34,42 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            h("p", { key: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
+        return (h(Host, { key: '461039704016b1b3858af80440863f1fc4930ceb', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'de68ba7ca3b6714e1da8594e76f60bab2a3de1fb', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '102802b8244a929492731700fdde06a053f3e2d5', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '55a3fde040749bd03a5e681dafad7db0717f4a7f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
+            h("p", { key: '552e0c1240cdc51c215f5ddfc51f250156d8a4b2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'a7e6f4a0d926203f5ac56a8f99d03fd9b5f3647b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '53a40e204e076147b27c921cdbe54336ca50d9e3', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-textarea.scss"]
+            "$": ["../../global/styles/base.scss", "pds-textarea.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-textarea.css"]
+            "$": ["../../global/styles/base.css", "pds-textarea.css"]
         };
     }
     static get properties() {
         return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "attribute": "autocomplete",
+                "reflect": false
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,
@@ -83,7 +102,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is disabled"
+                    "text": "Determines whether or not the textarea is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -101,7 +120,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the error text and provides an error-themed treatment to the field"
+                    "text": "Displays an error message below the textarea field."
                 },
                 "attribute": "error-message",
                 "reflect": false
@@ -118,7 +137,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays a hint or description of the textarea"
+                    "text": "Displays a message or hint below the textarea field."
                 },
                 "attribute": "helper-message",
                 "reflect": false
@@ -138,7 +157,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is invalid or throws an error"
+                    "text": "Determines whether or not the textarea is invalid or throws an error."
                 },
                 "attribute": "invalid",
                 "reflect": false,
@@ -156,7 +175,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text to be displayed as the textarea label"
+                    "text": "Text to be displayed as the textarea label."
                 },
                 "attribute": "label",
                 "reflect": false
@@ -173,7 +192,7 @@ export class PdsTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId"
+                    "text": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -191,7 +210,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a short hint that describes the expected value of the textarea"
+                    "text": "Specifies a short hint that describes the expected value of the textarea."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -211,7 +230,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is readonly"
+                    "text": "Determines whether or not the textarea is readonly."
                 },
                 "attribute": "readonly",
                 "reflect": false,
@@ -232,7 +251,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is required"
+                    "text": "Determines whether or not the textarea is required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -250,7 +269,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets number of rows of text visible without needing to scroll in the textarea"
+                    "text": "Sets number of rows of text visible without needing to scroll in the textarea."
                 },
                 "attribute": "rows",
                 "reflect": false
@@ -267,7 +286,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the textarea"
+                    "text": "The value of the textarea."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -283,7 +302,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted whenever the value of the textarea changes"
+                    "text": "Event emitted whenever the value of the textarea changes."
                 },
                 "complexType": {
                     "original": "TextareaChangeEventDetail",

package/dist/collection/components/pds-textarea/pds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.value;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js

@@ -4,6 +4,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   args: {
+    autocomplete: null,
     componentId: null,
     disabled: false,
     errorMessage: null,
@@ -28,6 +29,7 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-textarea
+  autocomplete="${args.autocomplete}"
   component-id="${args.componentId}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
@@ -47,14 +49,14 @@ const BaseTemplate = (args) => html`<pds-textarea
 export const Default = BaseTemplate.bind({});
 Default.args = {
   componentId: 'pds-textarea-default-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Default',
 };
 
 export const Rows = BaseTemplate.bind({});
 Rows.args = {
   componentId: 'pds-textarea-rows-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Rows',
   rows: 4,
 };
@@ -62,7 +64,7 @@ Rows.args = {
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-textarea-required-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Required',
   required: true,
 };
@@ -70,33 +72,33 @@ Required.args = {
 export const Placeholder = BaseTemplate.bind({});
 Placeholder.args = {
   componentId: 'pds-textarea-placeholder-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Placeholder',
-  placeholder: 'Placeholder...'
+  placeholder: 'Enter a message...'
 };
 
 export const Disabled = BaseTemplate.bind({});
 Disabled.args = {
   componentId: 'pds-textarea-disabled-example',
   disabled: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Disabled',
 };
 
 export const Readonly = BaseTemplate.bind({});
 Readonly.args = {
   componentId: 'pds-textarea-readonly-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Readonly',
   readonly: true,
   value: 'Readonly Value'
 };
 
-export const Message = BaseTemplate.bind({});
-Message.args = {
+export const WithMessage = BaseTemplate.bind({});
+WithMessage.args = {
   componentId: 'pds-textarea-helper-example',
   helperMessage: 'Helper message text',
-  label: 'Name',
+  label: 'Message',
   name: 'Message',
 };
 
@@ -105,7 +107,16 @@ Invalid.args = {
   componentId: 'pds-textarea-error-example',
   errorMessage: 'Error',
   invalid: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Error',
   required: true,
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-textarea-autocomplete',
+  label: 'Message',
+  name: 'message',
+  autocomplete: 'on',
+  placeholder: 'Enter a message...',
+};

package/dist/collection/components/pds-tooltip/pds-tooltip.css

@@ -5,10 +5,8 @@
   --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
   --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
   --box-shadow-default: var(--pine-box-shadow-200);
-  --color-background-default: var(--pine-color-grey-900);
+  --color-background-default: var(--pine-color-grey-950);
   --color-text-default: var(--pine-color-white);
-  --font-size-overlay: var(--pine-font-size-085);
-  --line-height-overlay: var(--pine-line-height-125);
   --sizing-arrow-default: 6px;
   --sizing-arrow-offset: 14px;
   --sizing-width-default: 320px;
@@ -21,8 +19,8 @@
 }
 :host ::slotted([slot=content]) {
   display: block;
+  max-width: var(--sizing-width-default);
   white-space: normal;
-  width: var(--sizing-width-default);
 }
 
 .pds-tooltip__content {
@@ -30,8 +28,7 @@
   border-radius: var(--border-radius-overlay);
   box-shadow: var(--box-shadow-default);
   color: var(--color-text-default);
-  font-size: var(--font-size-overlay);
-  line-height: var(--line-height-overlay);
+  max-width: var(--sizing-width-default);
   opacity: 0;
   padding: var(--spacing-padding-overlay);
   position: absolute;

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -8,11 +8,9 @@ export class PdsTooltip {
     constructor() {
         this.handleHide = () => {
             this.hideTooltip();
-            this.pdsTooltipHide.emit();
         };
         this.handleShow = () => {
             this.showTooltip();
-            this.pdsTooltipShow.emit();
         };
         this.isOpen = false;
         this.content = undefined;
@@ -20,6 +18,7 @@ export class PdsTooltip {
         this.hasArrow = true;
         this.htmlContent = false;
         this.placement = 'right';
+        this.maxWidth = '352px';
         this.opened = false;
     }
     handleOpenToggle() {
@@ -58,24 +57,24 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', class: `
+        return (h(Host, { key: 'f4a8cd19668e7cc20a70ae13a0f6dcf0f809df65', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'b83498c6ea8e404b2abc25cc75daa95807649dba', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
+          ` }, h("span", { key: '47ace7d3f543f0d86987389c76b25da0ad6be9b7', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '45bae92d87b8a67c00608c18f76aa9333d8d82a7' })), h("div", { key: 'a745ce513f1563cb8ea5a86bf27ee31f3e0d4392', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '8c46fe5951624e2de4128bd0f819e1e55155a7b5', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-tooltip.scss"]
+            "$": ["../../global/styles/base.scss", "pds-tooltip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-tooltip.css"]
+            "$": ["../../global/styles/base.css", "pds-tooltip.css"]
         };
     }
     static get properties() {
@@ -177,6 +176,27 @@ export class PdsTooltip {
                 "reflect": true,
                 "defaultValue": "'right'"
             },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"352px\""
+                        }],
+                    "text": "Sets the maximum width of the tooltip content"
+                },
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "'352px'"
+            },
             "opened": {
                 "type": "boolean",
                 "mutable": true,
@@ -205,39 +225,6 @@ export class PdsTooltip {
             "isOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "pdsTooltipHide",
-                "name": "pdsTooltipHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is closed"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "pdsTooltipShow",
-                "name": "pdsTooltipShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is shown"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "showTooltip": {

package/dist/collection/components/pds-tooltip/pds-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Sets the maximum width of the tooltip content\n   * @defaultValue \"352px\"\n   */\n  @Prop() maxWidth: string = '352px';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n            style={{ maxWidth: this.maxWidth }}\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js

@@ -8,17 +8,17 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
+      handles: [],
     },
   },
   title: 'components/Tooltip'
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
+  <pds-tooltip has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} html-content=${args.htmlContent}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
+        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>