Skip to content

Toast redesign #2179

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
Mil4n0r merged 12 commits into from
Apr 7, 2025
Merged

Toast redesign #2179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
007a439
Toast redesign & code refactors
GomezIvann Mar 6, 2025
fcb1f43
Code formatting
GomezIvann Mar 6, 2025
3b8d709
Merge branch 'master' into gomezivann/toast-redesign
GomezIvann Mar 24, 2025
1eb0379
New inheritColor prop for Spinner and Toast fixes
GomezIvann Mar 24, 2025
0546460
Improved description for inheritColor prop
GomezIvann Mar 24, 2025
7757eb0
Merge branch 'master' into gomezivann/toast-redesign
GomezIvann Apr 2, 2025
3ebdcd5
Toast code updates & feedback applied
GomezIvann Apr 2, 2025
7ab16c0
Toast documentation
GomezIvann Apr 4, 2025
5213bf0
Small doc update
GomezIvann Apr 4, 2025
4d08716
Children prop from toast documented properly
GomezIvann Apr 4, 2025
a1f1b6d
Toast documentation updates based on feedback
GomezIvann Apr 4, 2025
302d074
Toast documentation updates
GomezIvann Apr 7, 2025
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
17 changes: 17 additions & 0 deletions apps/website/pages/components/toast/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ToastPageLayout from "screens/components/toast/ToastPageLayout";
import ToastCodePage from "screens/components/toast/code/ToastCodePage";

const Code = () => (
<>
<Head>
<title>Toast code — Halstack Design System</title>
</Head>
<ToastCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <ToastPageLayout>{page}</ToastPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/toast/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ToastCodePage from "screens/components/toast/code/ToastCodePage";
import ToastPageLayout from "screens/components/toast/ToastPageLayout";
import ToastOverviewPage from "screens/components/toast/overview/ToastOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Toast — Halstack Design System</title>
</Head>
<ToastCodePage></ToastCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Toast — Halstack Design System</title>
</Head>
<ToastOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <ToastPageLayout>{page}</ToastPageLayout>;
};
Index.getLayout = (page: ReactElement) => <ToastPageLayout>{page}</ToastPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/toast/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/toast/usage.tsx
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,19 @@ const sections = [
<TableCode>'Spinner'</TableCode>
</td>
</tr>
<tr>
<td>inheritColor</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>
If true, the color is inherited from the closest parent with a defined color. This allows users to adapt
the spinner to the semantic color of the use case in which it is used.
</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>label</td>
<td>
Expand Down
7 changes: 3 additions & 4 deletions apps/website/screens/components/toast/ToastPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const ToastPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/toast" },
{ label: "Usage", path: "/components/toast/usage" },
{ label: "Specifications", path: "/components/toast/specifications" },
{ label: "Overview", path: "/components/toast" },
{ label: "Code", path: "/components/toast/code" },
];

return (
Expand All @@ -21,7 +20,7 @@ const ToastPageHeading = ({ children }: { children: ReactNode }) => {
updates to the user. It is commonly used to communicate non-critical information, such as success messages,
warning alerts, or brief updates.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
41 changes: 23 additions & 18 deletions apps/website/screens/components/toast/code/ToastCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,21 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>ReactNode</TableCode>
</td>
<td>
Tree of components from which the <Code>useToast</Code> hook can be triggered.
</td>
<td>-</td>
</tr>
<tr>
<td>duration</td>
<td>
Expand All @@ -49,14 +64,6 @@ const sections = [
<TableCode>3000</TableCode>
</td>
</tr>
<tr>
<td>children</td>
<td>
<TableCode>ReactNode</TableCode>
</td>
<td>Tree of components from which the <Code>useToast</Code> hook can be triggered.</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
),
Expand Down Expand Up @@ -296,15 +303,13 @@ const sections = [
},
];

const ToastCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/toast/code/ToastCodePage.tsx" />
</DxcFlex>
);
};
const ToastCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/toast/code/ToastCodePage.tsx" />
</DxcFlex>
);

export default ToastCodePage;
Loading