playbook_ui 16.0.0.pre.alpha.play250713764 → 16.0.0.pre.alpha.play263413732

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3375eae560027fa38471076af3baf4bf544998d1b3d6c64ec090618c547b63ee
-  data.tar.gz: 4d5b661a5cf159ec280d4368d99d2d62ec0b0617fe8730855626f58c7c6eb61f
+  metadata.gz: 28617f4ae9161e1509366284f53708aacf06482d3c3acf6ad556281eacc6eb0f
+  data.tar.gz: 1d4a3acb8922f30259bed23161b5adfe9ce1aaea99880a26181deec26b5420d1
 SHA512:
-  metadata.gz: c92465ae44fc477943f36744a4eb78cae6f53b8e35892c182e63c6fc3e61929f4a1e2052c54a7e5e9117f50acbea302b4bda49a3307d26b44c9dcbd5416d029a
-  data.tar.gz: c3e1da21c52273c67204af4c32a46d7d7850d11268352db8896a1781c33a861827f1069a71b8eedba4b18d0ba51cee8f94a9d051dd3e9931810a2b9078f091fb
+  metadata.gz: 0afdd7ba0dfd9a04dcd3fe768150d05be2a4bd61066654664d4593f19e030046616cc4fa0d08305fbbbdda970a4eceff4b20a3cb7dbbef1deb1d1896ba320ca4
+  data.tar.gz: 2b36e35618c97ba6be60522fb2166d3a737e8a24db9f8ff46583b7c22b33f32a220e28ae8ba5e8b54f00847659258fee7aa5cf5a4b6cdfec6cfdf6e6b7462b17

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -21,7 +21,7 @@ const nextValue = (value: SortValue[], name: string): SortValue => {
 }
 
 const directionIcon = (dir: Direction) => (
-  dir == 'asc' ? 'arrow-up-short-wide' : 'arrow-down-wide-short'
+  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
 )
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,7 +1,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-1",
+    id: "1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-2",
+    id: "def2",
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
       { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FilterDefault = (props) => {
-  const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
-  const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
-
-  const handleSortChange = (sortOptions) => {
-    setSortValue(sortOptions)
-    alert(JSON.stringify(sortOptions[0]))
-  }
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
 
-  const handleSortChange2 = (sortOptions) => {
-    setSortValue2(sortOptions)
-  }
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={handleSortChange}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={handleSortChange2}
+          onSortChange={SortingChangeCallback}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue2}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -44,9 +44,9 @@ module Playbook
       def sort_icon(direction)
         case direction
         when "asc"
-          "arrow-up-short-wide"
+          "sort-amount-up"
         when "desc"
-          "arrow-down-wide-short"
+          "sort-amount-down"
         else
           ""
         end

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -1,13 +1,12 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -7,6 +7,7 @@ import { globalProps } from "../utilities/globalProps"
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
+import colors from '../tokens/exports/_colors.module.scss'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
@@ -25,6 +26,7 @@ type PassphraseProps = {
   inputProps?: GenericObject,
   label?: string,
   onChange: (inputValue: string) => void,
+  requiredIndicator?: boolean,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -43,6 +45,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => undefined,
+    requiredIndicator = false,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -99,6 +102,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
 
   const shieldIcon = getAllIcons()["shieldCheck"]
   const eyeIcon = getAllIcons()["eye"]
+  const hasLabel = label && label !== ""
 
   return (
     <div
@@ -109,11 +113,22 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
         id={id}
     >
       <label>
-        <Flex align="baseline">
-          <Caption
-              className="passphrase-label"
-              text={label}
-          />
+        <Flex
+            align="baseline"
+            {...(hasLabel ? { marginBottom: "xs" } : {})}
+        >
+          {hasLabel && (requiredIndicator ? (
+            <Caption
+                className="passphrase-label"
+            >
+              {label} <span style={{ color: `${colors.error}` }}>*</span>
+            </Caption>
+          ) : (
+            <Caption
+                className="passphrase-label"
+                text={label}
+            />
+          ))}
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
                 className="passphrase-tips"

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,6 +120,7 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
+        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("passphrase", props: {
+  id: "passphrase_required_indicator",
+  label: "Passphrase",
+  placeholder: "Enter passphrase",
+  required_indicator: true,
+  value: "passphrase",
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Passphrase from '../_passphrase'
+
+const PassphraseRequiredIndicator = (props) => {
+  const [passphrase, setPassphrase] = useState('')
+  const handleOnChangePassphrase = (e) => {
+    setPassphrase(e.target ? e.target.value : e)
+  }
+
+  return (
+      <Passphrase
+          id="passphrase_required_indicator"
+          label="Passphrase"
+          name="passphrase"
+          onChange={handleOnChangePassphrase}
+          requiredIndicator
+          value={passphrase}
+          {...props}
+      />
+  )
+}
+
+export default PassphraseRequiredIndicator

data/app/pb_kits/playbook/{pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md → pb_passphrase/docs/_passphrase_required_indicator.md}

@@ -1,3 +1,3 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
 
 You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -9,6 +9,7 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -19,3 +20,4 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator

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

@@ -6,3 +6,4 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
+export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -10,6 +10,7 @@ module Playbook
                              values: %w[always xs sm md lg xl],
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
       prop :value, type: Playbook::Props::String
 
       def classname
@@ -23,6 +24,7 @@ module Playbook
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
+          requiredIndicator: required_indicator,
           showTipsBelow: show_tips_below,
           tips: tips,
           uncontrolled: true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, within } from '../utilities/test-utils'
 import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
@@ -86,3 +86,32 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
+
+test('renders required indicator asterisk when requiredIndicator is true', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+        requiredIndicator
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).toHaveTextContent('*')
+})
+
+test('does not render required indicator asterisk when requiredIndicator is false', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).not.toHaveTextContent('*')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -36,6 +36,7 @@ type PhoneNumberInputProps = {
   excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
+  requiredIndicator?: boolean,
   value?: string,
   formatAsYouType?: boolean,
   strictMode?: boolean,
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onlyCountries = [],
     excludeCountries = [],
     required = false,
+    requiredIndicator = false,
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
@@ -533,6 +535,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       validateErrors()
     },
     onChange: formatAsYouType ? undefined : handleOnChange,
+    requiredIndicator,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+  id: "phone_number_input_required_indicator",
+  label: "Required Phone Number",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputRequiredIndicator = (props) => (
+    <>
+        <PhoneNumberInput
+            id='phone_number_input_required_indicator'
+            label='Phone Number'
+            requiredIndicator
+            {...props} />
+    </>
+)
+
+export default PhoneNumberInputRequiredIndicator

data/app/pb_kits/playbook/{pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md → pb_phone_number_input/docs/_phone_number_input_required_indicator.md}

@@ -1,3 +1,3 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
 
 You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -12,6 +12,7 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -24,3 +25,4 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator

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

@@ -9,3 +9,4 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
+export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,6 +7,8 @@ module Playbook
                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -52,6 +54,7 @@ module Playbook
           excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
+          requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
         }

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act } from "../utilities/test-utils";
+import { render, screen, act, within } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -129,7 +129,7 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
     };
 
     render(<PhoneNumberInput {...props} />);
-    
+
     const input = screen.getByRole("textbox");
     
     act(() => {
@@ -154,7 +154,38 @@ test("should pass countrySearch prop to component", () => {
     };
   
     render(<PhoneNumberInput {...props} />);
-    
+
     const wrapper = screen.getByTestId('phone-input-with-search');
     expect(wrapper).toBeInTheDocument();
 });
+
+test("renders required indicator asterisk when requiredIndicator is true", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Required Phone Number",
+        requiredIndicator: true,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Required Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).toHaveTextContent("*");
+});
+
+test("does not render required indicator asterisk when requiredIndicator is false", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Phone Number",
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).not.toHaveTextContent("*");
+});  

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -4,8 +4,6 @@ import { TrixEditor } from 'react-trix'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
-import Caption from '../pb_caption/_caption'
-import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
@@ -42,14 +40,12 @@ type RichTextEditorProps = {
   inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
-  label?: string,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
   inputHeight?: "sm" | "md" | "lg",
   inputMinHeight?: "sm" | "md" | "lg",
-  requiredIndicator?: boolean,
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,7 +64,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    id,
     inputOptions = {},
     inline = false,
     extensions,
@@ -81,9 +76,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md",
-    requiredIndicator = false,
-    label,
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -93,7 +86,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
-
+  
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
     setTimeout(() => {
@@ -101,7 +94,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       if (oldId) {
         const hiddenInput = document.getElementById(oldId)
         if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId
+          const newId = (inputOptions.id as string) || oldId  
           hiddenInput.id = newId
           editorInstance.element.setAttribute('input', newId)
 
@@ -126,7 +119,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       // set button attributes
       inlineCodeButton.dataset.trixAttribute = 'inlineCode'
       blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    }
+    } 
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
@@ -154,7 +147,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
-
+    
     const handleClickOutside = (event: Event) => {
       if (isClickInContainer(event) || isClickInPopover(event)) return
       setShowToolbarOnFocus(false)
@@ -222,29 +215,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         className={css}
         ref={focus ? containerRef : undefined}
     >
-    {label && (
-      <label  htmlFor={id}>
-        {
-          requiredIndicator ? (
-            <Caption className="pb_text_input_kit_label"
-                marginBottom="xs"
-            >
-              {label} <span style={{ color: `${colors.error}` }}>*</span>
-            </Caption>
-          ) : (
-            <Caption
-                className="pb_text_input_kit_label"
-                marginBottom="xs"
-                text={label}
-            />
-          )
-        }
-
-      </label>
-    )}
       {
         advancedEditor ? (
-          <div
+          <div 
               className={classnames(
                 "pb_rich_text_editor_advanced_container",
                 { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }

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

@@ -9,7 +9,6 @@ examples:
   - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
-  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
 
   react:
@@ -32,7 +31,5 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_required_indicator: Required Indicator
-  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -19,5 +19,3 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
-export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
-export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -21,9 +21,6 @@ module Playbook
       prop :template
       prop :placeholder
       prop :input_options
-      prop :label
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -54,8 +51,6 @@ module Playbook
           template: template,
           placeholder: placeholder,
           inputOptions: input_options,
-          label: label,
-          requiredIndicator: required_indicator,
         }
       end
     end