Skip to content

Radio group redesign #2201

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 11 commits into from
Apr 9, 2025
Merged

Radio group redesign #2201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2e00044
Text input redesign
GomezIvann Mar 25, 2025
203b7a8
Accessibility updates to the Autosuggest structure
GomezIvann Mar 25, 2025
174db8a
Label and HelperText updates
GomezIvann Mar 26, 2025
f7c58b3
Radio group redesign
GomezIvann Mar 27, 2025
aeeeb1e
Radio group updates
GomezIvann Mar 27, 2025
1b54191
Merge branch 'master' into gomezivann/radio-group-redesign
Mil4n0r Mar 28, 2025
abbdfd6
Updates based on feedback
GomezIvann Apr 3, 2025
1efcc1a
Merge branch 'gomezivann/radio-group-redesign' of https://github.com/…
GomezIvann Apr 3, 2025
256b09e
Radio group documentation update
GomezIvann Apr 8, 2025
3a26259
Radio group documentation updates
GomezIvann Apr 8, 2025
327bdc9
Feedback update
GomezIvann Apr 9, 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/radio-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 RadioGroupPageLayout from "screens/components/radio-group/RadioGroupPageLayout";
import RadioGroupCodePage from "screens/components/radio-group/code/RadioGroupCodePage";

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

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

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

const Index = () => {
return (
<>
<Head>
<title>Radio Group — Halstack Design System</title>
</Head>
<RadioGroupCodePage></RadioGroupCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Radio group — Halstack Design System</title>
</Head>
<RadioGroupOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

4 changes: 1 addition & 3 deletions apps/website/screens/common/pagesList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,7 @@ const getCurrentLinkIndex = (links: LinkDetails[], currentPath: string) => {
export const getNavigationLinks = (currentPath: string): NavigationLinks => {
const links = LinksSections.flatMap((section) => section.links);
const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
if (currentLinkIndex === -1) {
return {};
}
if (currentLinkIndex === -1) return {};
return {
previousLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
nextLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const sections = [
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Actions:</strong> a set of buttons at the bottom of the dialog that guide users toward completing or
canceling the intended action.
cancelling the intended action.
</DxcBulletedList.Item>
</DxcBulletedList>
<DxcParagraph>
Expand Down
11 changes: 5 additions & 6 deletions apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,19 @@ import { ReactNode } from "react";

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

return (
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Radio Group" />
<ComponentHeading name="Radio group" />
<DxcParagraph>
A radio group let the user make a mutually exclusive selection from a group of options.
A radio group allows users to select one option from a set of related, mutually exclusive choices.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
170 changes: 85 additions & 85 deletions apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>ariaLabel</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Specifies a string to be used as the name for the radio group when no `label` is provided.</td>
<td>
<TableCode>'Radio group'</TableCode>
</td>
</tr>
<tr>
<td>defaultValue</td>
<td>
Expand All @@ -33,14 +43,34 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>value</td>
<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>error</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Value of the radio group. If undefined, the component will be uncontrolled and the value will be managed
internally by the component.
If it is a defined value and also a truthy string, the component will change its appearance, showing the
error below the radio group. If the defined value is an empty string, it will reserve a space below the
component for a future error, but it would not change its look. In case of being undefined or null, both
the appearance and the space for the error message would not be modified.
</td>
<td>-</td>
</tr>
<tr>
<td>helperText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the radio group.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -63,49 +93,26 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>helperText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the radio group.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
</td>
<td>onBlur</td>
<td>
<TableCode>{"{ value: string; label: string; disabled?: boolean; }[]"}</TableCode>
<TableCode>{"(val: { value?: string; error?: string }) => void"}</TableCode>
</td>
<td>
An array of objects representing the selectable options. Each object Option has the following properties:
<ul>
<li>
<b>label</b>: Label of the option placed next to the radio input.
</li>
<li>
<b>value</b>: Value of the option. It should be unique and not an empty string, which is reserved to
the optional item added by the <Code>optional</Code> prop.
</li>
<li>
<b>disabled</b>: disables the option.
</li>
</ul>
This function will be called when the radio group loses the focus. An object including the value and the
error will be passed to this function. If there is no error, error will not be defined.
</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>onChange</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>{"(value: string) => void"}</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
This function will be called when the user chooses an option. The new value will be passed to this
function.
</td>
<td>-</td>
</tr>
<tr>
<td>optional</td>
Expand All @@ -132,59 +139,59 @@ const sections = [
</td>
</tr>
<tr>
<td>readOnly</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will not be mutable, meaning the user can not edit the control.</td>
<td>
<TableCode>false</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
</td>
</tr>
<tr>
<td>stacking</td>
<td>
<TableCode>'row' | 'column'</TableCode>
<TableCode>{"{ disabled?: boolean; label: string; value: string; }[]"}</TableCode>
</td>
<td>Sets the orientation of the options within the radio group.</td>
<td>
<TableCode>'column'</TableCode>
An array of objects representing the selectable options. Each object Option has the following properties:
<ul>
<li>
<b>label</b>: Label of the option placed next to the radio input.
</li>
<li>
<b>value</b>: Value of the option. It should be unique and not an empty string, which is reserved to
the optional item added by the <Code>optional</Code> prop.
</li>
<li>
<b>disabled</b>: disables the option.
</li>
</ul>
</td>
<td>-</td>
</tr>
<tr>
<td>onChange</td>
<td>readOnly</td>
<td>
<TableCode>{"(value: string) => void"}</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will not be mutable, meaning the user can not edit the control.</td>
<td>
This function will be called when the user chooses an option. The new value will be passed to this
function.
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>onBlur</td>
<td>
<TableCode>{"(val: { value?: string; error?: string }) => void"}</TableCode>
</td>
<td>ref</td>
<td>
This function will be called when the radio group loses the focus. An object including the value and the
error will be passed to this function. If there is no error, error will not be defined.
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>error</td>
<td>stacking</td>
<td>
<TableCode>string</TableCode>
<TableCode>'row' | 'column'</TableCode>
</td>
<td>Sets the orientation of the options within the radio group.</td>
<td>
If it is a defined value and also a truthy string, the component will change its appearance, showing the
error below the radio group. If the defined value is an empty string, it will reserve a space below the
component for a future error, but it would not change its look. In case of being undefined or null, both
the appearance and the space for the error message would not be modified.
<TableCode>'column'</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>tabIndex</td>
Expand All @@ -199,20 +206,15 @@ const sections = [
</td>
</tr>
<tr>
<td>ref</td>
<td>value</td>
<td>
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
<TableCode>string</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>
<TableCode>string</TableCode>
Value of the radio group. If undefined, the component will be uncontrolled and the value will be managed
internally by the component.
</td>
<td>Specifies a string to be used as the name for the radio group when no `label` is provided.</td>
<td>'Radio group'</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand Down Expand Up @@ -247,15 +249,13 @@ const sections = [
},
];

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

export default RadioGroupCodePage;
Loading