@kaizen/components 1.48.0 → 1.49.0

package/src/RichTextEditor/utils/plugins/LinkManager/{validation.ts → validation.tsx}

@@ -1,3 +1,5 @@
+import React from "react"
+
 export type ValidationResponse = {
   status: "success" | "error" | "default"
   message?: React.ReactNode
@@ -9,7 +11,15 @@ export const validateLink = (href: string): ValidationResponse => {
   if (!isValidLink) {
     return {
       status: "error",
-      message: "Please enter a valid URL",
+      message: (
+        <>
+          Empty or invalid link. Links must start with http or https, e.g:
+          <ul>
+            <li>https://google.com</li>
+            <li>http://www.google.com</li>
+          </ul>
+        </>
+      ),
     }
   }
 

package/src/Select/Select.tsx

@@ -35,6 +35,11 @@ export type SelectProps = {
    * @default false
    */
   fullWidth?: boolean
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & ReactSelectProps<any, boolean>
 
 /**
@@ -53,6 +58,7 @@ export const Select = React.forwardRef<any, SelectProps>(
       fullWidth: propsFullWidth,
       className: propsClassName,
       isDisabled,
+      placeholder,
       ...props
     },
     ref
@@ -92,6 +98,7 @@ export const Select = React.forwardRef<any, SelectProps>(
           {...props}
           ref={ref}
           aria-labelledby={labelId}
+          placeholder={placeholder || ""}
           components={{
             Control,
             Placeholder,
@@ -126,12 +133,13 @@ interface AsyncProps
 
 export const AsyncSelect = React.forwardRef(
   (
-    { className: propsClassName, ...props }: AsyncProps,
+    { className: propsClassName, placeholder, ...props }: AsyncProps,
     ref: React.Ref<any>
   ) => (
     <Async
       {...props}
       ref={ref}
+      placeholder={placeholder || ""}
       components={{
         Control,
         Placeholder,

package/src/Select/_docs/Select.stories.tsx

@@ -96,7 +96,4 @@ export const Async: Story = {
       </>
     )
   },
-  args: {
-    placeholder: "Placeholder",
-  },
 }

package/src/TextArea/TextArea.tsx

@@ -13,6 +13,11 @@ export type TextAreaProps = {
   status?: "default" | "error" | "caution"
   autogrow?: boolean
   reversed?: boolean
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>
 
 export const TextArea = ({

package/src/__future__/Select/Select.tsx

@@ -71,6 +71,11 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
    * Creates a portal for the Popover to the matching element id
    */
   portalContainerId?: string
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
@@ -91,7 +96,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   classNameOverride,
   selectedKey,
   description,
-  placeholder,
+  placeholder = "",
   isDisabled,
   portalContainerId,
   ...restProps

package/src/__future__/Select/_docs/Select.stickersheet.stories.tsx

@@ -35,7 +35,6 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Select
                 label="Label"
                 items={singleMockItems}
-                placeholder="Placeholder"
                 isReversed={isReversed}
               />
             </StickerSheet.Cell>
@@ -69,28 +68,24 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="hover"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="active"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="focus"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isDisabled
               isReversed={isReversed}
             />
@@ -104,7 +99,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Full width"
               items={singleMockItems}
-              placeholder="Placeholder"
               isFullWidth
               isReversed={isReversed}
             />
@@ -115,7 +109,6 @@ const StickerSheetTemplate: StickerSheetStory = {
                 label="Custom Width (50%)"
                 items={singleMockItems}
                 isFullWidth
-                placeholder="Placeholder"
                 isReversed={isReversed}
               />
             </div>
@@ -129,7 +122,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Error"
               items={singleMockItems}
-              placeholder="Placeholder"
               description="This is a description"
               status="error"
               validationMessage="This is an error"
@@ -138,7 +130,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Caution"
               items={singleMockItems}
-              placeholder="Placeholder"
               description="This is a description"
               status="caution"
               validationMessage="This is an error"

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -13,6 +13,10 @@ export type SelectToggleProps = {
   /** Props for the element representing the selected value. */
   valueProps: DOMAttributes<FocusableElement>
   isOpen?: boolean
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
   placeholder?: string
   /** Updates the styling of the validation. */
   status?: "error" | "caution"