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

[IOAPPX-412] Add dark mode support to Badge and Tag components #343

Merged
merged 11 commits into from
Nov 20, 2024
Merged

[IOAPPX-412] Add dark mode support to Badge and Tag components #343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
08936e7
Add dark mode support to `Badge`
dmnplb Oct 24, 2024
1dec3c7
Add basic dark mode support to `Tag`
dmnplb Oct 24, 2024
58ead84
Add `forceLightMode` to `Tag`
dmnplb Oct 25, 2024
bd2663c
Adjust chromatic values of dark mode version of `Badge`
dmnplb Oct 25, 2024
4f2e8e2
Fix wrong icon color in the forced light mode version of `Tag`
dmnplb Oct 25, 2024
e86616e
Update `jest` snapshot
dmnplb Oct 25, 2024
1184272
Fix wrong text color of dark mode version of `Tag`
dmnplb Oct 25, 2024
79d03d5
Merge branch 'main' into IOAPPX-412-add-dark-mode-badge
dmnplb Nov 11, 2024
676218c
Merge branch 'main' into IOAPPX-412-add-dark-mode-badge
dmnplb Nov 12, 2024
39136e9
Merge branch 'main' into IOAPPX-412-add-dark-mode-badge
dmnplb Nov 12, 2024
ed761a1
Merge branch 'main' into IOAPPX-412-add-dark-mode-badge
LeleDallas Nov 20, 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
179 changes: 91 additions & 88 deletions example/src/pages/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import {
Badge,
H2,
HSpacer,
H4,
hexToRgba,
HStack,
IOBadgeRadius,
IOColors,
IOStyles,
IOTagRadius,
IOVisualCostants,
Tag,
VSpacer
VSpacer,
VStack
} from "@pagopa/io-app-design-system";
import React from "react";
import { View } from "react-native";
Expand Down Expand Up @@ -37,102 +40,102 @@ export const Badges = () => (

const renderBadge = () => (
<>
<View style={IOStyles.row}>
<Badge text={"Default"} variant="default" />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge text={"Info"} variant="info" />
<HSpacer size={16} />
<Badge text={"Warning"} variant="warning" />
<HSpacer size={16} />
<Badge text={"Error"} variant="error" />
<HSpacer size={16} />
<Badge text={"Success"} variant="success" />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge text={"Purple"} variant="purple" />
<HSpacer size={16} />
<Badge text={"Light blue"} variant="lightBlue" />
<HSpacer size={16} />
<Badge text={"Blue"} variant="blue" />
<HSpacer size={16} />
<Badge text={"Turquoise"} variant="turquoise" />
<HSpacer size={16} />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge outline text={"Info"} variant="info" />
<HSpacer size={16} />
<Badge outline text={"Warning"} variant="warning" />
<HSpacer size={16} />
<Badge outline text={"Error"} variant="error" />
<HSpacer size={16} />
<Badge outline text={"Success"} variant="success" />
</View>
<VSpacer size={16} />
<View style={IOStyles.row}>
<Badge outline text={"Purple"} variant="purple" />
<HSpacer size={16} />
<Badge outline text={"Light blue"} variant="lightBlue" />
<HSpacer size={16} />
<Badge outline text={"Blue"} variant="blue" />
<HSpacer size={16} />
<Badge outline text={"Turquoise"} variant="turquoise" />
<HSpacer size={16} />
</View>
<VSpacer size={16} />
<View
style={{
backgroundColor: IOColors.bluegrey,
padding: 16,
borderRadius: 8
}}
>
<View style={IOStyles.row}>
<Badge text={"Default"} variant="default" />
<HSpacer size={16} />
<Badge text={"Contrast"} variant="contrast" />
</View>
</View>
<VStack space={24}>
<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" />
</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" />
</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>
</>
);

const renderTag = () => (
<View>
<ComponentViewerBox name={"Tag, different variants"}>
<Tag text={"Entro il 30 mag"} variant="warning" />
<VSpacer size={8} />
<Tag text={"Completato"} variant="success" />
<VSpacer size={8} />
<Tag text={"Scaduto"} variant="error" />
<VSpacer size={8} />
<View style={IOStyles.row}>
<Tag text={"Certificato"} variant="qrCode" />
<HSpacer size={8} />
<Tag text={"Valore legale"} variant="legalMessage" />
</View>
<VSpacer size={8} />
<Tag variant="attachment" iconAccessibilityLabel="Attachment" />
<VSpacer size={8} />
<Tag text={"No icon"} variant="noIcon" />
<VSpacer size={8} />
<Tag
text={"Custom icon"}
variant="customIcon"
customIconProps={{
iconName: "categTravel",
iconColor: "grey-700"
}}
/>
<VStack space={8}>
<Tag text={"Entro il 30 mag"} variant="warning" />
<Tag text={"Completato"} variant="success" />
<Tag text={"Scaduto"} variant="error" />
<Tag text={"Informazione"} variant="info" />
<HStack space={8}>
<Tag text={"Certificato"} variant="qrCode" />
<Tag text={"Valore legale"} variant="legalMessage" />
</HStack>
<Tag variant="attachment" iconAccessibilityLabel="Attachment" />
<Tag text={"No icon"} variant="noIcon" />
<Tag
text={"Custom icon"}
variant="custom"
icon={{ name: "categTravel", color: "lightGrey" }}
/>
</VStack>
</ComponentViewerBox>

<ComponentViewerBox name={"Tag, forced light mode"}>
<HStack space={8} style={{ flexWrap: "wrap" }}>
<Tag forceLightMode text={"Entro il 30 mag"} variant="warning" />
<Tag forceLightMode text={"Completato"} variant="success" />
<Tag forceLightMode text={"Scaduto"} variant="error" />
<Tag forceLightMode text={"Informazione"} variant="info" />
<Tag
forceLightMode
variant="attachment"
iconAccessibilityLabel="Attachment"
/>
<Tag forceLightMode text={"No icon"} variant="noIcon" />
<Tag
forceLightMode
text={"Custom icon"}
variant="custom"
icon={{ name: "categTravel", color: "lightGrey" }}
/>
</HStack>
</ComponentViewerBox>
<ComponentViewerBox name={"Tag, stress test"}>
<View
style={{
backgroundColor: IOColors["error-100"],
backgroundColor: hexToRgba(IOColors["error-400"], 0.25),
padding: 8,
width: "60%",
width: "50%",
borderRadius: IOTagRadius + 8
}}
>
Expand Down
Loading
Loading