From 930c2f20f73b69795580149c77b3da79d302e39f Mon Sep 17 00:00:00 2001 From: Gabriella Massaro <37029835+gabbymassaro@users.noreply.github.com> Date: Fri, 31 Jan 2025 13:46:57 -0500 Subject: [PATCH] [PLAY-1788] Avatar - Dark Mode Audit (#4185) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **What does this PR do?** A clear and concise description with your runway ticket url. [PLAY-1788](https://runway.powerhrg.com/backlog_items/PLAY-1788) This PR addresses the following issues in the Avatar Kit: - [x] The "Monogram" variant should use $text_dk_light as the background color - [x] The "Icon Circle Component Overlay" variant now follows dark mode standards - [x] The "Badge Component Overlay" variant now follows dark mode standards Out of the scope of the story: - [x] There's a bug in light mode around the padding for the Rails "Icon Circle Component Overlay". It was addressed in dark mode as well. **Screenshots:** Screenshots to visualize your addition/change "Monogram" before and after REACT and RAILS: Screenshot 2025-01-29 at 8 29 18 AM "Icon Circle Component Overlay" and "Badge Component Overlay" Dark Mode Audit before and after REACT and RAILS: Screenshot 2025-01-29 at 8 30 56 AM Light Mode Bug "Icon Circle Component Overlay" RAILS ONLY: Screenshot 2025-01-29 at 8 32 54 AM **How to test?** Steps to confirm the desired behavior: 1. Go to /kits/avatar/rails and /kits/avatar/react 2. Enable dark mode 3. Scroll down to the Monogram, Icon Circle Component Overlay and Badge Component Overlay 4. See dark mode applied to the three components 5. For the bug: in light mode, go to the Rails - Icon Circle Component Overlay, see that the padding is no longer 24px #### 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. - [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. --- .../pb_kits/playbook/pb_avatar/_avatar.scss | 9 +++++++++ .../app/pb_kits/playbook/pb_avatar/_avatar.tsx | 18 +++++++++++------- .../pb_kits/playbook/pb_avatar/avatar.html.erb | 13 ++++++------- .../docs/_avatar_badge_component_overlay.jsx | 12 +++++++++--- .../_avatar_circle_icon_component_overlay.jsx | 8 ++++++-- 5 files changed, 41 insertions(+), 19 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss index 773263b7c0..8a3f8b09e5 100755 --- a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss +++ b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss @@ -27,6 +27,9 @@ $avatar-sizes: ( flex-basis: $size; & > [class^=pb_flex_kit] { + [class^=pb_card_kit] { + padding: 2px; + } [class^=pb_card_kit].overlay_bottom_center, [class^=pb_card_kit].overlay_top_center { left: 50%; @@ -52,6 +55,10 @@ $avatar-sizes: ( flex-grow: 0; flex-basis: $size; + .dark & { + background: $text_dk_light; + } + &::before { content: attr(data-initials); width: 100%; @@ -78,9 +85,11 @@ $avatar-sizes: ( } } } + &.dark { [class^=pb_card_kit] { position: absolute; + padding: 2px; } } } diff --git a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx index fbd9131334..c04236412a 100755 --- a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx +++ b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx @@ -23,8 +23,8 @@ export type AvatarProps = { variant?: string, icon?: string }, - data?: {[key: string]: string}, dark?: boolean, + data?: {[key: string]: string}, htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, imageAlt?: string, @@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => { const canShowImage = imageUrl && !error - const onlineStatusSize = + const onlineStatusSize = ['xxs', 'xs'].includes(size) ? 'sm' : ['sm', 'md'].includes(size) ? 'md' : ['lg', 'xl'].includes(size) ? 'lg' : 'sm'; - const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? + const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? { top: { inset: true, value: "0" }, right: { inset: false, value: "xxs" } @@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => { id={id} > {componentOverlay ? ( - -
{canShowImage && ( @@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => { - + { { ) : ( <> -
{canShowImage && ( diff --git a/playbook/app/pb_kits/playbook/pb_avatar/avatar.html.erb b/playbook/app/pb_kits/playbook/pb_avatar/avatar.html.erb index b0ced2c142..e65a2f70b3 100755 --- a/playbook/app/pb_kits/playbook/pb_avatar/avatar.html.erb +++ b/playbook/app/pb_kits/playbook/pb_avatar/avatar.html.erb @@ -1,22 +1,22 @@ <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %> <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %> - <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %> + <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %> <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %> <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %> <% end %> - <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %> + <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %> - <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %> + <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %> <% end %> <% end %> <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %> - <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %> + <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %> <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %> <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %> <% end %> - <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %> - <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %> + <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %> + <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %> <% end %> <% end %> <% else %> @@ -26,4 +26,3 @@ <%= pb_rails("online_status", props: object.online_status_props) if object.status %> <% end %> <% end %> - diff --git a/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx b/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx index 45e34edd22..19f4bd1ed6 100644 --- a/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +++ b/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx @@ -1,18 +1,19 @@ import React from "react"; import { Avatar } from 'playbook-ui' -const AvatarBadgeComponentOverlay = () => { +const AvatarBadgeComponentOverlay = (props) => { return (
{ imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="md" + {...props} + /> { imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="lg" + {...props} + /> { imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="xl" - /> + {...props} + />
) } diff --git a/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx b/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx index 039f44cff6..30dcdb3961 100644 --- a/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +++ b/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx @@ -1,7 +1,7 @@ import React from "react"; import { Avatar } from 'playbook-ui' -const AvatarCircleIconComponentOverlay = () => { +const AvatarCircleIconComponentOverlay = (props) => { return (
{ imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="sm" + {...props} /> { imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="md" + {...props} /> { imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="lg" + {...props} /> { imageUrl="https://randomuser.me/api/portraits/men/44.jpg" marginBottom="sm" size="xl" - /> + {...props} + />
) }