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

Remove some variants of Badge #372

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove some variants of Badge #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 4 additions & 26 deletions example/src/pages/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
H4,
hexToRgba,
HStack,
IOBadgeRadius,
IOColors,
IOTagRadius,
IOVisualCostants,
Expand Down Expand Up @@ -44,46 +43,25 @@ const renderBadge = () => (
<VStack space={16}>
<H4>Default</H4>
<HStack space={8} style={{ flexWrap: "wrap" }}>
<Badge text={"Blue"} variant="blue" />
<Badge text={"Default"} variant="default" />
<Badge text={"Info"} variant="info" />
<Badge text={"Warning"} variant="warning" />
<Badge text={"Error"} variant="error" />
<Badge text={"Success"} variant="success" />
<Badge text={"Purple"} variant="purple" />
<Badge text={"Light blue"} variant="lightBlue" />
<Badge text={"Turquoise"} variant="turquoise" />
<Badge text={"Cgn"} variant="cgn" />
<Badge text={"Highlight"} variant="highlight" />
</HStack>
</VStack>
<VStack space={16}>
<H4>Outline</H4>
<HStack space={8} style={{ flexWrap: "wrap" }}>
<Badge outline text={"Blue"} variant="blue" />
<Badge outline text={"Default"} variant="default" />
<Badge outline text={"Info"} variant="info" />
<Badge outline text={"Warning"} variant="warning" />
<Badge outline text={"Error"} variant="error" />
<Badge outline text={"Success"} variant="success" />
<Badge outline text={"Purple"} variant="purple" />
<Badge outline text={"Light blue"} variant="lightBlue" />
<Badge outline text={"Turquoise"} variant="turquoise" />
<Badge outline text={"Contrast"} variant="contrast" />
<Badge outline text={"Cgn"} variant="cgn" />
<Badge outline text={"Highlight"} variant="highlight" />
</HStack>
</VStack>
<VStack space={16}>
<H4>Contrast</H4>
<View
style={{
alignSelf: "flex-start",
backgroundColor: IOColors.bluegrey,
padding: 16,
borderRadius: IOBadgeRadius + 16,
borderCurve: "continuous"
}}
>
<Badge text={"Contrast"} variant="contrast" />
</View>
</VStack>
</VStack>
</>
);
Expand Down
8 changes: 4 additions & 4 deletions example/src/pages/ListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ const renderListItemNav = () => (
topElement={{
badgeProps: {
text: "Novità",
variant: "blue"
variant: "default"
}
}}
/>
Expand All @@ -176,7 +176,7 @@ const renderListItemNav = () => (
topElement={{
badgeProps: {
text: "Novità",
variant: "blue"
variant: "default"
}
}}
hideChevron
Expand Down Expand Up @@ -475,7 +475,7 @@ const transactionStatusArray: Array<mockTransactionStatusData> = [
},
{
badge: {
variant: "info",
variant: "default",
text: "pending"
},
asset: { uri: organizationLogoURI.imageSource }
Expand All @@ -489,7 +489,7 @@ const transactionStatusArray: Array<mockTransactionStatusData> = [
},
{
badge: {
variant: "lightBlue",
variant: "default",
text: "reversal"
},
asset: "applePay"
Expand Down
8 changes: 4 additions & 4 deletions example/src/pages/Modules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ const renderModuleCredential = () => (
onPress={mockFn}
badge={{
text: "predefinita",
variant: "info"
variant: "default"
}}
/>
</View>
Expand All @@ -264,7 +264,7 @@ const renderModuleCredential = () => (
onPress={mockFn}
badge={{
text: "predefinita",
variant: "info"
variant: "default"
}}
/>
</View>
Expand Down Expand Up @@ -320,7 +320,7 @@ const renderModuleNavigation = () => (
onPress={mockFn}
badge={{
text: "In arrivo",
variant: "blue",
variant: "highlight",
outline: true
}}
/>
Expand All @@ -335,7 +335,7 @@ const renderModuleNavigation = () => (
onPress={mockFn}
badge={{
text: "IN arrivo",
variant: "blue",
variant: "highlight",
outline: true
}}
/>
Expand Down
4 changes: 2 additions & 2 deletions example/src/pages/Selection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ const ListItemSwitchShowroom = () => (
value={false}
badge={{
text: "Attivo",
variant: "info"
variant: "default"
}}
description="Inquadra il codice QR mostrato dall’esercente e segui le istruzioni in app per autorizzare la spesa."
/>
Expand All @@ -478,7 +478,7 @@ const ListItemSwitchShowroom = () => (
value={false}
badge={{
text: "Attivo",
variant: "info"
variant: "default"
}}
/>
</ComponentViewerBox>
Expand Down
110 changes: 27 additions & 83 deletions src/components/badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,29 @@ import {
IOBadgeVSpacing,
IOColors,
useIOExperimentalDesign,
useIOTheme,
useIOThemeContext
} from "../../core";
import { useIOFontDynamicScale } from "../../utils/accessibility";
import { WithTestID } from "../../utils/types";
import { IOText } from "../typography";

/*
NOTE FOR REFACTORING in the `io-app`:

- default (legacy) -> removed
- blue -> Deleted -> replaced with `default`
- info -> removed -> highlight?
- purple -> cgn
- turquoise -> highlight
- contrast -> removed
- lightBlue -> default
*/

export type Badge = WithTestID<{
outline?: boolean;
text: string;
allowFontScaling?: boolean;
variant:
| "default"
| "info"
| "warning"
| "error"
| "success"
| "purple"
| "lightBlue"
| "blue"
| "turquoise"
| "contrast";
variant: "default" | "warning" | "error" | "success" | "cgn" | "highlight";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the variant parameter is required, what do you think to initialize its value to default?

Copy link
Collaborator Author

@dmnplb dmnplb Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LeleDallas The Badge component always gives a meaning when used, even when it's set as default. I don't remember exactly why I set the props as required, but it probably had to do with the side effect when the props are not set and the component uses the fallback. If we change the fallback, some parts of the application will show a different badge, thus conveying a different meaning. Maybe I'm being too pedantic here, but I prefer to keep it mandatory.

Another reason is that most of these badges are configured through a config object, and it's better to stay strict at the TypeScript level.

}>;

type SolidVariantProps = {
Expand Down Expand Up @@ -77,7 +78,6 @@ export const Badge = ({
testID
}: Badge) => {
const { isExperimental } = useIOExperimentalDesign();
const theme = useIOTheme();
const { dynamicFontScale } = useIOFontDynamicScale();
const { themeType } = useIOThemeContext();

Expand All @@ -88,12 +88,8 @@ export const Badge = ({
SolidVariantProps
> = {
default: {
foreground: "grey-700",
background: IOColors["grey-50"]
},
info: {
foreground: "info-850",
background: IOColors["info-100"]
foreground: "blueIO-850",
background: IOColors["blueIO-50"]
},
warning: {
foreground: "warning-850",
Expand All @@ -107,25 +103,13 @@ export const Badge = ({
foreground: "error-850",
background: IOColors["error-100"]
},
purple: {
cgn: {
foreground: "hanPurple-500",
background: IOColors["hanPurple-100"]
},
lightBlue: {
foreground: "blueIO-850",
background: IOColors["blueIO-50"]
},
blue: {
foreground: "white",
background: IOColors[theme["interactiveElem-default"]]
},
turquoise: {
highlight: {
foreground: "turquoise-850",
background: IOColors["turquoise-50"]
},
contrast: {
foreground: "grey-700",
background: IOColors.white
}
};

Expand All @@ -134,12 +118,8 @@ export const Badge = ({
SolidVariantProps
> = {
default: {
foreground: "grey-50",
background: hexToRgba(IOColors["grey-50"], bgOpacityDarkMode)
},
info: {
foreground: "info-400",
background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode)
foreground: "blueIO-200",
background: hexToRgba(IOColors["blueIO-200"], bgOpacityDarkMode)
},
warning: {
foreground: "warning-400",
Expand All @@ -153,25 +133,13 @@ export const Badge = ({
foreground: "error-400",
background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode)
},
purple: {
cgn: {
foreground: "hanPurple-250",
background: hexToRgba(IOColors["hanPurple-250"], bgOpacityDarkMode)
},
lightBlue: {
foreground: "blueIO-200",
background: hexToRgba(IOColors["blueIO-600"], bgOpacityDarkMode)
},
blue: {
foreground: "white",
background: IOColors[theme["interactiveElem-default"]]
},
turquoise: {
highlight: {
foreground: "turquoise-300",
background: hexToRgba(IOColors["turquoise-300"], bgOpacityDarkMode)
},
contrast: {
foreground: "grey-700",
background: IOColors.white
}
};

Expand All @@ -180,10 +148,7 @@ export const Badge = ({
OutlinedVariantProps
> = {
default: {
foreground: "grey-700"
},
info: {
foreground: "info-850"
foreground: "blueIO-850"
},
warning: {
foreground: "warning-850"
Expand All @@ -194,20 +159,11 @@ export const Badge = ({
error: {
foreground: "error-850"
},
purple: {
cgn: {
foreground: "hanPurple-500"
},
lightBlue: {
foreground: "blueIO-850"
},
blue: {
foreground: theme["interactiveElem-default"]
},
turquoise: {
highlight: {
foreground: "turquoise-850"
},
contrast: {
foreground: "grey-850"
}
};

Expand All @@ -216,10 +172,7 @@ export const Badge = ({
OutlinedVariantProps
> = {
default: {
foreground: "grey-100"
},
info: {
foreground: "info-400"
foreground: "blueIO-200"
},
warning: {
foreground: "warning-400"
Expand All @@ -230,20 +183,11 @@ export const Badge = ({
error: {
foreground: "error-400"
},
purple: {
cgn: {
foreground: "hanPurple-250"
},
lightBlue: {
foreground: "blueIO-150"
},
blue: {
foreground: theme["interactiveElem-default"]
},
turquoise: {
highlight: {
foreground: "turquoise-300"
},
contrast: {
foreground: "grey-100"
}
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
"paddingVertical": 4,
},
{
"backgroundColor": "#F4F5F8",
"backgroundColor": "#E7ECFC",
},
]
}
Expand All @@ -31,7 +31,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
[
{},
{
"color": "#555C70",
"color": "#031344",
"fontFamily": "Titillio",
"fontSize": 12,
"fontStyle": "normal",
Expand Down Expand Up @@ -69,7 +69,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
"paddingVertical": 4,
},
{
"backgroundColor": "#F4F5F8",
"backgroundColor": "#E7ECFC",
},
]
}
Expand All @@ -83,7 +83,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
[
{},
{
"color": "#555C70",
"color": "#031344",
"fontFamily": "Titillium Sans Pro",
"fontSize": 12,
"fontStyle": "normal",
Expand Down
2 changes: 1 addition & 1 deletion src/components/modules/ModulePaymentNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const ModulePaymentNoticeContent = ({
case "canceled":
return <Badge variant="default" text={badgeText} />;
case "in-progress":
return <Badge variant="info" text={badgeText} />;
return <Badge variant="default" text={badgeText} />;
}
};

Expand Down
Loading
Loading