Skip to content
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

refactor(all): refactor components and colors based on latest figma changes #902

Merged
merged 7 commits into from
Nov 26, 2024
Merged

refactor(all): refactor components and colors based on latest figma changes #902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
219bc48
refactor(all): refactor components and colors based on latest figma c…
masoudmanson Nov 22, 2024
21c352c
refactor(rest): fix the rest of the components
masoudmanson Nov 22, 2024
779e88e
Merge branch 'main' of https://github.com/chanzuckerberg/sci-componen…
masoudmanson Nov 22, 2024
adbc85f
feat(all): refactored all components and variables
masoudmanson Nov 22, 2024
df250b3
fix(snapshots): fix test snapshots and a11y errors
masoudmanson Nov 22, 2024
961c55e
refactor(design-tokens): update design tokens based on figma changes
masoudmanson Nov 22, 2024
de8224f
fix(button): fic active state styles for the button
masoudmanson Nov 26, 2024
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
10 changes: 4 additions & 6 deletions packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import CustomSvgIcon from "./customSvgIcon";

export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
{
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
name: "Column One",
options: [
{
Expand Down Expand Up @@ -35,7 +35,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
width: 260,
},
{
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" sdsType="static" />,
icon: <Icon sdsIcon="ChevronRight" sdsSize="xs" />,
name: "Column Two",
options: [
{
Expand Down Expand Up @@ -68,14 +68,12 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
name: "Column Three",
options: [
{
icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
name: "Custom SDS Icon",
section: "With Icon",
},
{
icon: (
<CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />
),
icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
name: "Custom SVG Icon",
section: "With Icon",
},
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
section: "name with details",
},
{
icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
icon: <CustomSdsIcon sdsSize="s" color="green" shade={600} />,
name: "Custom SDS Icon",
section: "With Icon",
},
{
icon: <CustomSvgIcon sx={{ color: "#969696", height: 16, width: 16 }} />,
icon: <CustomSvgIcon sx={{ color: "orange", height: 16, width: 16 }} />,
name: "Custom SVG Icon",
section: "With Icon",
},
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/common/storybook/customSdsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ import Icon, { IconProps } from "../../core/Icon";
function CustomSdsIcon(props: {
sdsIcon?: IconProps<"Bacteria">["sdsIcon"];
sdsSize?: IconProps<"Bacteria">["sdsSize"];
sdsType?: IconProps<"Bacteria">["sdsType"];
color?: IconProps<"Bacteria">["color"];
shade?: IconProps<"Bacteria">["shade"];
}) {
const {
sdsIcon = "Bacteria",
sdsSize = "l",
sdsType = "static",
color = "blue",
shade = 400,
...rest
Expand All @@ -24,7 +22,6 @@ function CustomSdsIcon(props: {
<Icon
sdsIcon={sdsIcon}
sdsSize={sdsSize}
sdsType={sdsType}
color={color}
shade={shade}
{...rest}
Expand Down
7 changes: 3 additions & 4 deletions packages/components/src/common/storybook/customSvgIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import { SvgIcon, SvgIconProps } from "@mui/material";

function CustomSvgIcon(props: SvgIconProps) {
return (
<SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
<path d="M7 19c-1.1 0-2 .9-2 2h14c0-1.1-.9-2-2-2h-4v-2h3c1.1 0 2-.9 2-2h-8c-1.66 0-3-1.34-3-3 0-1.09.59-2.04 1.46-2.56C8.17 9.03 8 8.54 8 8c0-.21.04-.42.09-.62C6.28 8.13 5 9.92 5 12c0 2.76 2.24 5 5 5v2z"></path>
<path d="M10.56 5.51C11.91 5.54 13 6.64 13 8c0 .75-.33 1.41-.85 1.87l.59 1.62.94-.34.34.94 1.88-.68-.34-.94.94-.34-2.74-7.53-.94.34-.34-.94-1.88.68.34.94-.94.35z"></path>
<circle cx="10.5" cy="8" r="1.5"></circle>
<SvgIcon color="primary" viewBox="0 0 512 512" {...props}>
<path d="M458.872,256.078c-17.529-26.644-41.771-52.681-70.79-76.4c-3.469-21.271-8.392-41.554-14.672-60.373 c53.195-0.169,87.024,22.59,72.415,73.747c-0.631,2.21-0.052,4.584,1.508,6.27c6.904,7.458,13.366,15.038,19.341,22.705 c3.073,3.943,9.293,3.121,11.202-1.498c32.302-78.145-10.047-146.718-120.43-140.279c-0.031,0.001-0.062,0.004-0.093,0.007 c-0.013-0.028-0.028-0.055-0.041-0.083c-53.56-106.69-148.783-106.875-202.496-0.688C40.555,73.469-15.599,151.807,52.904,255.924 c0.018,0.028,0.038,0.055,0.056,0.084c-67.012,100.563-16.503,183.6,101.482,175.776c0.008,0.016,0.014,0.03,0.022,0.046 c53.515,106.6,148.97,107.133,202.766,0.164C470.406,437.597,528.418,361.778,458.872,256.078z M138.187,119.848 c-6.226,18.763-11.107,38.972-14.546,60.159c-16.562,13.617-31.69,28.038-44.907,42.876 C38.058,152.559,74.283,120.168,138.187,119.848z M117.998,274.703c-5.69-6.007-11.138-12.226-16.31-18.65 c5.142-6.327,10.591-12.465,16.297-18.416C117.543,249.588,117.518,261.961,117.998,274.703z M78.682,289.361 c13.172,14.872,28.299,29.301,45.012,42.962c3.477,21.316,8.412,41.64,14.711,60.491 C67.963,392.674,43.078,352.627,78.682,289.361z M333.074,123.155c2.657,7.176,5.083,14.639,7.271,22.352 c-9.094-5.698-18.999-11.49-30.114-17.469C317.999,126.092,325.631,124.461,333.074,123.155z M315.549,85.768 c-19.762,3.974-39.653,9.827-59.258,17.221c-20.847-8.122-40.797-14.035-59.637-17.942 C232.529,25.172,278.658,23.544,315.549,85.768z M178.643,123.321c7.447,1.231,15.082,2.784,22.854,4.655 c-10.25,5.498-20.295,11.364-30.069,17.544C173.601,137.861,176.01,130.45,178.643,123.321z M178.794,389.096 c-2.692-7.253-5.148-14.8-7.362-22.603c9.524,5.966,19.569,11.81,30.503,17.666C194.064,386.139,186.334,387.787,178.794,389.096z M196.051,425.931c19.213-4.025,38.998-9.881,58.808-17.323c21.078,8.168,41.325,14.107,60.474,17.991 C278.773,487.933,232.398,487.509,196.051,425.931z M333.091,388.798c-7.661-1.267-15.52-2.879-23.521-4.823 c10.453-5.508,20.759-11.419,30.837-17.698C338.208,374.051,335.765,381.569,333.091,388.798z M351.321,311.775 c-29.889,22.661-63.024,41.092-95.899,54.615c-32.493-13.173-65.228-31.205-94.845-53.695 c-4.587-35.626-4.895-74.801-0.105-112.588c29.851-22.504,63.071-40.834,96.05-54.314c32.446,13.161,65.124,31.155,94.688,53.581 C355.863,235.562,356.016,274.655,351.321,311.775z M410.019,255.868c-5.135,6.281-10.554,12.377-16.218,18.285 c0.449-12.289,0.444-24.538-0.018-36.832C399.446,243.294,404.869,249.48,410.019,255.868z M373.55,392.273 c6.215-18.706,11.092-38.85,14.536-59.969c16.428-13.394,31.608-27.808,45.054-43.017 C473.701,359.55,437.451,391.95,373.55,392.273z" />{" "}
<path d="M255.888,202.24c-29.643,0-53.76,24.117-53.76,53.76c0,29.643,24.117,53.76,53.76,53.76s53.76-24.117,53.76-53.76 C309.649,226.357,285.531,202.24,255.888,202.24z" />{" "}
</SvgIcon>
);
}
Expand Down
Loading