Skip to content

refactor(demo): update the order of examples for Message component #1534

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

Merged
suvashvishowkarma merged 1 commit into from
Jul 22, 2025
Merged

refactor(demo): update the order of examples for Message component #1534

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
78 changes: 41 additions & 37 deletions apps/demo/src/Views/Ui/components/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,45 @@ export const MessageDemo = () => {
</Section>

<Section title={t("message.usage.basic")}>
<Message message={t("message.contents.content1")} />
<Message message="Season sale: Up to 50% off selected items!" />
<CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" />' />
</Section>

<Section title={t("message.usage.customMessage")}>
<Message message={<b>{t("message.contents.content1")}</b>} />
<CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
<Section title={t("message.usage.severity")}>
<Message message="Info message" severity="info" />
<Message message="Success message" severity="success" />
<Message message="Warning message" severity="warning" />
<Message message="Danger message" severity="danger" />

<CodeBlock
exampleCode='<Message message="Info message" severity="info" />
<Message message="Success message" severity="success" />
<Message message="Warning message" severity="warning" />
<Message message="Danger message" severity="danger" />'
/>
</Section>

<Section title={t("message.usage.enableClose")}>
<Message
enableClose={true}
icon={<i className="pi pi-bell" />}
message="We value your feedback: take our quick survey!"
/>
<CodeBlock
exampleCode='<Message
message="We value your feedback: take our quick survey!"
icon={<i className="pi pi-bell" />}
enableClose={true}
/>'
/>
</Section>

<Section title={t("message.usage.arrayMessage")}>
<Message
message={[
t("message.contents.content1"),
t("message.contents.content2"),
t("message.contents.content3"),
"Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!",
"New features just launched! Check them out!",
"New Year, New You: Start fresh with our services!",
]}
enableClose={true}
/>
Expand All @@ -97,9 +121,14 @@ export const MessageDemo = () => {
/>
</Section>

<Section title={t("message.usage.customMessage")}>
<Message message={<b>Season sale: Up to 50% off selected items!</b>} />
<CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
</Section>

<Section title={t("message.usage.icons.icon")}>
<Message
message={t("message.contents.content2")}
message="New features just launched! Check them out!"
icon="pi pi-android"
/>
<CodeBlock
Expand All @@ -112,7 +141,7 @@ export const MessageDemo = () => {

<Section title={t("message.usage.icons.customIcon")}>
<Message
message={t("message.contents.content3")}
message="New Year, New You: Start fresh with our services!"
icon={<i className="pi pi-bell" />}
/>
<CodeBlock
Expand All @@ -123,36 +152,11 @@ export const MessageDemo = () => {
/>
</Section>

<Section title={t("message.usage.enableClose")}>
<Section title={t("message.usage.hideIcon")}>
<Message
enableClose={true}
icon={<i className="pi pi-bell" />}
message={t("message.contents.content4")}
/>
<CodeBlock
exampleCode='<Message
message="We value your feedback: take our quick survey!"
icon={<i className="pi pi-bell" />}
enableClose={true}
/>'
message="Season sale: Up to 50% off selected items!"
showIcon={false}
/>
</Section>

<Section title={t("message.usage.severity")}>
<Message message={t("message.contents.info")} severity="info" />
<Message message={t("message.contents.success")} severity="success" />
<Message message={t("message.contents.warning")} severity="warning" />
<Message message={t("message.contents.danger")} severity="danger" />

<CodeBlock
exampleCode='<Message message="Info message" severity="info" />
<Message message="Success message" severity="success" />
<Message message="Warning message" severity="warning" />
<Message message="Danger message" severity="danger" />'
/>
</Section>
<Section title={t("message.usage.hideIcon")}>
<Message message={t("message.contents.content1")} showIcon={false} />
<CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" showIcon={false} />' />
</Section>
<Section
Expand Down
11 changes: 0 additions & 11 deletions apps/demo/src/locales/en/ui.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,17 +223,6 @@
}
},
"message": {
"contents": {
"content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!",
"content2": "New features just launched! Check them out!",
"content3": "New Year, New You: Start fresh with our services!",
"content4": "We value your feedback: take our quick survey!",
"content5": "Warning: Limited time only! Sale ends soon!",
"danger": "Danger message",
"info": "Info message",
"success": "Success message",
"warning": "Warning message"
},
"subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
"propertiesDescription": {
"enableClose": "Displays a close icon if true, allowing the message to be dismissed.",
Expand Down
11 changes: 0 additions & 11 deletions apps/demo/src/locales/fr/ui.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,17 +223,6 @@
}
},
"message": {
"contents": {
"content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers! (fr)",
"content2": "New features just launched! Check them out! (fr)",
"content3": "New Year, New You: Start fresh with our services! (fr)",
"content4": "We value your feedback: take our quick survey! (fr)",
"content5": "Warning: Limited time only! Sale ends soon! (fr)",
"danger": "Danger message (fr)",
"info": "Info message (fr)",
"success": "Success message (fr)",
"warning": "Warning message (fr)"
},
"subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",
"propertiesDescription": {
"enableClose": "Displays a close icon if true, allowing the message to be dismissed. (fr)",
Expand Down