Inline Modal Playbook Additions #1467

bh247484 · 2021-04-23T13:55:43Z

What does this PR do?

Typeahead
- Enables createable select
- Inline styling
- Adds badge and small form pills
- Adds plus icon to placeholder
Rich Text Editor
- Inline styling
- Option to move toolbar to bottom
Form Pill
- Adds smaller size variant
Date Picker
- Bug fixes
Text Input
- Inline styling

Breaking Changes

Only adding props/features but needs regression testing.

Runway Ticket URL

Runway Story

How to test this

Check doc examples for each affected kit (listed above). Currently being alpha tested in Nitro.

Checklist:

LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
URGENCY Please select a release milestone
DEPLOY Please add the Milano label when you are ready for a review.
SCREENSHOT Please add a screen shot or two.
SPECS Please cover your changes with specs.
READ DOCS Please make sure you have read and understand the Playbook Release Process

The normal release cut off deadline is 3p EDT each week. Please reach out to the release team if you have an urgent request or need a release off cycle.

…s, add ids and refs to Flex kit

thestephenmarshall

Checked it out a bit in the review env and everything looks good in all browsers. Let's get this one to alpha testing next!

coleerikson · 2021-04-28T14:29:49Z

playbook/app/pb_kits/playbook/pb_badge/_badge.jsx

+      <span>
+        {text}
+        <If condition={removeIcon}>
+          <span


Is there a way to make this a button?

coleerikson · 2021-04-28T14:30:49Z

playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
    picker.input.style.caretColor = 'transparent'
    picker.input.style.cursor = 'pointer'
  }
+
+  // Fix event bubbling bug on wrapper


Stupid I know but could you change this to "fixes"? I read it like a "Fix this" note.

coleerikson · 2021-04-28T14:33:34Z

playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

  const css = classnames(
    `pb_form_pill_kit_${'primary'}`,
    globalProps(props),
-    className
+    className,
+    size === 'small' ? 'small' : null,


I think you could rewrite this using the classnames functionality. { 'small': size === 'small' }

coleerikson · 2021-04-28T14:34:30Z

playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

+const FormPillSize = (props) => {
+  return (
+
+    <div>


Can this be a fragment?

coleerikson · 2021-04-28T14:36:08Z

playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
    id: object.id,
    data: object.data,
-    class: object.classname) do %>
+    class: object.classname + object.size_class) do %>


I could be totally wrong but I think you could get away with this in the class generator. See below...

coleerikson · 2021-04-28T14:36:39Z

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

@@ -14,6 +15,10 @@ def classname
      def display_text
        name.downcase
      end
+
+      def size_class
+        size == "small" ? " small" : ""


size == "small" ? "small" : null

coleerikson · 2021-04-28T14:37:06Z

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

@@ -6,6 +6,7 @@ class FormPill < Playbook::KitBase
      prop :avatar_url
      prop :name
      prop :text
+      prop :size

      def classname
        generate_classname("pb_form_pill_kit", "primary", name, text)


generate_classname("pb_form_pill_kit", "primary", name, text, size_class)

coleerikson · 2021-04-28T14:39:25Z

playbook/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -53,6 +55,7 @@ const TextInput = (
  const dataProps = buildDataProps(data)
  const css = classnames([
    'pb_text_input_kit',
+    inline ? 'inline' : null,


small classnames function I mentioned above.

coleerikson · 2021-04-28T14:40:32Z

playbook/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -41,6 +43,10 @@ def validation_data
      def error_class
        error ? " error" : ""
      end
+
+      def inline_class
+        inline ? " inline" : ""


inline ? "inline" : null
You don't need the space I think if you use null instead of an empty string.

coleerikson · 2021-04-28T14:41:50Z

playbook/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+              size={multiKit === 'smallPill' ? 'small' : ''}


I think size={multiKit === 'smallPill' && 'small'} I think this will work for this. I could be wrong.

coleerikson · 2021-04-28T14:44:08Z

playbook/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -22,6 +31,10 @@ def classname
        generate_classname("pb_typeahead_kit")
      end

+      def inline_class


Include, if possible, in the generator like I mentioned.

bh247484 added 30 commits February 9, 2021 15:39

Scaffold kit

302fa31

Add focus and blur

829cdaa

Split doc examples, add variable title size

9b2f3c7

Add tabbing functionality

23f676c

Key listening functionality, padding changes

e9a1eee

Update dist

d8e2fcd

New solution for matching kit name

0359283

Split into text/input options, add caption

7bec0cf

Add dark mode

53684b8

Merge remote-tracking branch 'origin' into inline-exp

7f2312c

Mend weird mismatched imports

dfe8691

Merge remote-tracking branch 'origin' into inline-exp

70a3e51

Add badges to typeahead

4ed93a3

Add createable feature to typeahead

fd1c5e7

Match dist with master

64d8138

Merge remote-tracking branch 'origin' into inline-exp

8e6f0c0

Reintroduce Form Pill to multivalue typeahead component

a9e0ef8

Merge remote-tracking branch 'origin' into inline-exp

1641fb5

Add plus icon to typeahead kit

cb71078

Add inputValue and inputOnChange props to Date Picker

2481412

Merge remote-tracking branch 'origin/master' into inline-exp

7b3a85b

remove inline kit

6bcbb65

Move badge close icon to right side

cd1b543

Remove classname text jsx from Date Picker

d1a2031

Fix Date Picker event bubbling bug

098d03b

Implement typeahead plusIcon offset, typeahead badge and plusIcon sas…

aa22751

…s, add ids and refs to Flex kit

Merge remote-tracking branch 'origin/master' into inline-exp

4fbe99d

Upversioned alpha

a162015

Fix querySelector for stopPropagation()

450f4f7

Upversion patched alpha

3caf9df

bh247484 added the milano 20 MAX - Deploy this PR to a review environment via Milano label Apr 23, 2021

bh247484 added this to the 8.*.* ASYNC RELEASE milestone Apr 23, 2021

app-milano bot deployed to pr1467 April 23, 2021 14:27 View deployment

bh247484 added the in testing label Apr 26, 2021

Provide spec test coverage for new rails props

c013a41

app-milano bot deployed to pr1467 April 26, 2021 15:21 View deployment

Add createable React doc example

39165f8

app-milano bot deployed to pr1467 April 26, 2021 17:05 View deployment

thestephenmarshall added the needs alpha testing label Apr 26, 2021

thestephenmarshall approved these changes Apr 26, 2021

View reviewed changes

bh247484 removed the milano 20 MAX - Deploy this PR to a review environment via Milano label Apr 28, 2021

coleerikson reviewed Apr 28, 2021

View reviewed changes

jasoncypret removed the needs alpha testing label May 5, 2021

Merge remote-tracking branch 'origin/master' into inline-exp

992e80f

bh247484 added the milano 20 MAX - Deploy this PR to a review environment via Milano label May 10, 2021

app-milano bot deployed to pr1467 May 10, 2021 14:48 View deployment

bh247484 merged commit ca035de into master May 10, 2021

bh247484 deleted the inline-exp branch May 10, 2021 15:04

bh247484 removed milano 20 MAX - Deploy this PR to a review environment via Milano in testing labels May 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inline Modal Playbook Additions #1467

Inline Modal Playbook Additions #1467

bh247484 commented Apr 23, 2021 •

edited

Loading

thestephenmarshall left a comment

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021 •

edited

Loading

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

coleerikson Apr 28, 2021

Inline Modal Playbook Additions #1467

Inline Modal Playbook Additions #1467

Conversation

bh247484 commented Apr 23, 2021 • edited Loading

What does this PR do?

Breaking Changes

Runway Ticket URL

How to test this

Checklist:

thestephenmarshall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coleerikson Apr 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bh247484 commented Apr 23, 2021 •

edited

Loading

coleerikson Apr 28, 2021 •

edited

Loading