@kaizen/components 1.48.0 → 1.49.1

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"