From 8aaf0009c19eeae201e8c54fac3cf5c4b1056731 Mon Sep 17 00:00:00 2001 From: Mark Rosenberg <38965626+markdoeswork@users.noreply.github.com> Date: Thu, 25 Jul 2024 15:03:59 -0400 Subject: [PATCH 1/2] [PLAY-1438] Icons Batch 8 (#3541) Runway https://runway.powerhrg.com/backlog_items/PLAY-1438 Adding Batch 8 of icons https://github.com/powerhome/playbook-icons/pull/37 --- playbook-website/package.json | 4 ++-- yarn.lock | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/playbook-website/package.json b/playbook-website/package.json index 900bf7c368..a6bd74748a 100644 --- a/playbook-website/package.json +++ b/playbook-website/package.json @@ -10,8 +10,8 @@ "dependencies": { "@fortawesome/fontawesome-pro": "6.2.1", "@mapbox/mapbox-gl-draw": "^1.4.1", - "@powerhome/playbook-icons": "0.0.1-alpha.29", - "@powerhome/playbook-icons-react": "0.0.1-alpha.29", + "@powerhome/playbook-icons": "0.0.1-alpha.32", + "@powerhome/playbook-icons-react": "0.0.1-alpha.32", "@powerhome/power-fonts": "0.0.1-alpha.6", "@rails/webpacker": "5.4.3", "@svgr/webpack": "5.5.0", diff --git a/yarn.lock b/yarn.lock index d01a7638a3..48413d97c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2832,15 +2832,15 @@ resolved "https://npm.powerapp.cloud/@powerhome/eslint-config/-/eslint-config-0.1.0.tgz#f1e1151481f51421186ba8caad99fadb24b1fe51" integrity sha512-8e5DRgnKPbJ+ofAtqjUPZTxcgHg/TVf52WeNqAGBUXSS4QWHemL6fj1n/YHfAIvx3aMUhFwrw2lUNofUocgK3A== -"@powerhome/playbook-icons-react@0.0.1-alpha.29": - version "0.0.1-alpha.29" - resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons-react/-/ce27570207d2c1381e225ecb4266cb0c7e391e17#ce27570207d2c1381e225ecb4266cb0c7e391e17" - integrity sha512-GwsEN+rgyJejOCw1a0lwLCwXIjd20F19SiWC3YpzQSPiDYJQ8dCrZeFAt3K0ulttPIzZ0j7rCayN9A0Yy9ISiw== - -"@powerhome/playbook-icons@0.0.1-alpha.29": - version "0.0.1-alpha.29" - resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons/-/a2e3f857e6c0c6a3ca601f391e66a77cc54f759d#a2e3f857e6c0c6a3ca601f391e66a77cc54f759d" - integrity sha512-IqhDXWZe2+Oeggka5thMt0scmQylFVrCDzXlymjwd6uxsjFNiejaUi8sV+rrJ73TTTdCAAOzKLj3K8F4yZcboQ== +"@powerhome/playbook-icons-react@0.0.1-alpha.32": + version "0.0.1-alpha.32" + resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons-react/-/10baa7174915f72cc78a674cd5565397668546d5#10baa7174915f72cc78a674cd5565397668546d5" + integrity sha512-5YmcZ05OjHBHbCXvGPL7DKhX8cFlAJ4V/iNBNWcXGAhsGkzso/4Fni7a1r4iiId9aEkLMpN32nmKyPwnDlC2AA== + +"@powerhome/playbook-icons@0.0.1-alpha.32": + version "0.0.1-alpha.32" + resolved "https://npm.powerapp.cloud/@powerhome/playbook-icons/-/ecaa507c39b0d19b1779daa1586278a6e5af94cc#ecaa507c39b0d19b1779daa1586278a6e5af94cc" + integrity sha512-YSlm52Ckz8PCjQ+23wD0/QECrQNZoAa9swiG97mhXXym5gQw7tWgJke+U/i3qlzcY5xtOvT2whwAF5co+XzoIw== "@powerhome/power-fonts@0.0.1-alpha.6": version "0.0.1-alpha.6" From 735f1d0ea30ea6bf21348e9d5f25c8c67063206e Mon Sep 17 00:00:00 2001 From: Elisa Shapiro <83474365+ElisaShapiro@users.noreply.github.com> Date: Thu, 25 Jul 2024 15:21:05 -0400 Subject: [PATCH 2/2] [PLAY-1454] Form pills 2 of 5: add icon prop (#3540) **What does this PR do?** A clear and concise description with your runway ticket url. [PLAY-1454](https://runway.powerhrg.com/backlog_items/PLAY-1454) is part 2 of 5 in the Form Pill/Typeahead [handoff](https://www.figma.com/file/79KJo0Jl8HSNOBQPJo5MSp/Typeahead-Dropdowns?type=design&node-id=240%3A7600&mode=design&t=f7VGtBFjzitLydyF-1). Before altering the form pill size, we needed to allow for the use of icons within the form pill because so much of the pill anatomy, sizing, and future plans for usage depended on this ability. Note: icons are the default text color for now because PLAY-1138 is not merged yet; once that is in the icon color prop should be used. The doc examples will look a little funky until the sizing has been corrected - I do wonder if these should be enabled but not yet displayed (commented out in `example.yml` until PLAY-1439 Form Pill 3 of 5 sizes + color prop for icon functional). **Update: these have been commented out, to be put back in with icon color added once sizing ticket completed** I've also done an audit of rails vs react form pill permutations in terms of what combinations of one/some/all prop use are available. This PR standardizes the behavior between the Rails and React versions of the kit to the following (see second set of screenshots to demonstrate this in rails/react as well): | Props Used | Works or Not | | ----------- | -------------- | | Avatar | Works | | Text | Works | | Icon | No (blank FP only X to close out will be displayed) | | Avatar and Icon | technically Works but not in handoff so not documented yet| | Icon and Text | Works (see doc example screenshots below) | | Avatar and Text | No (avatar will override text and be only thing displayed) | | Avatar Icon and Text | No (avatar + icon will override text, only avatar and icon displayed) | **Screenshots:** Screenshots to visualize your addition/change 2 Screenshots below are Rails/React Form Pill Icon doc example -> will be commented out so as not to display on PB website yet, see above for rationale rails doc example for PR react doc example for PR 2 Screenshots below are Rails/React Form Pill all prop permutations (aka visual interpretation of table above) rails all permutations react all permutations **How to test?** Steps to confirm the desired behavior: 1. Go to [playbook review environment](https://pr3540.playbook.beta.gm.powerapp.cloud/). 2. Go to [form pill kit page](https://pr3540.playbook.beta.gm.powerapp.cloud/kits/form_pill) in rails and react - see [form pill icon doc example](https://pr3540.playbook.beta.gm.powerapp.cloud/kits/form_pill/#form-pill-icon). 3. Go to kit pages for [typeahead](https://pr3540.playbook.beta.gm.powerapp.cloud/kits/typeahead) and [multilevelselect](https://pr3540.playbook.beta.gm.powerapp.cloud/kits/multi_level_select) and confirm form pill behavior within these kits is unchanged. #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [x] **TESTS** I have added test coverage to my code. --- .../playbook/pb_form_pill/_form_pill.scss | 4 ++ .../playbook/pb_form_pill/_form_pill.test.jsx | 11 +++ .../playbook/pb_form_pill/_form_pill.tsx | 69 ++++++++++++++----- .../docs/_form_pill_icon.html.erb | 5 ++ .../pb_form_pill/docs/_form_pill_icon.jsx | 19 +++++ .../playbook/pb_form_pill/docs/example.yml | 3 +- .../playbook/pb_form_pill/docs/index.js | 2 +- .../playbook/pb_form_pill/form_pill.html.erb | 25 ++++--- .../playbook/pb_form_pill/form_pill.rb | 7 +- .../pb_kits/playbook/kits/form_pill_spec.rb | 2 + 10 files changed, 118 insertions(+), 29 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx 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..e49fc2a869 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, @@ -61,29 +65,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => { {...dataProps} {...htmlProps} > - {name && + {((name && !icon && !text) || (name && !icon && text)) && ( <> - - + <Avatar + imageUrl={avatarUrl} + name={name} + size="xs" + status={null} + /> + <Title + className="pb_form_pill_text" + size={4} + text={name} + /> </> - } - - {text && + )} + {((name && icon && !text) || (name && icon && text)) && ( + <> + <Avatar + imageUrl={avatarUrl} + name={name} + size="xs" + status={null} + /> + <Title + className="pb_form_pill_text" + size={4} + text={name} + /> + <Icon + className="pb_form_pill_icon" + icon={icon} + /> + </> + )} + {(!name && icon && text) && ( + <> + <Icon + className="pb_form_pill_icon" + icon={icon} + /> + <Title + className="pb_form_pill_tag" + size={4} + text={text} + /> + </> + )} + {(!name && !icon && text) && ( <Title className="pb_form_pill_tag" size={4} text={text} /> - } + )} <div className="pb_form_pill_close" onClick={onClick} diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb new file mode 100644 index 0000000000..dba18d0d99 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb @@ -0,0 +1,5 @@ +<%= pb_rails("form_pill", props: { + icon: "badge-check", + text: "icon and tag", + tabindex: 0, +}) %> diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx new file mode 100644 index 0000000000..2e32877029 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx @@ -0,0 +1,19 @@ +import React from 'react' +import FormPill from '../_form_pill' + +const FormPillIcon = (props) => { + return ( + <div> + <FormPill + icon="badge-check" + onClick={() => { + alert('Click!') + }} + tabIndex={0} + text="icon and tag" + {...props} + /> + </div> + ) +} +export default FormPillIcon diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml b/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml index 061f206217..65b8210ae4 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/example.yml @@ -5,10 +5,11 @@ examples: - form_pill_size: Form Pill Size - form_pill_tag: Form Pill Tag - form_pill_example: Example - + # - form_pill_icon: Form Pill Icon react: - form_pill_user: Form Pill User - form_pill_size: Form Pill Size - form_pill_tag: Form Pill Tag - form_pill_example: Example + # - form_pill_icon: Form Pill Icon diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js b/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js index 022d1bab00..71ee92e726 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/index.js @@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx' export { default as FormPillSize } from './_form_pill_size.jsx' export { default as FormPillTag } from './_form_pill_tag.jsx' export { default as FormPillExample } from './_form_pill_example.jsx' - +export { default as FormPillIcon } from './_form_pill_icon.jsx' diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb index bb160b8b14..52f59e0362 100644 --- a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +++ b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb @@ -1,12 +1,19 @@ <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %> <% 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" }) %> + <% if object.icon.present? %> + <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %> + <% end %> + <% 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