Skip to content

feat(Avatar): support colorful #12460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kmcfaul wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(Avatar): support colorful #12460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e56f07
feat(Avatar): support colorful
kmcfaul Jun 12, 2026
a048504
update example syntax
kmcfaul Jun 12, 2026
c01931d
update snaps from core bump
kmcfaul Jun 12, 2026
25e2682
update initial alts, add isInline to icons, update css, update prop desc
kmcfaul Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...t-charts/src/victory/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ exports[`renders container via ChartLegend 1`] = `
z"
role="presentation"
shape-rendering="auto"
style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc);"
/>
<path
d="M 48.728, 22.872
Expand All @@ -86,7 +86,7 @@ exports[`renders container via ChartLegend 1`] = `
z"
role="presentation"
shape-rendering="auto"
style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
style="stroke: var(--pf-v6-chart-legend--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-legend--data--stroke--Width, 0px); fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9);"
/>
<text
direction="inherit"
Expand Down
26 changes: 13 additions & 13 deletions ...ges/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,35 @@ exports[`ChartDonut 1`] = `
d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M81.70758480762967,48.46514814693137A95,95,0,0,1,-81.70758480762966,48.465148146931405L-73.91275961315432,43.96480372261502A86,86,0,0,0,73.91275961315435,43.96480372261497Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M-82.82584189723369,46.528270051813095A95,95,0,0,1,-93.74443803302738,-15.394165708861626L-84.88048987244326,-13.831212492549462A86,86,0,0,0,-75.0310167027584,42.02792562749668Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M-93.35607142148164,-17.596702212267488A95,95,0,0,1,-1.118257089604104,-94.99341819874444L-1.1182570896040813,-85.99272935011163A86,86,0,0,0,-84.49212326089753,-16.033748995955364Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
</g>
Expand Down Expand Up @@ -83,35 +83,35 @@ exports[`ChartDonut 2`] = `
d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M61.91722684939433,-72.05037834238375A95,95,0,0,1,82.82584189723372,46.52827005181304L75.03101670275841,42.027925627496636A86,86,0,0,0,56.13169557884936,-65.15545066564565Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M81.70758480762967,48.46514814693137A95,95,0,0,1,-81.70758480762966,48.465148146931405L-73.91275961315432,43.96480372261502A86,86,0,0,0,73.91275961315435,43.96480372261497Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M-82.82584189723369,46.528270051813095A95,95,0,0,1,-93.74443803302738,-15.394165708861626L-84.88048987244326,-13.831212492549462A86,86,0,0,0,-75.0310167027584,42.02792562749668Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
<path
d="M-93.35607142148164,-17.596702212267488A95,95,0,0,1,-1.118257089604104,-94.99341819874444L-1.1182570896040813,-85.99272935011163A86,86,0,0,0,-84.49212326089753,-16.033748995955364Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--500, #004d99); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
</g>
Expand Down Expand Up @@ -148,21 +148,21 @@ exports[`renders component data 1`] = `
d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--100, #0066cc); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
<path
d="M64.16830759493514,47.77476635632862A80,80,0,1,1,-47.774766356328655,-64.16830759493511L-42.48429331491433,-56.886596149992364A71,71,0,1,0,56.88659614999237,42.48429331491432Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--200, #92c5f9); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
<path
d="M-46.26447237139682,-65.26560040477878A80,80,0,0,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,0,0,-40.97399932998255,-57.98388895983599Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--300, #003366); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
</g>
Expand Down
12 changes: 6 additions & 6 deletions .../victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`ChartDonutThreshold 1`] = `
d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
</g>
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`ChartDonutThreshold 2`] = `
d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(115, 115)"
/>
</g>
Expand Down Expand Up @@ -92,28 +92,28 @@ exports[`renders component data 1`] = `
d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,46.26447237139683,-65.26560040477877L40.97399932998254,-57.983888959835994A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-donut--threshold--first--Color, #e0e0e0); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
<path
d="M47.77476635632862,-64.16830759493513A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,42.484293314914325,-56.886596149992364Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-donut--threshold--second--Color, #c7c7c7); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-donut--threshold--second--Color, #c7c7c7); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
<path
d="M64.16830759493514,47.77476635632862A80,80,0,0,1,-23.831948248612967,76.36778275343231L-21.050581972913932,67.80761755585895A71,71,0,0,0,56.88659614999237,42.48429331491432Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-donut--threshold--third--Color, #a3a3a3); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-donut--threshold--third--Color, #a3a3a3); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
<path
d="M-25.607405310550824,75.7909017841929A80,80,0,0,1,-0.9334130156924101,-79.99455444055012L-0.9334130156923751,-70.99386410206263A71,71,0,0,0,-22.826039034851792,67.23073658661953Z"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgba(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
style="fill: var(--pf-v6-chart-theme--blue--ColorScale--400, #4394e5); padding: 8px; stroke: var(--pf-v6-chart-donut--pie--data--stroke--Color, rgb(255, 255, 255, 0.0000)); stroke-width: var(--pf-v6-chart-donut--pie--data--stroke--Width, 0px);"
transform="translate(100, 100)"
/>
</g>
Expand Down
Loading
Loading