Skip to content

Checkbox redesign #2167

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
GomezIvann merged 13 commits into from
Mar 19, 2025
Merged

Checkbox redesign #2167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f0985ee
Reimplementation of the Checkbox component with new CSS variables
Feb 4, 2025
fccb541
Changed check color to transparent
Feb 6, 2025
730f68b
Removed comments
Feb 19, 2025
b2cfc46
Added documentation with the new structure
Feb 19, 2025
7498897
Minor fixes for checkbox doc
Mar 10, 2025
c03d9df
Small refactoring to checkbox
Mar 10, 2025
7ac5a19
Changed checkbox logic to prevent outline bug
Mar 14, 2025
28a5f02
Solved problem with checked state
Mar 14, 2025
ee80443
Solved problem with checked state
Mar 14, 2025
6455835
Merge branch 'master' into Mil4n0r/tokens-checkbox
GomezIvann Mar 18, 2025
0cd3b78
Checkbox updates
GomezIvann Mar 18, 2025
ffa49d5
Small fix for doc title
Mar 19, 2025
818ed6c
Return statements removed
GomezIvann Mar 19, 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/checkbox/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 CheckboxPageLayout from "screens/components/checkbox/CheckboxPageLayout";
import CheckboxCodePage from "screens/components/checkbox/code/CheckboxCodePage";

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

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

export default Code;
26 changes: 11 additions & 15 deletions apps/website/pages/components/checkbox/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 CheckboxCodePage from "screens/components/checkbox/code/CheckboxCodePage";
import CheckboxOverviewPage from "screens/components/checkbox/overview/CheckboxOverviewPage";
import CheckboxPageLayout from "screens/components/checkbox/CheckboxPageLayout";

const Usage = () => {
return (
<>
<Head>
<title>Checkbox — Halstack Design System</title>
</Head>
<CheckboxCodePage></CheckboxCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Checkbox — Halstack Design System</title>
</Head>
<CheckboxOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

10 changes: 4 additions & 6 deletions apps/website/screens/components/checkbox/CheckboxPageLayout.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 CheckboxPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/checkbox" },
{ label: "Usage", path: "/components/checkbox/usage" },
{ label: "Specifications", path: "/components/checkbox/specifications" },
{ label: "Overview", path: "/components/checkbox" },
{ label: "Code", path: "/components/checkbox/code" },
];

return (
Expand All @@ -17,10 +16,9 @@ const CheckboxPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Checkbox" />
<DxcParagraph>
Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of
attributes.
Checkboxes are inputs that allow the user to select one or more options from a range of attributes.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
102 changes: 50 additions & 52 deletions apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ const sections = [
</thead>
<tbody>
<tr>
<td>defaultChecked</td>
<td>ariaLabel</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>string</TableCode>
</td>
<td>Initial state of the checkbox, only when it is uncontrolled.</td>
<td>
<TableCode>false</TableCode>
Specifies a string to be used as the name for the checkbox element when no <Code>label</Code> is provided.
</td>
<td>
<TableCode>'Checkbox'</TableCode>
</td>
</tr>
<tr>
Expand All @@ -41,20 +43,27 @@ const sections = [
If true, the component is checked. If undefined the component will be uncontrolled and the value will be
managed internally by the component.
</td>
<td>-</td>
</tr>
<tr>
<td>defaultChecked</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Initial state of the checkbox, only when it is uncontrolled.</td>
<td>
-
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>value</td>
<td>disabled</td>
<td>
<TableCode>string</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
Will be passed to the <Code>value</Code> attribute of the HTML input element. When inside a form, this
value will be only submitted if the checkbox is checked.
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
Expand All @@ -74,6 +83,17 @@ const sections = [
<TableCode>'before'</TableCode>
</td>
</tr>
<tr>
<td>margin</td>
<td>
<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>name</td>
<td>
Expand All @@ -83,14 +103,15 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>onChange</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>{"(value: boolean) => void"}</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
This function will be called when the user clicks the checkbox. The new value will be passed as a
parameter.
</td>
<td>-</td>
</tr>
<tr>
<td>optional</td>
Expand All @@ -113,25 +134,11 @@ const sections = [
</td>
</tr>
<tr>
<td>onChange</td>
<td>
<TableCode>{"(value: boolean) => void"}</TableCode>
</td>
<td>
This function will be called when the user clicks the checkbox. The new value will be passed as a
parameter.
</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>ref</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>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -157,22 +164,15 @@ const sections = [
</td>
</tr>
<tr>
<td>ref</td>
<td>
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>value</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Specifies a string to be used as the name for the checkbox element when no <Code>label</Code> is provided.
Will be passed to the <Code>value</Code> attribute of the HTML input element. When inside a form, this
value will be only submitted if the checkbox is checked.
</td>
<td>'Checkbox'</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand All @@ -193,15 +193,13 @@ const sections = [
},
];

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

export default CheckboxCodePage;
Loading