Skip to content

Button redesign #2148

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 20 commits into from
Feb 28, 2025
Merged

Button redesign #2148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cd43114
Reimplementation of the Button component with new CSS variables
GomezIvann Jan 24, 2025
fed2e69
Improved focus for Button
GomezIvann Jan 27, 2025
0836769
Button styles small update
GomezIvann Jan 27, 2025
b433a1d
Merge branch 'master' into gomezivann/tokens-button
GomezIvann Jan 30, 2025
6912d07
Update preview.tsx
GomezIvann Jan 30, 2025
245c3d6
Button styles update
GomezIvann Jan 31, 2025
2f3e614
Button styles updates
GomezIvann Feb 3, 2025
3b412a1
Defining width to fix Chromatic issues
GomezIvann Feb 3, 2025
ea41c3b
Preview changes to fix Chromatic
GomezIvann Feb 5, 2025
261947a
Restoring preview-head for font icons
GomezIvann Feb 5, 2025
ccec903
Variables css in index ts
GomezIvann Feb 5, 2025
1cc9000
Updates based on feedback
GomezIvann Feb 10, 2025
d6b3a5a
New documentation update for the Button component
GomezIvann Feb 11, 2025
99afcb4
Doc update
GomezIvann Feb 12, 2025
4ea456f
Merge branch 'master' into gomezivann/tokens-button
Mil4n0r Feb 12, 2025
b8fb89d
Button fixes based on feedback
GomezIvann Feb 12, 2025
5d5edc9
Merge branch 'gomezivann/tokens-button' of https://github.com/dxc-tec…
GomezIvann Feb 12, 2025
882732a
Updates based on feedback
GomezIvann Feb 13, 2025
e649bdf
Updated anatomy image
GomezIvann Feb 18, 2025
edcd9f1
Merge branch 'master' into gomezivann/tokens-button
Mil4n0r Feb 27, 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/button/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 ButtonPageLayout from "screens/components/button/ButtonPageLayout";
import ButtonCodePage from "screens/components/button/code/ButtonCodePage";

const Code = () => (
<>
<Head>
<title>Button Code — Halstack Design System</title>
</Head>
<ButtonCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/button/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 ButtonPageLayout from "screens/components/button/ButtonPageLayout";
import ButtonCodePage from "screens/components/button/code/ButtonCodePage";
import ButtonOverviewPage from "screens/components/button/overview/ButtonOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Button — Halstack Design System</title>
</Head>
<ButtonCodePage></ButtonCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Button — Halstack Design System</title>
</Head>
<ButtonOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

2 changes: 1 addition & 1 deletion apps/website/screens/common/QuickNavContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
return linksList;
};

const DxcQuickNavContainer = ({ title, sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
<MainContainer>
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
{sections.map((section) => (
Expand Down
12 changes: 4 additions & 8 deletions apps/website/screens/components/button/ButtonPageLayout.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 ButtonPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/button" },
{ label: "Usage", path: "/components/button/usage" },
{ label: "Specifications", path: "/components/button/specifications" },
{ label: "Overview", path: "/components/button" },
{ label: "Code", path: "/components/button/code" },
];

return (
Expand All @@ -18,12 +17,9 @@ const ButtonPageHeading = ({ children }: { children: ReactNode }) => {
<ComponentHeading name="Button" />
<DxcParagraph>
Buttons are basic interface elements that initialize an action or function when the user interacts with
them. The appearance of the button should suggest the user takes an action that leads to different
scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to
Action) components, which basically are designed to capture user attention and improve the user experience
within the application.
them.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
155 changes: 71 additions & 84 deletions apps/website/screens/components/button/code/ButtonCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import StatusBadge from "@/common/StatusBadge";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import semantic from "./examples/semantic";
Expand All @@ -26,63 +25,13 @@ const sections = [
</thead>
<tbody>
<tr>
<td>label</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed in the button.</td>
<td>-</td>
</tr>
<tr>
<td>mode</td>
<td>
<TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
</td>
<td>The available button modes.</td>
<td>
<TableCode>'primary'</TableCode>
</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
semantic
</DxcFlex>
</td>
<td>
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
</td>
<td>Specifies the semantic meaning of the buttons, which determines its color.</td>
<td>
<TableCode>'default'</TableCode>
</td>
</tr>
<tr>
<td>title</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Text representing advisory information related to the button's action. Under the hood, this prop also
serves as an accessible label for the component.
</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>
<TableCode>'button' | 'reset' | 'submit'</TableCode>
</td>
<td>disabled</td>
<td>
Sets the <Code>type</Code> attribute of the <abbr>HTML</abbr> button element. See{" "}
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">
MDN
</DxcLink>{" "}
for further information.
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>'button'</TableCode>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -111,13 +60,32 @@ const sections = [
</td>
</tr>
<tr>
<td>disabled</td>
<td>label</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>string</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>Text to be placed in the button.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>false</TableCode>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
</td>
<td>-</td>
</tr>
<tr>
<td>mode</td>
<td>
<TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
</td>
<td>The available button modes.</td>
<td>
<TableCode>'primary'</TableCode>
</td>
</tr>
<tr>
Expand All @@ -129,23 +97,17 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>semantic</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
</td>
<td>Specifies the semantic meaning of the buttons, which determines its color.</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
<TableCode>'default'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="new" />
size
</DxcFlex>
</td>
<td>size</td>
<td>
<TableCode>
{
Expand All @@ -170,6 +132,33 @@ const sections = [
<TableCode>0</TableCode>
</td>
</tr>
<tr>
<td>title</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Text representing advisory information related to the button's action. Under the hood, this prop also
serves as an accessible label for the component.
</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>
<TableCode>'button' | 'reset' | 'submit'</TableCode>
</td>
<td>
Sets the <Code>type</Code> attribute of the <abbr>HTML</abbr> button element. See{" "}
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">
MDN
</DxcLink>{" "}
for further information.
</td>
<td>
<TableCode>'button'</TableCode>
</td>
</tr>
</tbody>
</DxcTable>
),
Expand All @@ -181,14 +170,14 @@ const sections = [
title: "Basic usage",
content: <Example example={basicUsage} defaultIsVisible />,
},
{
title: "Semantic",
content: <Example example={semantic} defaultIsVisible />,
},
{
title: "Icons",
content: <Example example={icons} defaultIsVisible />,
},
{
title: "Semantic",
content: <Example example={semantic} defaultIsVisible />,
},
{
title: "Size",
content: <Example example={sizes} defaultIsVisible />,
Expand All @@ -197,15 +186,13 @@ const sections = [
},
];

const ButtonCodePage = () => {
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/button/code/ButtonCodePage.tsx" />
</DxcFlex>
);
};
const ButtonCodePage = () => (
<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/button/code/ButtonCodePage.tsx" />
</DxcFlex>
);

export default ButtonCodePage;
Loading