playbook_ui 16.1.0.pre.alpha.play2772accesibilitylabelsforphonenumbers14339 → 16.1.0.pre.alpha.play264213817

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36fb0d46cd6c17097f9009934348a9b315ba15d9985154370e07c32dd0999a92
-  data.tar.gz: abf16295e526c44e589e2725f964328a08bd5c390653e45880fa6f64e674906d
+  metadata.gz: 60b41dbbb195e70b9104ae56ec68ad19fb488444096838262600e95bbe239642
+  data.tar.gz: 6d634ec91b1f185be3d7e47e6c88eeab8e545831336742e5661f5066a628e274
 SHA512:
-  metadata.gz: 1ff8b54b04b7bf130094debb4602237263a3fe5b075c3824e96939888f1aa41fa00dc4ac3a7f4fdf373cf680193219f41db76d42e662b9787d0378d036cf75c6
-  data.tar.gz: ac7bd5b2072f1891754d2fc0f86907d0988f4a9b20fee7a5a5369fcc133deb55b0ed9ff8e17a39163ea5fe76f3dd1af80ca2f714249af05ce26931cea077574c
+  metadata.gz: dd16edcd3a1830e2736636eb7f254099c46fe7130e6ef42fd0bb35a17a1e6967f84be79ec23761183e615bdbe0c242b890d30670ef993a3382dbf62c349cc864
+  data.tar.gz: 377d852a602c33c7067b566a1fc838a61836516add1396a720269dd31e28aa370aa8ca400b913b6905c50443a45bf0e6cc9d84951480f09cf7b469e09d04f86c

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,18 +66,8 @@ const TableCellRenderer = ({
         // Find the "owning" colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        
-        // Support function-based styling for conditional rendering
-        const cellFontColorValue = colDef?.columnStyling?.fontColor
-        const cellFontColor = typeof cellFontColorValue === 'function' 
-          ? cellFontColorValue(row) 
-          : cellFontColorValue
-        
-        const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
-        const cellBackgroundColor = typeof cellBackgroundColorValue === 'function' 
-          ? cellBackgroundColorValue(row) 
-          : cellBackgroundColorValue
-        
+        const cellFontColor = colDef?.columnStyling?.fontColor
+        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -920,39 +920,6 @@ test("columnStyling.backgroundColor works as excpected", () => {
   expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
 });
 
-test("columnStyling.cellBackgroundColor works as expected with function", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },    
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
-}); 
-
 test("columnStyling.headerBackgroundColor works as excpected", () => {
   const styledColumnDefs = [
     {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -112,45 +112,4 @@ $pb_button_sizes: (
       @include pb_button_disabled_dark;
     }
   }
-
-  // Icon-only button (icon prop set, no text) - square with equal padding
-  // Rails: uses .pb_button_icon_only class
-  // React: detects when pb_button_content has an empty text span
-  &.pb_button_icon_only,
-  &:has(.pb_button_content > span:empty) {
-    aspect-ratio: 1;
-    min-width: auto;
-    width: auto;
-    height: auto;
-    padding: $pb_button_v_padding !important;
-    min-height: ($pb_button_v_padding * 2) + $font_small;
-    
-    &.pb_button_size_sm {
-      padding: $font_smaller !important;
-      min-height: ($font_smaller * 2) + $font_smaller;
-    }
-    
-    &.pb_button_size_md {
-      padding: $font_small !important;
-      min-height: ($font_small * 2) + $font_small;
-    }
-    
-    &.pb_button_size_lg {
-      padding: ($font_large - 2px) !important;
-      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
-    }
-
-    // Remove margins from icons
-    .button_with_icon,
-    .button_with_icon_right {
-      margin-right: 0;
-      margin-left: 0;
-    }
-
-    // Remove margins from Rails icon wrapper spans
-    > span {
-      margin-right: 0 !important;
-      margin-left: 0 !important;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -51,13 +51,9 @@ const buttonClassName = (props: ButtonPropTypes) => {
     type = 'inline',
     variant = 'primary',
     size = null,
-    text,
-    children,
   } = props
 
   const classNames = ['pb_button_kit']
-  // Icon-only: has icon, no text/children, and not a reaction button (reaction buttons have count)
-  const isIconOnly = icon && !text && !children && variant !== 'reaction'
 
   if (variant) classNames.push(`pb_button_${variant}`)
   if (type) classNames.push(`pb_button_${type}`)
@@ -67,7 +63,6 @@ const buttonClassName = (props: ButtonPropTypes) => {
   if (size) classNames.push(`pb_button_size_${size}`)
   if (variant === 'reaction' && icon && !isValidEmoji(icon)) classNames.push('pb_button_reaction_default')
   if (variant === 'reaction' && highlight) classNames.push('pb_button_active')
-  if (isIconOnly) classNames.push('pb_button_icon_only')
 
   return classNames.join(' ')
 }

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -16,21 +16,17 @@
             <% end %>
         <% end %>
     <% else %>
-    <% if !object.loading %>
-        <% if object.icon && !object.icon_right %>
-            <span>
-                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_right: "xs" })) %>
-            </span>
-        <% end %>
+    <% if object.icon && !object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
+        </span>
     <% end %>
     <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
-    <% if !object.loading %>
-        <% if object.icon && object.icon_right %>
-            <span>
-                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_left: "xs" })) %>
-            </span>
-        <% end %>
+    <% if object.icon && object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
+        </span>
     <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_button/button.rb

@@ -73,10 +73,6 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
-      def icon_only?
-        icon.present? && text.blank? && variant != "reaction"
-      end
-
       def classname
         class_names = ["pb_button_kit"]
         class_names << "pb_button_#{variant}" if variant
@@ -86,7 +82,6 @@ module Playbook
         class_names << "pb_button_size_#{size}" if size
         class_names << "pb_button_reaction_default" if variant === "reaction" && icon && !valid_emoji(icon)
         class_names << "pb_button_active" if variant === "reaction" && highlight
-        class_names << "pb_button_icon_only" if icon_only?
 
         class_names.join(" ")
         generate_classname(class_names.compact.join(" "), separator: " ")

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -131,108 +131,3 @@ test('should render child target prop', () => {
     expect(kit).toHaveAttribute('target', 'child')
     expect(kit).not.toHaveAttribute('rel')
 })
-
-describe('icon-only button', () => {
-    test('adds pb_button_icon_only class when icon is provided without text', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-only-test' }}
-                icon="plus"
-            />
-        )
-
-        const kit = screen.getByTestId('icon-only-test')
-        expect(kit).toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when text is provided', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-with-text-test' }}
-                icon="plus"
-                text="Click me"
-            />
-        )
-
-        const kit = screen.getByTestId('icon-with-text-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when children are provided', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-with-children-test' }}
-                icon="plus"
-            >
-                Click me
-            </Button>
-        )
-
-        const kit = screen.getByTestId('icon-with-children-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when variant is reaction', () => {
-        render(
-            <Button
-                data={{ testid: 'reaction-icon-test' }}
-                icon="plus"
-                variant="reaction"
-            />
-        )
-
-        const kit = screen.getByTestId('reaction-icon-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('adds pb_button_icon_only class with different variants', () => {
-        const variants = ['primary', 'secondary', 'link', 'danger']
-        
-        variants.forEach(variant => {
-            const { unmount } = render(
-                <Button
-                    data={{ testid: `icon-only-${variant}-test` }}
-                    icon="plus"
-                    variant={variant}
-                />
-            )
-
-            const kit = screen.getByTestId(`icon-only-${variant}-test`)
-            expect(kit).toHaveClass('pb_button_icon_only')
-            unmount()
-        })
-    })
-
-    test('adds pb_button_icon_only class with loading state', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-only-loading-test' }}
-                icon="plus"
-                loading
-            />
-        )
-
-        const kit = screen.getByTestId('icon-only-loading-test')
-        expect(kit).toHaveClass('pb_button_icon_only')
-        expect(kit).toHaveClass('pb_button_loading')
-    })
-
-    test('adds pb_button_icon_only class with size variants', () => {
-        const sizes = ['sm', 'md', 'lg']
-        
-        sizes.forEach(size => {
-            const { unmount } = render(
-                <Button
-                    data={{ testid: `icon-only-${size}-test` }}
-                    icon="plus"
-                    size={size}
-                />
-            )
-
-            const kit = screen.getByTestId(`icon-only-${size}-test`)
-            expect(kit).toHaveClass('pb_button_icon_only')
-            expect(kit).toHaveClass(`pb_button_size_${size}`)
-            unmount()
-        })
-    })
-})

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -13,7 +13,6 @@ examples:
   - button_form: Button Form Attribute
   - button_managed_disabled: Button Toggle Disabled State
   - button_managed_disabled_helper: Button Toggle Disabled State Helper
-  - button_icon_variant: Icon Button Variant
   
   react:
   - button_default: Button Variants
@@ -28,7 +27,6 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
-  - button_icon_variant: Icon Button Variant
 
   swift:
   - button_default_swift: Button Variants

data/app/pb_kits/playbook/pb_button/docs/index.js

@@ -4,7 +4,6 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonIconOptions } from './_button_icon_options.jsx'
-export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb

@@ -1,4 +1,36 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
+<%= pb_rails("flex", props: {
+  gap: "md",
+  orientation: "column"
+}) do %>
+
+  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
+  <%= pb_rails("card", props: {
+    flex_direction: { default: "column", md: "row", xl:"row" }
+  })  do %>
+      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
+  <% end %>
+
+  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
+  <%= pb_rails("card", props: {
+    display: "flex",
+    flex_direction: "row",
+    align_items: { default: "start", md: "center", lg: "end" },
+  })  do %>
+    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
+    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
+    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
+  <% end %>
+
+<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
+  <%= pb_rails("card", props: {
+    text_align: { default: "left", md: "center", lg: "right" },
+    width: "100%"
+  })  do %>
+    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
+  <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,8 +4,6 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import colors from '../tokens/exports/_colors.module.scss'
-import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -21,7 +19,6 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
-  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -42,7 +39,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
-    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -128,20 +124,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
-        {requiredIndicator && (
-          <span
-              aria-hidden="true"
-              className="pb_required_indicator"
-              style={{
-                color: colors.error,
-                marginLeft: spacing.space_xs,
-              }}
-          >
-           {'*'}
-          </span>
-        )}
       </Body>
-
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,15 +5,6 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
-      <%= object.text%>
-      <% if object.required_indicator %>
-        <span
-          class="pb_checkbox_required_indicator"
-          aria-hidden="true"
-          style="color: #DA0014;"
-        >*</span>
-      <% end %>
-    <% end %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,8 +23,6 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
-  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -5,4 +5,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -10,7 +10,6 @@ import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
-import colors from "../tokens/exports/_colors.module.scss"
 
 type DatePickerProps = {
   allowInput?: boolean,
@@ -41,10 +40,9 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId: string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
-  requiredIndicator?: boolean
   scrollContainer?: string,
   selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
@@ -99,7 +97,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     plugins = false,
     position,
     positionElement,
-    requiredIndicator,
     scrollContainer,
     selectionType = '',
     showTimezone = false,
@@ -199,8 +196,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
-  const errorId = error ? `${pickerId}-error` : undefined
-
   return (
     <div
         {...ariaProps}
@@ -216,23 +211,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-           <label htmlFor={pickerId}>
-            {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
-                {label} <span style={{ color: `${colors.error}` }}>*</span>
-              </Caption>
-            ) : (
-              <Caption className="pb_date_picker_kit_label"
-                  text={label}
-              />
-            )}
-          </label>
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -246,9 +232,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
-                      aria={{ atomic: "true", live: "polite" }}
-                      htmlOptions={{ role: "alert" }}
-                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -4,35 +4,26 @@
     'data-validation-message' => object.validation_message,
       ) do %>
   <div class="input_wrapper">
-    <% if !object.hide_label && object.label %>
-      <label for="<%= object.picker_id %>">
-        <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
-            <%= object.label %><span style="color: #DA0014;"> *</span>
-          <% end %>
-        <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
-        <% end %>
-      </label>
-    <% end %>
     <% if content.present? %>
       <%= content %>
     <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-    }) %>
+      <%= pb_rails("text_input", props: {
+        aria: object.input_aria,
+        autocomplete: false,
+        cursor: object.cursor,
+        dark: object.dark,
+        data: object.input_data,
+        disabled: object.disable_input,
+        error: object.error,
+        id: object.picker_id,
+        label: object.hide_label ? nil : object.label,
+        margin_bottom: "none",
+        name: object.name,
+        placeholder: object.placeholder,
+        required: object.required,
+      }) %>
     <% end %>
+
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -71,8 +71,6 @@ module Playbook
                                    default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
@@ -115,7 +113,6 @@ module Playbook
           position: position,
           positionElement: position_element,
           required: required,
-          requiredIndicator: required_indicator,
           selectionType: selection_type,
           showTimezone: show_timezone,
           staticPosition: static_position,