Allow label, helpText, prefix and suffix as params

.gitignore

@@ -13,7 +13,8 @@ dist
 dist-ssr
 coverage
 *.local
-Demo.vue
+./src/Demo.vue
+./src/demo/*
 
 /cypress/videos/
 /cypress/screenshots/

src/components/Checkbox/Checkbox.vue

@@ -7,10 +7,12 @@ Choice(
   @mouseover="mouseOver = true",
   @mouseout="mouseOver = false",
 )
-  template(#label, v-if="slots.label")
-    slot(name="label")
-  template(#help-text, v-if="slots['help-text']")
-    slot(name="help-text")
+  template(#label, v-if="slots.label || label")
+    slot(name="label" v-if="slots.label")
+    template(v-else-if="label") {{ label }}
+  template(#help-text, v-if="slots['help-text'] || helpText")
+    slot(name="help-text" v-if="slots['help-text']")
+    template(v-else-if="helpText") {{ helpText }}
   span(:class="wrapperClassName")
     input(
       :id="uniqueId",
@@ -58,10 +60,14 @@ interface Props {
   ariaControls?: string;
   /** Indicates the ID of the element that describes the checkbox */
   ariaDescribedBy?: string;
+  /** Label for the checkbox: overriden by the #label slot */
+  label?: string
   /** Visually hide the label */
   labelHidden?: boolean;
   /** Checkbox is selected. `indeterminate` shows a horizontal line in the checkbox */
   checked?: boolean | 'indeterminate';
+  /** Additional text to aide in use: overriden by #help-text slot */
+  helpText?: string
   /** Disable input */
   disabled?: boolean;
   /** ID for form input */

src/components/FormLayout/components/Group/Group.vue

@@ -20,11 +20,12 @@ div(
         component(:is="item")
     slot(v-else)
   div(
-    v-if="slots['help-text']",
+    v-if="slots['help-text'] || helpText",
     :id="helpTextId",
     :class="styles.HelpText",
   )
-    slot(name="help-text")
+    slot(name="help-text" v-if="slots['help-text']")
+    template(v-else) {{ helpText }}
 </template>
 
 <script setup lang="ts">
@@ -39,6 +40,7 @@ import { UseUniqueId } from '@/use';
  */
 interface Props {
   condensed?: boolean;
+  helpText?: string;
 }
 
 const props = defineProps<Props>();

src/components/Labelled/Labelled.vue

@@ -1,13 +1,15 @@
 <template lang="pug">
 div(:class="className")
-  div(v-if="$slots.label", :class="styles.LabelWrapper")
+  div(v-if="$slots.label || label", :class="styles.LabelWrapper")
     Label(
       :id="id",
       :requiredIndicator="requiredIndicator",
       :hidden="false",
       v-bind="$attrs",
     )
-      slot(name="label")
+      slot(name="label" v-if="$slots.label")
+      template(v-else-if="label")
+        | {{ label }}
     div(
       v-if="action",
       :class="styles.Action"
@@ -31,11 +33,13 @@ div(:class="className")
       :is="error",
     )
   div(
-    v-if="$slots['help-text']",
+    v-if="$slots['help-text'] || helpText",
     :class="styles.HelpText",
     :id="helpTextID(id)",
   )
-    slot(name="help-text")
+    slot(name="help-text" v-if="$slots['help-text']")
+    template(v-else-if="helpText")
+      | {{ helpText }}
 </template>
 
 <script setup lang="ts">
@@ -56,10 +60,14 @@ interface LabelledProps {
   error?: Error;
   /** An action */
   action?: Action;
+  /** Label: overriden by #label slot  */
+  label?: string;
   /** Visually hide the label */
   labelHidden?: boolean;
   /** Visual required indicator for the label */
   requiredIndicator?: boolean;
+  /** Help Text: Overriden by #helpText slot */
+  helpText?: string;
 }
 
 const props = defineProps<LabelledProps>();

src/components/RadioButton/RadioButton.vue

@@ -6,10 +6,12 @@ Choice(
   @mouseover="mouseOver = true",
   @mouseout="mouseOver = false",
 )
-  template(#label, v-if="slots.label")
-    slot(name="label")
-  template(#help-text, v-if="slots['help-text']")
-    slot(name="help-text")
+  template(#label, v-if="slots.label || label")
+    slot(name="label" v-if="slots.label")
+    template(v-else-if="label") {{ label }}
+  template(#help-text, v-if="slots['help-text'] || helpText")
+    slot(name="help-text" v-if="slots['help-text']")
+    template(v-else-if="helpText") {{ helpText }}
   span(:class="styles.RadioButton")
     input(
       :id="uniqueId",
@@ -39,10 +41,14 @@ import { helpTextID } from '../Choice/utils';
 interface Props {
   /** Indicates the ID of the element that describes the the radio button */
   ariaDescribedBy?: string;
+  /** Label for the radio button: overriden by #label slot */
+  label?: string;
   /** Visually hide the label */
   labelHidden?: boolean;
   /** Radio button is selected */
   checked?: boolean;
+  /** Additional text to aid in use: overriden by #help-text slot */
+  helpText?: string;
   /** Disable input */
   disabled?: boolean;
   /** ID for form input */

src/components/RangeSlider/RangeSlider.vue

@@ -10,12 +10,15 @@ DualThumb(
   template(#label, v-if="slots.label || label")
     slot(v-if="slots.label", name="label")
     template(v-else) {{ label }}
-  template(#help-text, v-if="slots['help-text']")
-    slot(name="help-text")
-  template(#prefix, v-if="slots.prefix")
-    slot(name="prefix")
-  template(#suffix, v-if="slots.suffix")
-    slot(name="suffix")
+  template(#help-text, v-if="slots['help-text']" || helpText)
+    slot(v-if="slots['help-text']" name="help-text")
+    template(v-else) {{ helpText }}
+  template(#prefix, v-if="slots.prefix || prefix")
+    slot(v-if="slots.prefix" name="prefix")
+    template(v-else) {{ prefix }}
+  template(#suffix, v-if="slots.suffix || suffix")
+    slot(v-if="slots.suffix" name="suffix")
+    template(v-else) {{ suffix }}
 SingleThumb(
   v-else,
   v-model="singleValue",
@@ -27,12 +30,15 @@ SingleThumb(
   template(#label, v-if="slots.label || label")
     slot(v-if="slots.label", name="label")
     template(v-else) {{ label }}
-  template(#help-text, v-if="slots['help-text']")
-    slot(name="help-text")
-  template(#prefix, v-if="slots.prefix")
-    slot(name="prefix")
-  template(#suffix, v-if="slots.suffix")
-    slot(name="suffix")
+  template(#help-text, v-if="slots['help-text'] || helpText")
+    slot(v-if="slots['help-text']" name="help-text")
+    template(v-else) {{ helpText }}
+  template(#prefix, v-if="slots.prefix || prefix")
+    slot(v-if="slots.prefix" name="prefix")
+    template(v-else) {{ prefix }}
+  template(#suffix, v-if="slots.suffix || suffix")
+    slot(v-if="slots.suffix" name="suffix")
+    template(v-else) {{ suffix }}
 </template>
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
@@ -59,10 +65,16 @@ interface RangeSliderProps {
   step?: number;
   /** Provide a tooltip while sliding, indicating the current value */
   output?: boolean;
+  /** Additional text to aid in use */
+  helpText?: string;
   /** Display an error message */
   error?: ErrorType;
   /** Disable input */
   disabled?: boolean;
+  /** Element to display before the input */
+  prefix?: string;
+  /** Element to display after the input */
+  suffix?: string;
 }
 
 const props = withDefaults(defineProps<RangeSliderProps>(), {

src/components/Select/Select.vue

@@ -5,6 +5,8 @@ Labelled(
   :action="labelAction",
   :label-hidden="selectLabelHidden",
   :required-indicator="requiredIndicator",
+  :label="label",
+  :help-text="helpText",
 )
   template(
     v-if="!labelInline && slots.label",
@@ -97,13 +99,16 @@ import { helpTextID } from '../Labelled/utils';
 interface SelectProps {
   /** List of options or option groups to choose from */
   options: (SelectOption | SelectGroup)[];
-  /** Label for the select */
+  /** Label for the select: overriden by #label slot  */
+  label?: string;
   /** Adds an action to the label */
   labelAction?: Action;
   /** Visually hide the label */
   labelHidden?: boolean;
   /** Show the label to the left of the value, inside the control */
   labelInline?: boolean;
+  /** Additional text to aide in use: overriden by #helpText slot */
+  helpText?: string;
   /** Disable input */
   disabled?: boolean;
   /** Example text to display as placeholder */

src/components/TextField/TextField.vue

@@ -5,6 +5,8 @@ Labelled(
   :action="labelAction",
   :labelHidden="labelHidden",
   :requiredIndicator="requiredIndicator",
+  :label="label",
+  :help-text="helpText",
 )
   template(#label, v-if="slots.label")
     slot(name="label")
@@ -20,12 +22,15 @@ Labelled(
       @click="handleClick",
     )
       div(
-        v-if="slots.prefix",
+        v-if="slots.prefix || prefix",
         :id="`${id}Prefix`",
         :class="styles.Prefix",
         ref="prefixRef",
       )
-        slot(name="prefix")
+        slot(name="prefix" v-if="slots.prefix")
+        template(v-else-if="prefix")
+          | {{ prefix }}
+
       div(
         v-if="slots['vertical-content']"
         :class="styles.VerticalContent",
@@ -37,6 +42,8 @@ Labelled(
         component(
           :is="multiline ? 'textarea' : 'input'",
           :id="id",
+          :label="label",
+          :help-text="helpText",
           :name="name",
           :disabled="disabled",
           :readonly="readOnly",
@@ -78,6 +85,8 @@ Labelled(
         v-else,
         :is="multiline ? 'textarea' : 'input'",
         :id="id",
+        :label="label",
+        :help-text="helpText",
         :name="name",
         :disabled="disabled",
         :readonly="readOnly",
@@ -116,12 +125,14 @@ Labelled(
       )
         template(v-if="multiline") {{ modelValue }}
       div(
-        v-if="slots.suffix",
+        v-if="slots.suffix || suffix",
         :id="`${id}Suffix`",
         :class="styles.Suffix",
         ref="suffixRef",
       )
-        slot(name="suffix")
+        slot(name="suffix" v-if="slots.suffix")
+        template(v-else-if="suffix")
+          | {{ suffix }}
       div(
         v-if="showCharacterCount",
         :class="characterCountClassName",
@@ -206,10 +217,14 @@ interface NonMutuallyExclusiveProps {
   placeholder?: string;
   /** Initial value for the input */
   modelValue?: string;
+  /** Label for the input: overridden by #label slot */
+  label?: string;
   /** Adds an action to the label */
   labelAction?: LabelledProps['action'];
   /** Visually hide the label */
   labelHidden?: boolean;
+  /** Additional hint text to display: overridden by #label slot */
+  helpText?: string;
   /** Disable the input */
   disabled?: boolean;
   /** Show a clear text button in the input */
@@ -274,6 +289,10 @@ interface NonMutuallyExclusiveProps {
   monospaced?: boolean;
   /** Indicates whether or not the entire input/text area text should be selected on focus */
   selectTextOnFocus?: boolean;
+  /** */
+  suffix?:string
+  /** */
+  prefix?:string
 }
 
 const i18n = UseI18n();

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import Demo from './Demo.vue';
+import Demo from './demo/Demo.vue';
 import PolarisVue from './polaris-vue';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any