Skip to content

Toggle group redesign #2183

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 17 commits into from
Apr 4, 2025
Merged

Toggle group redesign #2183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2ce4128
Toggle Group redesign
GomezIvann Mar 7, 2025
3ceac38
Removing label and helper Text props
GomezIvann Mar 10, 2025
4891487
Accessibility updates
GomezIvann Mar 10, 2025
a4398a2
Removing older props from Toggle Group
GomezIvann Mar 10, 2025
796819c
New prop and fixes
GomezIvann Mar 10, 2025
42a8692
Aria fix
GomezIvann Mar 11, 2025
b187ed6
Toggle group orientation and code improvements
GomezIvann Mar 28, 2025
661f2ca
New tests added
GomezIvann Mar 28, 2025
a55d2ac
Adding Button styles to the toggle button
GomezIvann Mar 31, 2025
886a7f4
Merge branch 'master' into gomezivann/toggle-group
GomezIvann Mar 31, 2025
090bf7e
Toggle group updates
GomezIvann Apr 1, 2025
95e42cd
Merge branch 'master' into gomezivann/toggle-group
GomezIvann Apr 2, 2025
b0eba61
Toggle group documentation
GomezIvann Apr 2, 2025
8d5bfec
Toggle group examples and updates
GomezIvann Apr 2, 2025
7c70d92
Contextual menu image name fix
GomezIvann Apr 3, 2025
c5c3c8c
Toggle group theme generator update
GomezIvann Apr 4, 2025
10bca0c
Updates based on feedback
GomezIvann Apr 4, 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/toggle-group/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 ToggleGroupPageLayout from "screens/components/toggle-group/ToggleGroupPageLayout";
import ToggleGroupCodePage from "screens/components/toggle-group/code/ToggleGroupCodePage";

const Code = () => (
<>
<Head>
<title>Toggle group code — Halstack Design System</title>
</Head>
<ToggleGroupCodePage />
</>
);

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/toggle-group/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 ToggleGroupPageLayout from "screens/components/toggle-group/ToggleGroupPageLayout";
import ToggleGroupCodePage from "screens/components/toggle-group/code/ToggleGroupCodePage";
import ToggleGroupOverviewPage from "screens/components/toggle-group/overview/ToggleGroupOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Toggle Group — Halstack Design System</title>
</Head>
<ToggleGroupCodePage></ToggleGroupCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Toggle Group — Halstack Design System</title>
</Head>
<ToggleGroupOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

4 changes: 2 additions & 2 deletions apps/website/screens/components/container/code/examples/listbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const code = `() => {
background={{ color: "var(--border-color-neutral-brighter)" }}
border={{
color: "var(--border-color-neutral-medium)",
width: "var(--border-width-s)",
style: "var(--border-style-default)"
style: "var(--border-style-default)",
width: "var(--border-width-s)"
}}
borderRadius="var(--border-radius-s)"
boxShadow="var(--shadow-mid-x-position) var(--shadow-mid-y-position) var(--shadow-mid-blur) var(--shadow-mid-spread) var(--shadow-light)"
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/contextual-menu/overview/ContextualMenuOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Image from "@/common/Image";
import anatomy from "./images/contextual-menu_anatomy.png";
import anatomy from "./images/contextual_menu_anatomy.png";

const sections = [
{
Expand Down
0 ...erview/images/contextual-menu_anatomy.png → ...erview/images/contextual_menu_anatomy.png
View file
Open in desktop
File renamed without changes
19 changes: 7 additions & 12 deletions apps/website/screens/components/toggle-group/ToggleGroupPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,21 @@ import { ReactNode } from "react";

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

return (
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Toggle Group" />
<ComponentHeading name="Toggle group" />
<DxcParagraph>
Toggle buttons can be used to put together related options that share a common attribute modification. It
allows the user to switch from one selected option to another in the same control, having one option
selected at a time. Also, there can be another variation that allows selecting multiple options from the
current toggle group.
The toggle group component is a set of toggle buttons that function as a unified control, allowing users to
make either single or multiple selections. It is ideal for grouping related actions or options within a
compact and interactive interface.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
140 changes: 55 additions & 85 deletions apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import Code from "@/common/Code";
Expand All @@ -7,7 +7,16 @@ import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import StatusBadge from "@/common/StatusBadge";
import TableCode from "@/common/TableCode";
import TableCode, { ExtendedTableCode } from "@/common/TableCode";

const optionTypeString = `{
disabled?: boolean;
icon?: string |
(React.ReactNode
& React.SVGProps<SVGSVGElement>);
label?: string;
value: string;
}`;

const sections = [
{
Expand All @@ -32,81 +41,16 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>
<TableCode>number | number[]</TableCode>
</td>
<td>
The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it
must be one unique value. If the component allows multiple selection, value must be an array. If
undefined, the component will be uncontrolled and the value will be managed internally by the component.
</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the component.</td>
<td>-</td>
</tr>
<tr>
<td>helperText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the component.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
<TableCode>
{
"{ label?: string; icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string; title?: string; }[]"
}
</TableCode>
</td>
<td>
An array of objects representing the selectable options. Each object has the following properties:
<ul>
<li>
<b>label</b>: String with the option display value.
</li>
<li>
<b>icon</b>:{" "}
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element used as the icon of an option.
</li>
<li>
<b>value</b>: Number with the option inner value.
</li>
<li>
<b>title</b>: Text representing advisory information related to an option. Under the hood, it also
serves as an accessible label for the icon.
</li>
</ul>
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>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>multiple</td>
<td>
Expand All @@ -133,16 +77,32 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
</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>Option[]</TableCode>
<p>
being <Code>Option</Code> an object with the following properties:
</p>
<ExtendedTableCode>{optionTypeString}</ExtendedTableCode>
</td>
<td>An array of objects representing the selectable options.</td>
<td>-</td>
</tr>
<tr>
<td>orientation</td>
<td>
<TableCode>'horizontal' | 'vertical'</TableCode>
</td>
<td>The orientation of the toggle group.</td>
<td>
<TableCode>'horizontal'</TableCode>
</td>
</tr>
<tr>
<td>tabIndex</td>
<td>
Expand All @@ -155,6 +115,18 @@ const sections = [
<TableCode>0</TableCode>
</td>
</tr>
<tr>
<td>value</td>
<td>
<TableCode>number | number[]</TableCode>
</td>
<td>
The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it
must be one unique value. If the component allows multiple selection, value must be an array. If
undefined, the component will be uncontrolled and the value will be managed internally by the component.
</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
),
Expand All @@ -174,15 +146,13 @@ const sections = [
},
];

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

export default ToggleGroupCodePage;
9 changes: 4 additions & 5 deletions apps/website/screens/components/toggle-group/code/examples/controlled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,23 @@ const code = `() => {
const options = [
{
value: 1,
label: "Facebook",
label: "Web",
},
{
value: 2,
label: "X",
label: "Android",
},
{
value: 3,
label: "Linkedin",
label: "iOS",
},
];

return (
<DxcInset space="2rem">
<DxcToggleGroup
label="Choose a social network"
options={options}
onChange={onChange}
options={options}
value={value}
/>
</DxcInset>
Expand Down
Loading