playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json

@@ -0,0 +1,99 @@
+{
+  "defaults": {
+    "accept": {},
+    "dark": false
+  },
+  "hiddenProps": [
+    "fileRejections",
+    "getInputProps",
+    "getRootProps",
+    "isDragActive",
+    "onFilesAccepted",
+    "onFilesRejected"
+  ],
+  "groups": [
+    {
+      "name": "Guidance",
+      "props": ["customMessage", "accept", "acceptedFilesDescription", "maxSize"]
+    },
+    {
+      "name": "State",
+      "props": ["error", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    },
+    {
+      "name": "Accepted Types",
+      "props": {
+        "accept": {
+          "image/svg+xml": [".svg", ".xml"]
+        }
+      }
+    },
+    {
+      "name": "Custom Description",
+      "props": {
+        "accept": {
+          "application/pdf": [".pdf"],
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"]
+        },
+        "acceptedFilesDescription": "Adobe (.pdf) and Microsoft (.xlsx)"
+      }
+    },
+    {
+      "name": "Custom Message",
+      "props": {
+        "customMessage": "Playbook is awesome!"
+      }
+    },
+    {
+      "name": "Max File Size",
+      "props": {
+        "accept": {
+          "application/pdf": [".pdf"]
+        },
+        "maxSize": 1000000
+      }
+    },
+    {
+      "name": "Error State",
+      "props": {
+        "error": "Please upload a valid file"
+      }
+    }
+  ],
+  "conditionals": {
+    "acceptedFilesDescription": { "requires": "accept" }
+  },
+  "hints": {
+    "accepted_types_info": {
+      "presetName": "Accepted Types",
+      "message": "Use MIME-type keys with extension arrays for accept, for example { image/svg+xml: ['.svg', '.xml'] }.",
+      "type": "info"
+    },
+    "custom_description_info": {
+      "presetName": "Custom Description",
+      "message": "acceptedFilesDescription only changes the helper copy. File validation still comes from the accept object.",
+      "type": "info"
+    },
+    "custom_message_info": {
+      "presetName": "Custom Message",
+      "message": "customMessage replaces the built-in guidance, including accepted types and max file size text.",
+      "type": "info"
+    },
+    "max_size_info": {
+      "presetName": "Max File Size",
+      "message": "maxSize is measured in bytes. In app code, pair it with onFilesRejected to surface rejection details.",
+      "type": "warning"
+    },
+    "error_state_info": {
+      "presetName": "Error State",
+      "message": "Use the error prop for validation or server feedback below the dropzone.",
+      "type": "info"
+    }
+  }
+}

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

@@ -131,23 +131,24 @@
 %>
 
 <%= 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.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.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.typeahead :example_typeahead_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator_custom, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator_custom, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator_multi, props: { label: "Dropdown Custom Label", options: example_dropdown_options, multi_select: true, required: true, required_indicator: true } %>
   <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
-  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_custom, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%# form.check_box :example_checkbox_required_indicator, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Date Picker Custom Label", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',
@@ -156,14 +157,14 @@
     tree_data: tree_data
   } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
-    label: "Custom Multi Level Select Label",
+    label: "Multi Level Select Custom Label",
     margin_y: 'sm',
     required: true,
     required_indicator: true,
     tree_data: tree_data
   } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
-  <%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator_custom, props: { label: "Time Picker Custom Label", required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -69,9 +69,10 @@ svg {
       transform: scaleX(-1) scaleY(-1);
     }
     &.svg-inline--fa {
+      box-sizing: content-box;
       height: 1em;
       overflow: visible;
-      vertical-align: -.125em
+      vertical-align: -.125em;
     }
     &.svg_inverse {
       color: #fff;

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

@@ -8,7 +8,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -20,7 +19,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,5 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
-export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'

data/app/pb_kits/playbook/pb_link/docs/_playground.json

@@ -5,7 +5,9 @@
     "color": "default",
     "disabled": false,
     "tag": "a",
-    "underline": false
+    "underline": false,
+    "href": "#link-example",
+    "text": "Link text"
   },
   "children": {
     "editable": true,
@@ -28,6 +30,7 @@
       "props": [
         "href",
         "target",
+        "disabled",
         "tabIndex"
       ]
     },
@@ -36,78 +39,95 @@
       "props": [
         "color",
         "underline",
-        "disabled",
-        "tag"
+        "tag",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {},
-      "children": "Link text"
+      "props": {
+        "href": "#link-example",
+        "text": "Link text"
+      }
     },
     {
-      "name": "Muted underline",
+      "name": "Body color",
       "props": {
-        "color": "muted",
-        "underline": true
-      },
-      "children": "Secondary link"
+        "color": "body",
+        "href": "#body-link",
+        "text": "Inline body link"
+      }
     },
     {
-      "name": "Body color",
+      "name": "Muted underline",
       "props": {
-        "color": "body"
-      },
-      "children": "Inline body link"
+        "color": "muted",
+        "href": "#secondary-link",
+        "underline": true,
+        "text": "Secondary link"
+      }
     },
     {
       "name": "Destructive",
       "props": {
-        "color": "destructive"
-      },
-      "children": "Delete account"
+        "color": "destructive",
+        "href": "#delete-account",
+        "text": "Delete account"
+      }
     },
     {
-      "name": "With icon",
+      "name": "Leading icon",
       "props": {
         "color": "default",
-        "icon": "arrow-up-right-from-square"
-      },
-      "children": "Continue"
+        "href": "#continue",
+        "icon": "arrow-up-right-from-square",
+        "text": "Continue"
+      }
     },
     {
-      "name": "Icon both sides",
+      "name": "Trailing icon",
       "props": {
+        "href": "#details",
         "icon": "plus",
-        "iconRight": "chevron-right"
-      },
-      "children": "Open document"
+        "iconRight": "chevron-right",
+        "text": "Open document"
+      }
     },
     {
-      "name": "As heading tag",
+      "name": "Disabled",
       "props": {
-        "tag": "span"
-      },
-      "children": "Styled as link"
+        "disabled": true,
+        "href": "#disabled",
+        "text": "Disabled link"
+      }
     },
     {
-      "name": "With href",
+      "name": "Heading tag",
       "props": {
-        "href": "/dashboard",
-        "color": "default"
-      },
-      "children": "Go to dashboard"
+        "href": "#heading-link",
+        "icon": "arrow-up-right-from-square",
+        "tag": "h3",
+        "text": "Heading link"
+      }
     },
     {
       "name": "External new tab",
       "props": {
         "href": "https://example.com",
         "target": "_blank",
-        "icon": "arrow-up-right-from-square"
-      },
-      "children": "Example.com"
+        "icon": "arrow-up-right-from-square",
+        "text": "Example.com"
+      }
+    },
+    {
+      "name": "Span tag",
+      "props": {
+        "href": "#span-link",
+        "tag": "span",
+        "text": "Span link example"
+      }
     }
   ],
   "conditionals": {
@@ -119,11 +139,32 @@
     }
   },
   "hints": {
-    "target_needs_href": {
+    "external_target_info": {
+      "when": {
+        "target": "_blank"
+      },
+      "message": "Use target=\"_blank\" for external destinations that should open in a new tab.",
+      "type": "info"
+    },
+    "icon_pairing_info": {
+      "when": {
+        "iconRight": "chevron-right"
+      },
+      "message": "iconRight is available only when icon is also set, so the link can render a balanced icon treatment.",
+      "type": "info"
+    },
+    "disabled_info": {
+      "when": {
+        "disabled": true
+      },
+      "message": "Disabled links keep their visual treatment but should not be the only way to reach important actions.",
+      "type": "info"
+    },
+    "tag_semantics_info": {
       "when": {
-        "target": true
+        "tag": "h3"
       },
-      "message": "The target attribute only applies when href is set.",
+      "message": "Use tag to borrow link styling on semantic headings or inline text, but keep href when the element should still navigate.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_link/docs/_playground.overrides.json

@@ -2,6 +2,14 @@
   "children": {
     "default": "Link text"
   },
+  "defaults": {
+    "color": "default",
+    "disabled": false,
+    "href": "#link-example",
+    "tag": "a",
+    "text": "Link text",
+    "underline": false
+  },
   "groups": [
     {
       "name": "Content",
@@ -9,62 +17,97 @@
     },
     {
       "name": "Behavior",
-      "props": ["href", "target", "tabIndex"]
+      "props": ["href", "target", "disabled", "tabIndex"]
     },
     {
       "name": "Appearance",
-      "props": ["color", "underline", "disabled", "tag"]
+      "props": ["color", "underline", "tag", "dark"]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {},
-      "children": "Link text"
+      "props": {
+        "href": "#link-example",
+        "text": "Link text"
+      }
     },
     {
-      "name": "Muted underline",
-      "props": { "color": "muted", "underline": true },
-      "children": "Secondary link"
+      "name": "Body color",
+      "props": {
+        "color": "body",
+        "href": "#body-link",
+        "text": "Inline body link"
+      }
     },
     {
-      "name": "Body color",
-      "props": { "color": "body" },
-      "children": "Inline body link"
+      "name": "Muted underline",
+      "props": {
+        "color": "muted",
+        "href": "#secondary-link",
+        "underline": true,
+        "text": "Secondary link"
+      }
     },
     {
       "name": "Destructive",
-      "props": { "color": "destructive" },
-      "children": "Delete account"
+      "props": {
+        "color": "destructive",
+        "href": "#delete-account",
+        "text": "Delete account"
+      }
     },
     {
-      "name": "With icon",
-      "props": { "color": "default", "icon": "arrow-up-right-from-square" },
-      "children": "Continue"
+      "name": "Leading icon",
+      "props": {
+        "color": "default",
+        "href": "#continue",
+        "icon": "arrow-up-right-from-square",
+        "text": "Continue"
+      }
     },
     {
-      "name": "Icon both sides",
-      "props": { "icon": "plus", "iconRight": "chevron-right" },
-      "children": "Open document"
+      "name": "Trailing icon",
+      "props": {
+        "href": "#details",
+        "icon": "plus",
+        "iconRight": "chevron-right",
+        "text": "Open document"
+      }
     },
     {
-      "name": "As heading tag",
-      "props": { "tag": "span" },
-      "children": "Styled as link"
+      "name": "Disabled",
+      "props": {
+        "disabled": true,
+        "href": "#disabled",
+        "text": "Disabled link"
+      }
     },
     {
-      "name": "With href",
-      "props": { "href": "/dashboard", "color": "default" },
-      "children": "Go to dashboard"
+      "name": "Heading tag",
+      "props": {
+        "href": "#heading-link",
+        "icon": "arrow-up-right-from-square",
+        "tag": "h3",
+        "text": "Heading link"
+      }
     },
     {
       "name": "External new tab",
       "props": {
         "href": "https://example.com",
         "target": "_blank",
-        "icon": "arrow-up-right-from-square"
-      },
-      "children": "Example.com"
+        "icon": "arrow-up-right-from-square",
+        "text": "Example.com"
+      }
+    },
+    {
+      "name": "Span tag",
+      "props": {
+        "href": "#span-link",
+        "tag": "span",
+        "text": "Span link example"
+      }
     }
   ],
   "conditionals": {
@@ -72,9 +115,24 @@
     "iconRight": { "requires": "icon" }
   },
   "hints": {
-    "target_needs_href": {
-      "when": { "target": true },
-      "message": "The target attribute only applies when href is set.",
+    "external_target_info": {
+      "when": { "target": "_blank" },
+      "message": "Use target=\"_blank\" for external destinations that should open in a new tab.",
+      "type": "info"
+    },
+    "icon_pairing_info": {
+      "when": { "iconRight": "chevron-right" },
+      "message": "iconRight is available only when icon is also set, so the link can render a balanced icon treatment.",
+      "type": "info"
+    },
+    "disabled_info": {
+      "when": { "disabled": true },
+      "message": "Disabled links keep their visual treatment but should not be the only way to reach important actions.",
+      "type": "info"
+    },
+    "tag_semantics_info": {
+      "when": { "tag": "h3" },
+      "message": "Use tag to borrow link styling on semantic headings or inline text, but keep href when the element should still navigate.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -58,7 +58,10 @@ const ListItem = (props: ListItemProps) => {
         >
           {
             dragHandle && (
-              <span style={{verticalAlign: 'middle'}}>
+              <span
+                  className="pb_draggable_handle"
+                  style={{verticalAlign: 'middle'}}
+              >
                 <Body color="light">
                 <Icon 
                     icon="grip-dots-vertical"

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -9,7 +9,7 @@
                     **combined_html_options
       ) do %>
       <% if object.drag_handle %>
-        <span style="vertical-align: middle;">
+        <span class="pb_draggable_handle" style="vertical-align: middle;">
           <%= pb_rails("body") do %>
             <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
           <% end %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb

@@ -0,0 +1,90 @@
+<% data = [
+  {
+    name: "EV",
+    y: 23.9,
+  },
+  {
+    name: "Hybrids",
+    y: 12.6,
+  },
+  {
+    name: "Diesel",
+    y: 37.0,
+  },
+  {
+    name: "Petrol",
+    y: 26.4,
+  },
+] %>
+
+<% total = data.sum { |point| point[:y] } %>
+<% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
+
+<% chart_options = {
+  chart: {
+    type: "pie",
+  },
+  accessibility: {
+    point: {
+      valueSuffix: "%",
+    },
+  },
+  title: {
+    text: "2023 Norway car registrations",
+    floating: true,
+    align: "center",
+    verticalAlign: "top",
+    y: 8,
+  },
+  subtitle: {
+    text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
+    useHTML: true,
+    floating: true,
+    align: "center",
+    verticalAlign: "middle",
+    y: 8,
+    style: {
+      textAlign: "center",
+    },
+  },
+  tooltip: {
+    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
+  },
+  legend: {
+    enabled: false,
+  },
+  plotOptions: {
+    series: {
+      allowPointSelect: true,
+      cursor: "pointer",
+      borderRadius: 8,
+      dataLabels: [
+        {
+          enabled: true,
+          distance: 20,
+          format: "{point.name}",
+        },
+        {
+          enabled: true,
+          distance: -15,
+          format: "{point.percentage:.0f}%",
+          style: {
+            fontSize: "0.9em",
+          },
+        },
+      ],
+      showInLegend: true,
+    },
+  },
+  series: [
+    {
+      name: "Registrations",
+      colorByPoint: true,
+      center: ["50%", "50%"],
+      innerSize: "75%",
+      data: data,
+    },
+  ],
+} %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>