chore(pds-text): add add span tag

Author: QuintonJason

libs/core/src/components.d.ts

@@ -2072,66 +2072,32 @@ export namespace Components {
         /**
           * Sets the text decoration.
          */
-        "decoration"?: | 'strikethrough'
-  | 'underline-dotted';
+        "decoration"?: 'strikethrough' | 'underline-dotted';
         /**
           * Set the bottom margin for the text.
          */
-        "gutter"?: | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs';
+        "gutter"?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
         /**
           * If set or `true`, the text will be italic.
          */
         "italic"?: boolean;
         /**
           * Sets the font size.
          */
-        "size"?: | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6';
+        "size"?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         /**
           * Determines what semantic text tag to render.
-          * @default "p"
-         */
-        "tag": | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'p'
-  | 'code'
-  | 'pre'
-  | 'strong'
-  | 'em';
+          * @default 'p'
+         */
+        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'code' | 'pre' | 'strong' | 'em';
         /**
           * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate"?: boolean;
         /**
           * Sets the font weight.
          */
-        "weight"?: | 'extra-light'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold';
+        "weight"?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
     }
     interface PdsTextarea {
         /**
@@ -5169,66 +5135,32 @@ declare namespace LocalJSX {
         /**
           * Sets the text decoration.
          */
-        "decoration"?: | 'strikethrough'
-  | 'underline-dotted';
+        "decoration"?: 'strikethrough' | 'underline-dotted';
         /**
           * Set the bottom margin for the text.
          */
-        "gutter"?: | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs';
+        "gutter"?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
         /**
           * If set or `true`, the text will be italic.
          */
         "italic"?: boolean;
         /**
           * Sets the font size.
          */
-        "size"?: | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6';
+        "size"?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         /**
           * Determines what semantic text tag to render.
-          * @default "p"
-         */
-        "tag"?: | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'p'
-  | 'code'
-  | 'pre'
-  | 'strong'
-  | 'em';
+          * @default 'p'
+         */
+        "tag"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'code' | 'pre' | 'strong' | 'em';
         /**
           * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate"?: boolean;
         /**
           * Sets the font weight.
          */
-        "weight"?: | 'extra-light'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold';
+        "weight"?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
     }
     interface PdsTextarea {
         /**

libs/core/src/components/pds-text/pds-text.tsx

@@ -27,21 +27,12 @@ export class PdsText {
   /**
    * Sets the text decoration.
    */
-  @Prop() decoration?:
-  | 'strikethrough'
-  | 'underline-dotted';
+  @Prop() decoration?: 'strikethrough' | 'underline-dotted';
 
   /**
    * Set the bottom margin for the text.
    */
-  @Prop() gutter?:
-  | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs';
+  @Prop() gutter?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
 
   /**
    * If set or `true`, the text will be italic.
@@ -51,47 +42,17 @@ export class PdsText {
   /**
    * Sets the font size.
    */
-  @Prop() size?:
-  | '2xl'
-  | 'xl'
-  | 'lg'
-  | 'md'
-  | 'sm'
-  | 'xs'
-  | '2xs'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6';
+  @Prop() size?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
   /**
    * Sets the font weight.
    */
-  @Prop() weight?:
-  | 'extra-light'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold';
+  @Prop() weight?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
 
   /**
    * Determines what semantic text tag to render.
    */
-  @Prop() tag:
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'p'
-  | 'code'
-  | 'pre'
-  | 'strong'
-  | 'em' = "p";
+  @Prop() tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'code' | 'pre' | 'strong' | 'em' = 'p';
 
   /**
    * If set or `true`, the text will be truncated. Must add a `width` to the element.
@@ -152,13 +113,7 @@ export class PdsText {
     `;
 
     return (
-      <Tag
-        ref={(el) => this.contentEl = el}
-        style={this.color && setColor(this.color)}
-        class={typeClasses}
-        part="content"
-        tabIndex={this.truncate ? 0 : undefined}
-      >
+      <Tag ref={(el) => (this.contentEl = el)} style={this.color && setColor(this.color)} class={typeClasses} part="content" tabIndex={this.truncate ? 0 : undefined}>
         <slot />
       </Tag>
     );

libs/core/src/components/pds-text/readme.md

@@ -15,7 +15,7 @@
 | `gutter`     | `gutter`     | Set the bottom margin for the text.                                                                                                                                                                                                                                           | `"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                 | `undefined` |
 | `italic`     | `italic`     | If set or `true`, the text will be italic.                                                                                                                                                                                                                                    | `boolean`                                                                                                | `undefined` |
 | `size`       | `size`       | Sets the font size.                                                                                                                                                                                                                                                           | `"2xl" \| "2xs" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` | `undefined` |
-| `tag`        | `tag`        | Determines what semantic text tag to render.                                                                                                                                                                                                                                  | `"code" \| "em" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "pre" \| "strong"`             | `"p"`       |
+| `tag`        | `tag`        | Determines what semantic text tag to render.                                                                                                                                                                                                                                  | `"code" \| "em" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "pre" \| "span" \| "strong"`   | `'p'`       |
 | `truncate`   | `truncate`   | If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility. | `boolean`                                                                                                | `undefined` |
 | `weight`     | `weight`     | Sets the font weight.                                                                                                                                                                                                                                                         | `"bold" \| "extra-light" \| "light" \| "medium" \| "regular" \| "semibold"`                              | `undefined` |