You need to sign in or sign up before continuing.
playbook_ui_docs 15.1.0.pre.alpha.multipleusersstackedscss11047 → 15.1.0.pre.alpha.play252710946
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +1 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +3 -4
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +4 -8
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +0 -5
- data/dist/playbook-doc.js +2 -2
- metadata +2 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +0 -1
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: ba871c739875f28a67034dae55927445ea665ca0c4b6908c850bda1bc4305bfb
         | 
| 4 | 
            +
              data.tar.gz: 90773204906e130d004f324ff0ab9fe1122bf4448c5a74e34bb2e91e8e5770c5
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: a5a0308f5d22f4761dcb2fffaa577580091dfed97208923423149078f53f2c6bca01227c33887ed3db590a31f5d5ca1007fea5ff24909be184468690a53df911
         | 
| 7 | 
            +
              data.tar.gz: e52fddeaa05e7a315349f954f00e647ab94d58f00973b6b181c1330d668cc7c2a0b26c73d80381948d2552c2dd933f645496f448ddc7fb05d9dc9c4fcd678b1e
         | 
| @@ -3,12 +3,12 @@ | |
| 3 3 | 
             
            <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
         | 
| 4 4 |  | 
| 5 5 |  | 
| 6 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 7 | 
            -
                id:"dialog-stacked-default",
         | 
| 6 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 7 | 
            +
                id:"dialog-stacked-default", 
         | 
| 8 8 | 
             
                status: "default",
         | 
| 9 | 
            -
                size: "sm",
         | 
| 10 | 
            -
                title: "Are you sure?",
         | 
| 11 | 
            -
                text: "Text explaining why there is an alert",
         | 
| 9 | 
            +
                size: "sm", 
         | 
| 10 | 
            +
                title: "Are you sure?", 
         | 
| 11 | 
            +
                text: "Text explaining why there is an alert", 
         | 
| 12 12 | 
             
            }) do %>
         | 
| 13 13 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 14 14 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| @@ -18,12 +18,12 @@ | |
| 18 18 | 
             
                <% end %>
         | 
| 19 19 | 
             
            <% end %>
         | 
| 20 20 |  | 
| 21 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 22 | 
            -
                id:"dialog-stacked-caution",
         | 
| 21 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 22 | 
            +
                id:"dialog-stacked-caution", 
         | 
| 23 23 | 
             
                status: "caution",
         | 
| 24 | 
            -
                size: "sm",
         | 
| 25 | 
            -
                title: "Are you sure?",
         | 
| 26 | 
            -
                text: "This is the action you will be taking",
         | 
| 24 | 
            +
                size: "sm", 
         | 
| 25 | 
            +
                title: "Are you sure?", 
         | 
| 26 | 
            +
                text: "This is the action you will be taking", 
         | 
| 27 27 | 
             
            }) do %>
         | 
| 28 28 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 29 29 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| @@ -33,16 +33,16 @@ | |
| 33 33 | 
             
                <% end %>
         | 
| 34 34 | 
             
            <% end %>
         | 
| 35 35 |  | 
| 36 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 37 | 
            -
                id:"dialog-stacked-delete",
         | 
| 36 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 37 | 
            +
                id:"dialog-stacked-delete", 
         | 
| 38 38 | 
             
                status: "delete",
         | 
| 39 | 
            -
                size: "sm",
         | 
| 40 | 
            -
                title: "Delete",
         | 
| 41 | 
            -
                text: "You are about to delete ...",
         | 
| 39 | 
            +
                size: "sm", 
         | 
| 40 | 
            +
                title: "Delete", 
         | 
| 41 | 
            +
                text: "You are about to delete ...", 
         | 
| 42 42 | 
             
            }) do %>
         | 
| 43 43 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 44 44 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| 45 | 
            -
                        <%= pb_rails("button", props: { text: "Yes, Action",  | 
| 45 | 
            +
                        <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
         | 
| 46 46 | 
             
                        <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         | 
| 47 47 | 
             
                    <% end %>
         | 
| 48 48 | 
             
                <% end %>
         | 
| @@ -51,7 +51,7 @@ const DialogStackedAlert = () => { | |
| 51 51 | 
             
              return (
         | 
| 52 52 | 
             
                <div>
         | 
| 53 53 | 
             
                <Flex
         | 
| 54 | 
            -
                    rowGap="xs"
         | 
| 54 | 
            +
                    rowGap="xs" 
         | 
| 55 55 | 
             
                    wrap
         | 
| 56 56 | 
             
                >
         | 
| 57 57 | 
             
                  <Button
         | 
| @@ -93,7 +93,6 @@ const DialogStackedAlert = () => { | |
| 93 93 | 
             
                      <Button
         | 
| 94 94 | 
             
                          fullWidth
         | 
| 95 95 | 
             
                          onClick={dialog.toggle}
         | 
| 96 | 
            -
                          variant= {dialog.status == "delete" ? "danger" : "primary"}
         | 
| 97 96 | 
             
                      >
         | 
| 98 97 | 
             
                        {dialog.buttonOneText}
         | 
| 99 98 | 
             
                      </Button>
         | 
| @@ -8,12 +8,12 @@ | |
| 8 8 | 
             
            <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
         | 
| 9 9 | 
             
            <% end %>
         | 
| 10 10 |  | 
| 11 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 12 | 
            -
                id:"dialog-status-default",
         | 
| 11 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 12 | 
            +
                id:"dialog-status-default", 
         | 
| 13 13 | 
             
                status: "default",
         | 
| 14 | 
            -
                size: "status_size",
         | 
| 15 | 
            -
                title: "Are you sure?",
         | 
| 16 | 
            -
                text: "Text explaining why there is an alert",
         | 
| 14 | 
            +
                size: "status_size", 
         | 
| 15 | 
            +
                title: "Are you sure?", 
         | 
| 16 | 
            +
                text: "Text explaining why there is an alert", 
         | 
| 17 17 | 
             
            }) do %>
         | 
| 18 18 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 19 19 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -23,12 +23,12 @@ | |
| 23 23 | 
             
                <% end %>
         | 
| 24 24 | 
             
            <% end %>
         | 
| 25 25 |  | 
| 26 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 27 | 
            -
                id:"dialog-status-info",
         | 
| 26 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 27 | 
            +
                id:"dialog-status-info", 
         | 
| 28 28 | 
             
                status: "info",
         | 
| 29 | 
            -
                size: "status_size",
         | 
| 30 | 
            -
                title: "Information",
         | 
| 31 | 
            -
                text: "Text explaining why there is an alert",
         | 
| 29 | 
            +
                size: "status_size", 
         | 
| 30 | 
            +
                title: "Information", 
         | 
| 31 | 
            +
                text: "Text explaining why there is an alert", 
         | 
| 32 32 | 
             
            }) do %>
         | 
| 33 33 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 34 34 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -37,12 +37,12 @@ | |
| 37 37 | 
             
                <% end %>
         | 
| 38 38 | 
             
            <% end %>
         | 
| 39 39 |  | 
| 40 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 41 | 
            -
                id:"dialog-status-caution",
         | 
| 40 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 41 | 
            +
                id:"dialog-status-caution", 
         | 
| 42 42 | 
             
                status: "caution",
         | 
| 43 | 
            -
                size: "status_size",
         | 
| 44 | 
            -
                title: "Are you Sure?",
         | 
| 45 | 
            -
                text: "This is the action you will be taking",
         | 
| 43 | 
            +
                size: "status_size", 
         | 
| 44 | 
            +
                title: "Are you Sure?", 
         | 
| 45 | 
            +
                text: "This is the action you will be taking", 
         | 
| 46 46 | 
             
            }) do %>
         | 
| 47 47 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 48 48 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -52,27 +52,27 @@ | |
| 52 52 | 
             
                <% end %>
         | 
| 53 53 | 
             
            <% end %>
         | 
| 54 54 |  | 
| 55 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 56 | 
            -
                id:"dialog-status-delete",
         | 
| 55 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 56 | 
            +
                id:"dialog-status-delete", 
         | 
| 57 57 | 
             
                status: "delete",
         | 
| 58 | 
            -
                size: "status_size",
         | 
| 59 | 
            -
                title: "Delete",
         | 
| 60 | 
            -
                text: "You are about to delete ...",
         | 
| 58 | 
            +
                size: "status_size", 
         | 
| 59 | 
            +
                title: "Delete", 
         | 
| 60 | 
            +
                text: "You are about to delete ...", 
         | 
| 61 61 | 
             
            }) do %>
         | 
| 62 62 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 63 63 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| 64 | 
            -
                        <%= pb_rails("button", props: { text: "Yes, Delete" | 
| 64 | 
            +
                        <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
         | 
| 65 65 | 
             
                        <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         | 
| 66 66 | 
             
                    <% end %>
         | 
| 67 67 | 
             
                <% end %>
         | 
| 68 68 | 
             
            <% end %>
         | 
| 69 69 |  | 
| 70 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 71 | 
            -
                id:"dialog-status-error",
         | 
| 70 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 71 | 
            +
                id:"dialog-status-error", 
         | 
| 72 72 | 
             
                status: "error",
         | 
| 73 | 
            -
                size: "status_size",
         | 
| 74 | 
            -
                title: "Error Message",
         | 
| 75 | 
            -
                text: "Text explaining the error",
         | 
| 73 | 
            +
                size: "status_size", 
         | 
| 74 | 
            +
                title: "Error Message", 
         | 
| 75 | 
            +
                text: "Text explaining the error", 
         | 
| 76 76 | 
             
            }) do %>
         | 
| 77 77 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 78 78 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -81,12 +81,12 @@ | |
| 81 81 | 
             
                <% end %>
         | 
| 82 82 | 
             
            <% end %>
         | 
| 83 83 |  | 
| 84 | 
            -
            <%= pb_rails("dialog", props: {
         | 
| 85 | 
            -
                id:"dialog-status-success",
         | 
| 84 | 
            +
            <%= pb_rails("dialog", props: { 
         | 
| 85 | 
            +
                id:"dialog-status-success", 
         | 
| 86 86 | 
             
                status: "success",
         | 
| 87 | 
            -
                size: "status_size",
         | 
| 88 | 
            -
                title: "Success!",
         | 
| 89 | 
            -
                text: "Text explaining what is successful",
         | 
| 87 | 
            +
                size: "status_size", 
         | 
| 88 | 
            +
                title: "Success!", 
         | 
| 89 | 
            +
                text: "Text explaining what is successful", 
         | 
| 90 90 | 
             
            }) do %>
         | 
| 91 91 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 92 92 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -83,8 +83,8 @@ const DialogStatus = () => { | |
| 83 83 |  | 
| 84 84 | 
             
              return (
         | 
| 85 85 | 
             
                <div>
         | 
| 86 | 
            -
                  <Flex
         | 
| 87 | 
            -
                      rowGap="xs"
         | 
| 86 | 
            +
                  <Flex 
         | 
| 87 | 
            +
                      rowGap="xs" 
         | 
| 88 88 | 
             
                      wrap
         | 
| 89 89 | 
             
                  >
         | 
| 90 90 | 
             
                    <Button
         | 
| @@ -117,7 +117,7 @@ const DialogStatus = () => { | |
| 117 117 | 
             
                    >
         | 
| 118 118 | 
             
                      {"Success Status"}
         | 
| 119 119 | 
             
                    </Button>
         | 
| 120 | 
            -
                    <Button
         | 
| 120 | 
            +
                    <Button 
         | 
| 121 121 | 
             
                        marginRight="md"
         | 
| 122 122 | 
             
                        onClick={toggleErrorAlert}
         | 
| 123 123 | 
             
                    >
         | 
| @@ -152,7 +152,6 @@ const DialogStatus = () => { | |
| 152 152 | 
             
                              <Button
         | 
| 153 153 | 
             
                                  onClick={dialog.toggle}
         | 
| 154 154 | 
             
                                  paddingRight="xl"
         | 
| 155 | 
            -
                                  variant={dialog.status == "delete" ? "danger" : "primary"}
         | 
| 156 155 | 
             
                              >
         | 
| 157 156 | 
             
                              {dialog.buttonOneText}
         | 
| 158 157 | 
             
                              </Button>
         | 
| @@ -21,6 +21,15 @@ | |
| 21 21 | 
             
              ]
         | 
| 22 22 | 
             
            %>
         | 
| 23 23 |  | 
| 24 | 
            +
            <%
         | 
| 25 | 
            +
              example_typeahead_options = [
         | 
| 26 | 
            +
                { label: 'Orange', value: '#FFA500' },
         | 
| 27 | 
            +
                { label: 'Red', value: '#FF0000' },
         | 
| 28 | 
            +
                { label: 'Green', value: '#00FF00' },
         | 
| 29 | 
            +
                { label: 'Blue', value: '#0000FF' },
         | 
| 30 | 
            +
              ]
         | 
| 31 | 
            +
            %>
         | 
| 32 | 
            +
             | 
| 24 33 | 
             
            <% treeData = [{
         | 
| 25 34 | 
             
                label: "Power Home Remodeling",
         | 
| 26 35 | 
             
                value: "Power Home Remodeling",
         | 
| @@ -88,7 +97,9 @@ | |
| 88 97 | 
             
            }] %>
         | 
| 89 98 |  | 
| 90 99 | 
             
            <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
         | 
| 91 | 
            -
              <%= form.typeahead : | 
| 100 | 
            +
              <%= form.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>  
         | 
| 101 | 
            +
              <%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
         | 
| 102 | 
            +
              <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
         | 
| 92 103 | 
             
              <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
         | 
| 93 104 | 
             
              <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
         | 
| 94 105 | 
             
              <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
         | 
| @@ -9,27 +9,23 @@ | |
| 9 9 |  | 
| 10 10 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 11 11 | 
             
              label: "Last Name",
         | 
| 12 | 
            -
              placeholder: "Enter last name" | 
| 13 | 
            -
              id: "last-name"
         | 
| 12 | 
            +
              placeholder: "Enter last name"
         | 
| 14 13 | 
             
            }) %>
         | 
| 15 14 |  | 
| 16 15 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 17 16 | 
             
                label: "Phone Number",
         | 
| 18 17 | 
             
                type: "phone",
         | 
| 19 | 
            -
                placeholder: "Enter phone number" | 
| 20 | 
            -
                id: "phone"
         | 
| 18 | 
            +
                placeholder: "Enter phone number"
         | 
| 21 19 | 
             
            }) %>
         | 
| 22 20 |  | 
| 23 21 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 24 22 | 
             
                label: "Email Address",
         | 
| 25 23 | 
             
                type: "email",
         | 
| 26 | 
            -
                placeholder: "Enter email address" | 
| 27 | 
            -
                id: "email"
         | 
| 24 | 
            +
                placeholder: "Enter email address"
         | 
| 28 25 | 
             
            }) %>
         | 
| 29 26 |  | 
| 30 27 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 31 28 | 
             
                label: "Zip Code",
         | 
| 32 29 | 
             
                type: "number",
         | 
| 33 | 
            -
                placeholder: "Enter zip code" | 
| 34 | 
            -
                id: "zip"
         | 
| 30 | 
            +
                placeholder: "Enter zip code"
         | 
| 35 31 | 
             
            }) %>
         | 
| @@ -38,7 +38,6 @@ const TextInputDefault = (props) => { | |
| 38 38 | 
             
                      {...props}
         | 
| 39 39 | 
             
                  />
         | 
| 40 40 | 
             
                  <TextInput
         | 
| 41 | 
            -
                      id="last-name"
         | 
| 42 41 | 
             
                      label="Last Name"
         | 
| 43 42 | 
             
                      name="lastName"
         | 
| 44 43 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -47,7 +46,6 @@ const TextInputDefault = (props) => { | |
| 47 46 | 
             
                      {...props}
         | 
| 48 47 | 
             
                  />
         | 
| 49 48 | 
             
                  <TextInput
         | 
| 50 | 
            -
                      id="phone"
         | 
| 51 49 | 
             
                      label="Phone Number"
         | 
| 52 50 | 
             
                      name="phone"
         | 
| 53 51 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -57,7 +55,6 @@ const TextInputDefault = (props) => { | |
| 57 55 | 
             
                      {...props}
         | 
| 58 56 | 
             
                  />
         | 
| 59 57 | 
             
                  <TextInput
         | 
| 60 | 
            -
                      id="email"
         | 
| 61 58 | 
             
                      label="Email Address"
         | 
| 62 59 | 
             
                      name="email"
         | 
| 63 60 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -67,7 +64,6 @@ const TextInputDefault = (props) => { | |
| 67 64 | 
             
                      {...props}
         | 
| 68 65 | 
             
                  />
         | 
| 69 66 | 
             
                  <TextInput
         | 
| 70 | 
            -
                      id="zip"
         | 
| 71 67 | 
             
                      label="Zip Code"
         | 
| 72 68 | 
             
                      name="zip"
         | 
| 73 69 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -88,7 +84,6 @@ const TextInputDefault = (props) => { | |
| 88 84 | 
             
                  <br />
         | 
| 89 85 |  | 
| 90 86 | 
             
                  <TextInput
         | 
| 91 | 
            -
                      id="first-name"
         | 
| 92 87 | 
             
                      label="First Name"
         | 
| 93 88 | 
             
                      onChange={handleOnChangeFirstName}
         | 
| 94 89 | 
             
                      placeholder="Enter first name"
         |