Skip to content

Commit 930c2f2

Browse files
gabbymassarogabbymassaro
authored
[PLAY-1788] Avatar - Dark Mode Audit (#4185)
**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: <img width="1728" alt="Screenshot 2025-01-29 at 8 29 18 AM" src="https://github.com/user-attachments/assets/34d1f517-1202-4eb3-8ae0-2e6c17aa1971" /> "Icon Circle Component Overlay" and "Badge Component Overlay" Dark Mode Audit before and after REACT and RAILS: <img width="1723" alt="Screenshot 2025-01-29 at 8 30 56 AM" src="https://github.com/user-attachments/assets/73503b93-fafa-405f-8c59-a819ffcda0b2" /> Light Mode Bug "Icon Circle Component Overlay" RAILS ONLY: <img width="1718" alt="Screenshot 2025-01-29 at 8 32 54 AM" src="https://github.com/user-attachments/assets/6b4e6041-02b8-4d9d-8448-fa24679cc7a3" /> **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.
1 parent 8a117e8 commit 930c2f2

5 files changed

Lines changed: 41 additions & 19 deletions

File tree

‎playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ $avatar-sizes: (
2727
flex-basis: $size;
2828

2929
& > [class^=pb_flex_kit] {
30+
[class^=pb_card_kit] {
31+
padding: 2px;
32+
}
3033
[class^=pb_card_kit].overlay_bottom_center,
3134
[class^=pb_card_kit].overlay_top_center {
3235
left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
5255
flex-grow: 0;
5356
flex-basis: $size;
5457

58+
.dark & {
59+
background: $text_dk_light;
60+
}
61+
5562
&::before {
5663
content: attr(data-initials);
5764
width: 100%;
@@ -78,9 +85,11 @@ $avatar-sizes: (
7885
}
7986
}
8087
}
88+
8189
&.dark {
8290
[class^=pb_card_kit] {
8391
position: absolute;
92+
padding: 2px;
8493
}
8594
}
8695
}

‎playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export type AvatarProps = {
2323
variant?: string,
2424
icon?: string
2525
},
26-
data?: {[key: string]: string},
2726
dark?: boolean,
27+
data?: {[key: string]: string},
2828
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
2929
id?: string,
3030
imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
7171

7272
const canShowImage = imageUrl && !error
7373

74-
const onlineStatusSize =
74+
const onlineStatusSize =
7575
['xxs', 'xs'].includes(size) ? 'sm' :
7676
['sm', 'md'].includes(size) ? 'md' :
7777
['lg', 'xl'].includes(size) ? 'lg' :
7878
'sm';
7979

80-
const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
80+
const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
8181
{
8282
top: { inset: true, value: "0" },
8383
right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
9696
id={id}
9797
>
9898
{componentOverlay ? (
99-
<Flex display="display_inline_block"
99+
<Flex display="display_inline_block"
100100
position="relative"
101101
>
102-
<div className="avatar_wrapper"
102+
<div className="avatar_wrapper"
103103
data-initials={initials}
104104
>
105105
{canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
115115
<Card
116116
borderNone
117117
borderRadius="rounded"
118+
dark={dark}
118119
padding="none"
119120
position="absolute"
120121
{...getPlacementProps(componentOverlay.placement, size)}
121122
>
122-
123+
123124
<Badge
125+
dark={dark}
124126
rounded
125127
text={componentOverlay.text}
126128
variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
131133
<Card
132134
borderNone
133135
borderRadius="rounded"
136+
dark={dark}
134137
htmlOptions={{style: {padding:"2px"}}}
135138
position="absolute"
136139
{...getPlacementProps(componentOverlay.placement, size)}
137140
>
138141
<IconCircle
142+
dark={dark}
139143
icon={componentOverlay.icon}
140144
size="xxs"
141145
variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
145149
</Flex>
146150
) : (
147151
<>
148-
<div className="avatar_wrapper"
152+
<div className="avatar_wrapper"
149153
data-initials={initials}
150154
>
151155
{canShowImage && (

‎playbook/app/pb_kits/playbook/pb_avatar/avatar.html.erb‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11

22
<%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
33
<% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
4-
<%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
4+
<%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
55
<%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
66
<%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
77
<% end %>
8-
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
8+
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
99

10-
<%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
10+
<%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
1111
<% end %>
1212
<% end %>
1313
<% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
14-
<%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
14+
<%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
1515
<%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
1616
<%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
1717
<% end %>
18-
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
19-
<%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
18+
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
19+
<%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
2020
<% end %>
2121
<% end %>
2222
<% else %>
@@ -26,4 +26,3 @@
2626
<%= pb_rails("online_status", props: object.online_status_props) if object.status %>
2727
<% end %>
2828
<% end %>
29-

‎playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React from "react";
22
import { Avatar } from 'playbook-ui'
33

4-
const AvatarBadgeComponentOverlay = () => {
4+
const AvatarBadgeComponentOverlay = (props) => {
55
return (
66
<div>
77
<Avatar
88
componentOverlay={{
99
component: "badge",
1010
placement: "bottom-right",
11-
text: "12"
11+
text: "12",
1212
}}
1313
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
1414
marginBottom="sm"
1515
size="sm"
16+
{...props}
1617
/>
1718

1819
<Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
2425
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
2526
marginBottom="sm"
2627
size="md"
28+
{...props}
29+
2730
/>
2831

2932
<Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
3639
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
3740
marginBottom="sm"
3841
size="lg"
42+
{...props}
43+
3944
/>
4045

4146
<Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
4853
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
4954
marginBottom="sm"
5055
size="xl"
51-
/>
56+
{...props}
57+
/>
5258
</div>
5359
)
5460
}

‎playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Avatar } from 'playbook-ui'
33

4-
const AvatarCircleIconComponentOverlay = () => {
4+
const AvatarCircleIconComponentOverlay = (props) => {
55
return (
66
<div>
77
<Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
1414
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
1515
marginBottom="sm"
1616
size="sm"
17+
{...props}
1718
/>
1819

1920
<Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
2627
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
2728
marginBottom="sm"
2829
size="md"
30+
{...props}
2931
/>
3032

3133
<Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
3840
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
3941
marginBottom="sm"
4042
size="lg"
43+
{...props}
4144
/>
4245

4346
<Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
5053
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
5154
marginBottom="sm"
5255
size="xl"
53-
/>
56+
{...props}
57+
/>
5458
</div>
5559
)
5660
}

0 commit comments

Comments
 (0)