From 46bfc4f0a92d9546b2aa793768e5e887a993b263 Mon Sep 17 00:00:00 2001 From: Elisa Shapiro Date: Mon, 22 Jul 2024 12:10:28 -0400 Subject: [PATCH] Add icon prop to form pills, set icon size, add tests --- .../playbook/pb_form_pill/_form_pill.scss | 4 ++++ .../playbook/pb_form_pill/_form_pill.test.jsx | 11 ++++++++++ .../playbook/pb_form_pill/_form_pill.tsx | 13 +++++++++-- .../playbook/pb_form_pill/form_pill.html.erb | 22 +++++++++++-------- .../playbook/pb_form_pill/form_pill.rb | 7 +++++- .../pb_kits/playbook/kits/form_pill_spec.rb | 2 ++ 6 files changed, 47 insertions(+), 12 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss index f2a179f3e9..1ecb64ec3f 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +++ b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss @@ -89,6 +89,10 @@ $form_pill_colors: ( outline: $primary solid 2px; outline-offset: -1px; } + .pb_form_pill_icon { + height: 12px !important; + width: 12px !important; + } &.small { height: fit-content; height: -moz-fit-content; diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx index 7c3d2e9331..7098a2d6d7 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +++ b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx @@ -50,4 +50,15 @@ test('displays size variant', () => { ) const kit = screen.getByTestId('formpill') expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`) +}); + +test('displays icon', () => { + render( + + ) + const kit = screen.getByTestId('formpill') + expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`) }); \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx index 92f391edcf..4f2e6aced3 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +++ b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx @@ -21,6 +21,7 @@ type FormPillProps = { color?: "primary" | "neutral", data?: {[key: string]: string}, tabIndex?: number, + icon?: string, closeProps?: { onClick?: React.MouseEventHandler, onMouseDown?: React.MouseEventHandler, @@ -42,9 +43,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => { color = "primary", data = {}, tabIndex, + icon = "", } = props + + const iconClass = icon ? "_icon" : "" const css = classnames( - `pb_form_pill_kit_${color}`, + `pb_form_pill_kit_${color}${iconClass}`, globalProps(props), className, size === 'small' ? 'small' : null, @@ -76,7 +80,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => { /> } - + {icon && + + } {text && <% if object.name.present? %> <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %> - <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %> - <% elsif object.text.present? %> - <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %> - <% end %> - - <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %> - <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %> - <% end %> - <% end %> + <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %> + <% elsif object.text.present? %> + <% if object.icon.present? %> + <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %> + <% end %> + <% if object.text.present? %> + <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %> + <% end %> + <% end %> + <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %> + <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %> + <% end %> +<% end %> diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb index 402a516750..7d47d44f02 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb +++ b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb @@ -15,9 +15,10 @@ class FormPill < Playbook::KitBase values: %w[primary neutral], default: "primary" prop :tabindex + prop :icon def classname - generate_classname("pb_form_pill_kit", color, name, text, text_transform) + generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform) end def display_text @@ -27,6 +28,10 @@ def display_text def size_class size == "small" ? " small" : "" end + + def icon_class + icon ? "icon" : nil + end end end end diff --git a/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb b/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb index 93a14afc41..affafc4e19 100644 --- a/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb @@ -10,12 +10,14 @@ it { is_expected.to define_prop(:avatar_url) } it { is_expected.to define_prop(:size) } it { is_expected.to define_prop(:color) } + it { is_expected.to define_prop(:icon) } describe "#classname" do it "returns namespaced class name", :aggregate_failures do expect(subject.new({}).classname).to eq "pb_form_pill_kit_primary_none" expect(subject.new(classname: "additional_class").classname).to eq "pb_form_pill_kit_primary_none additional_class" expect(subject.new(color: "neutral").classname).to eq "pb_form_pill_kit_neutral_none" + expect(subject.new(icon: "user").classname).to eq "pb_form_pill_kit_primary_icon_none" end end end