playbook_ui 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible13821 → 16.1.0.pre.alpha.play2724typeaheadindicator13970

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -122,6 +122,80 @@ test('generated placeholder prop', () => {
 
 })
 
+test('placeholder prop passed directly to Dropdown', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Choose a country"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Choose a country')
+})
+
+test('placeholder works with default variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Select an option"
+        variant="default"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select an option')
+})
+
+test('placeholder works with subtle variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Pick an option"
+        separators={false}
+        variant="subtle"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_subtle_separators_hidden')
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Pick an option')
+})
+
+test('placeholder works with quickpick variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        placeholder="Select a date range"
+        variant="quickpick"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_quickpick')
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select a date range')
+})
+
+test('placeholder shows default "Select..." when not provided', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select...')
+})
+
 test('generated label prop', () => { 
   render (
     <Dropdown
@@ -466,7 +540,27 @@ test("quickpick clears selection when clicking X icon", () => {
   expect(trigger).toHaveTextContent("Select...")
 })
 
+test("quickpick hides clear icon when clearable is false", () => {
+  render(
+    <Dropdown
+        clearable={false}
+        data={{ testid: testId }}
+        defaultValue="This Week"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Week")
+  
+  const clearIcon = kit.querySelector('[aria-label="times icon"]')
+  expect(clearIcon).not.toBeInTheDocument()
+})
+
 test("quickpick returns date array values when option selected", () => {
+  // eslint-disable-next-line react/no-multi-comp
   const TestComponent = () => {
     const [selected, setSelected] = useState(null)
     return (

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -5,9 +5,13 @@ module Playbook
     class DropdownContainer < Playbook::KitBase
       prop :searchbar, type: Playbook::Props::Boolean,
                        default: false
+      prop :constrain_height, type: Playbook::Props::Boolean,
+                              default: false
 
       def classname
-        generate_classname("pb_dropdown_container", "close", separator: " ")
+        classes = %w[pb_dropdown_container close]
+        classes << "constrain_height" if constrain_height
+        generate_classname(*classes, separator: " ")
       end
 
       def data

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -48,6 +48,7 @@ export default class PbDropdown extends PbEnhancedElement {
     this.updatePills();
 
     this.clearBtn = this.element.querySelector(CLEAR_ICON_SELECTOR);
+    this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
       this.clearBtn.addEventListener("click", (e) => {
@@ -60,6 +61,10 @@ export default class PbDropdown extends PbEnhancedElement {
 
   updateClearButton() {
     if (!this.clearBtn) return;
+    if (!this.isClearable) {
+      this.clearBtn.style.display = "none";
+      return;
+    }
     const hasSelection = this.isMultiSelect
       ? this.selectedOptions.size > 0
       : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
@@ -109,15 +114,51 @@ export default class PbDropdown extends PbEnhancedElement {
   adjustDropdownHeight() {
     if (this.target.classList.contains("open")) {
       const el = this.target;
+      const shouldConstrain = el.classList.contains("constrain_height");
       el.style.height = "auto";
       requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
-        el.offsetHeight; // force reflow
-        el.style.height = newHeight;
+        if (shouldConstrain) {
+          // Calculate 18em in pixels (matches SCSS max-height: 18em)
+          const fontSize = parseFloat(getComputedStyle(el).fontSize) || 16;
+          const maxHeight = fontSize * 18;
+          const scrollHeight = el.scrollHeight;
+          const newHeight = Math.min(scrollHeight, maxHeight);
+          el.offsetHeight; // force reflow
+          el.style.height = newHeight + "px";
+        } else {
+          el.offsetHeight; // force reflow
+          el.style.height = el.scrollHeight + "px";
+        }
       });
     }
   }
 
+  adjustDropdownPosition(container) {
+    if (!container) return;
+
+    const wrapper = this.element.querySelector(".dropdown_wrapper");
+    if (!wrapper) return;
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const h = container.getBoundingClientRect().height || container.scrollHeight;
+    const spaceBelow = window.innerHeight - wrapperRect.bottom;
+    const spaceAbove = wrapperRect.top;
+
+    // If not enough space below but enough space above, position above
+    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+      container.style.top = "auto";
+      container.style.bottom = "calc(100% + 5px)";
+      container.style.marginTop = "0";
+      container.style.marginBottom = "0";
+    } else {
+      // Default: position below
+      container.style.top = "";
+      container.style.bottom = "";
+      container.style.marginTop = "";
+      container.style.marginBottom = "";
+    }
+  }
+
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
     let hasMatch = false
@@ -365,7 +406,21 @@ export default class PbDropdown extends PbEnhancedElement {
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
-    elem.style.height = elem.scrollHeight + "px";
+    
+    const shouldConstrain = elem.classList.contains("constrain_height");
+    if (shouldConstrain) {
+      // Calculate height respecting max-height constraint (18em)
+      const fontSize = parseFloat(getComputedStyle(elem).fontSize) || 16;
+      const maxHeight = fontSize * 18; // matches SCSS max-height: 18em
+      const scrollHeight = elem.scrollHeight;
+      const height = Math.min(scrollHeight, maxHeight);
+      elem.style.height = height + "px";
+    } else {
+      elem.style.height = elem.scrollHeight + "px";
+    }
+    
+    // Auto-position dropdown above if not enough space below
+    this.adjustDropdownPosition(elem);
   }
 
   hideElement(elem) {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -19,6 +19,7 @@ type DropdownContainerProps = {
   aria?: { [key: string]: string };
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
+  constrainHeight?: boolean;
   dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -31,6 +32,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     aria = {},
     children,
     className,
+    constrainHeight = false,
     dark = false,
     data = {},
     htmlOptions = {},
@@ -54,6 +56,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
+    constrainHeight && "constrain_height",
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
+    clearable,
     filterItem,
     handleBackspace,
     handleChange,
@@ -225,7 +226,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   > 
                   {
-                    selectedArray.length > 0 && (
+                    clearable !== false && selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
                         <Icon
                             cursor="pointer"

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' ? 'sort-amount-up' : 'sort-amount-down'
+  dir == 'asc' ? 'arrow-up-short-wide' : 'arrow-down-wide-short'
 )
 
 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: "1",
+    id: "filter-demo-1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "def2",
+    id: "filter-demo-2",
     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 from 'react'
+import React, { useState } from 'react'
 
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,11 +6,18 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
-const SortingChangeCallback = (sortOptions) => {
-  alert(JSON.stringify(sortOptions[0]))
-}
-
 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 handleSortChange2 = (sortOptions) => {
+    setSortValue2(sortOptions)
+  }
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -29,7 +36,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={SortingChangeCallback}
+          onSortChange={handleSortChange}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -38,7 +45,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          sortValue={sortValue}
           {...props}
       >
       {({ closePopover }) => (
@@ -82,7 +89,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={SortingChangeCallback}
+          onSortChange={handleSortChange2}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -91,7 +98,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          sortValue={sortValue2}
           {...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"
-          "sort-amount-up"
+          "arrow-up-short-wide"
         when "desc"
-          "sort-amount-down"
+          "arrow-down-wide-short"
         else
           ""
         end

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

@@ -1,13 +1,16 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= 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.phone_number_field :example_phone_number_field, props: { label: true, 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.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.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -15,7 +15,7 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: 1,
+    truncate: "1",
 }) %>
 
 <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
@@ -24,19 +24,19 @@
       name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
-      truncate: 1,
+      truncate: "1",
       id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
-      truncate: 1,
+      truncate: "1",
       id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
       text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
-      truncate: 1,
+      truncate: "1",
   }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={1}
+          truncate={"1"}
           {...props}
       />
       <Caption text="Form Pill Truncation"/>
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
             name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
             onClick={() => alert('Click!')}
             tabIndex={0}
-            truncate={1}
+            truncate={"1"}
         />
         <FormPill
             icon="badge-check"
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="icon and a very long tag to show truncation"
-            truncate={1}
+            truncate={"1"}
         />
         <FormPill
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="form pill with a very long tag to show truncation"
-            truncate={1}
+            truncate={"1"}
         />
       </Card>
     </>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -49,6 +49,10 @@ module Playbook
       def wrapped_class
         wrapped ? "wrapped" : nil
       end
+
+      def truncate_props
+        nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -44,7 +44,6 @@ type NavItemProps = {
   marginX?: Spacing;
   marginY?: Spacing;
   disabled?: boolean;
-  inactive?: boolean;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
@@ -92,7 +91,6 @@ const NavItem = (props: NavItemProps) => {
     marginX,
     marginY,
     disabled = false,
-    inactive = false,
   } = props;
 
   const spacingMarginProps = {
@@ -150,7 +148,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
   const disabledClass = disabled ? "pb_nav_item_disabled" : "";
-  const inactiveClass = inactive ? "pb_nav_item_inactive" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
@@ -184,7 +181,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     tagClasses,
     collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
     disabledClass,
-    inactiveClass,
     className
   );
 
@@ -230,7 +226,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-              className={collapsibleClasses + ` ${inactiveClass}`}
+              className={collapsibleClasses}
               collapsed={collapsed}
               icon={iconRight && iconRight}
               iconSize="xs"

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -79,8 +79,7 @@
 }
 
 // Disabled scss
-.pb_nav_item_disabled, 
-.pb_nav_item_inactive {
+.pb_nav_item_disabled {
   cursor: not-allowed !important;
   .pb_nav_list_item_text, 
   .pb_nav_list_item_icon_left,
@@ -101,28 +100,3 @@
     }
   }
 }
-
-.pb_nav_item_inactive { 
-  .pb_nav_list_item_text_collapsible {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-}
-
-.pb_nav_item_inactive { 
-  .pb_collapsible_content_kit {
-  .pb_nav_list_item_text_collapsible {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-}
-   @media (hover: hover) {
-    &:hover {
-      .pb_nav_list_item_icon_section_collapsible {
-        path {
-          color: $text_lt_lighter !important;
-        }
-      }
-    }
-  }
-}

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - default_nav: Default
   - with_icons_nav: With Icons
   - with_img_nav: With Custom Icon
@@ -27,7 +26,6 @@ examples:
   - tab_nav: Tab Nav
 
   react:
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - default_nav: Default
   - with_icons_nav: With Icons
   - with_img_nav: With Custom Icon

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

@@ -22,5 +22,4 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
-export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -20,7 +20,6 @@ module Playbook
       prop :icon_left
       prop :icon_right
       prop :image_url
-      prop :inactive, type: Playbook::Props::Boolean, default: false
       prop :target, type: Playbook::Props::Enum,
                     values: %w[_blank _self _parent _top],
                     default: "_self"
@@ -28,7 +27,7 @@ module Playbook
         if collapsible
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} #{inactive_class} pb_nav_list_item_link#{disabled_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
         end
       end
 
@@ -95,7 +94,7 @@ module Playbook
       end
 
       def collapsible_nav_classname
-        generate_classname("collapsible_nav_wrapper", active_class, collapsible_trail_class, inactive_class)
+        generate_classname("collapsible_nav_wrapper", active_class, collapsible_trail_class)
       end
 
     private
@@ -108,10 +107,6 @@ module Playbook
         disabled ? " pb_nav_item_disabled" : nil
       end
 
-      def inactive_class
-        inactive ? " pb_nav_item_inactive" : nil
-      end
-
       def highlighted_border_class
         !highlighted_border && active ? "highlighted_border_none" : nil
       end

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"