Skip to content
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

Dropdown redesign #2161

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Dropdown redesign #2161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
75b7bb0
Reimplementation of the Dropdown component with new CSS variables
Feb 13, 2025
31597e9
Fixed problem with hover
Feb 13, 2025
644f814
Fixed color for background
Feb 13, 2025
27a1dab
Fixed border-radius based on latest visual updates
Feb 18, 2025
57511e4
Added documentation with the new structure
Feb 20, 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
19 changes: 19 additions & 0 deletions apps/website/pages/components/dropdown/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";

const Code = () => {
return (
<>
<Head>
<title>Dropdown Code — Halstack Design System</title>
</Head>
<DropdownCodePage />
</>
);
};

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

export default Code;
8 changes: 3 additions & 5 deletions apps/website/pages/components/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";
import DropdownOverviewPage from "screens/components/dropdown/overview/DropdownOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Dropdown — Halstack Design System</title>
</Head>
<DropdownCodePage></DropdownCodePage>
<DropdownOverviewPage />
</>
);
};

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

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

This file was deleted.

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

This file was deleted.

13 changes: 5 additions & 8 deletions apps/website/screens/components/dropdown/DropdownPageLayout.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 DropdownPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/dropdown" },
{ label: "Usage", path: "/components/dropdown/usage" },
{ label: "Specifications", path: "/components/dropdown/specifications" },
{ label: "Overview", path: "/components/dropdown" },
{ label: "Code", path: "/components/dropdown/code" },
];

return (
Expand All @@ -17,12 +16,10 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Dropdown" />
<DxcParagraph>
The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard
widget, so the users know how to interact with them. The options available in a dropdown component are
static, preventing erroneous data entered by the user since it only shows a range of correct values for that
input.
The dropdown component is a compact, interactive element that allows users to select from a list of options,
reducing clutter in the interface.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
128 changes: 64 additions & 64 deletions apps/website/screens/components/dropdown/code/DropdownCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,49 +25,33 @@ const sections = [
</thead>
<tbody>
<tr>
<td>caretHidden</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
<TableCode>boolean</TableCode>
</td>
<td>Whether the arrow next to the label must be displayed or not.</td>
<td>
<TableCode>
{
"{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
}
</TableCode>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>disabled</td>
<td>
An array of objects representing the options. Each object has the following properties:
<ul>
<li>
<b>label</b>: Option display value.
</li>
<li>
<b>icon</b>:{" "}
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed next to the option label. When using Material
Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
prefix the symbol name with <TableCode>"filled_"</TableCode>.
</li>
<li>
<b>value</b>: Option inner value.
</li>
</ul>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>optionsIconPosition</td>
<td>expandOnHover</td>
<td>
<TableCode>'before' | 'after'</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>In case options include icons, whether the icon should appear after or before the label.</td>
<td>If true, the options are shown when the dropdown is hovered.</td>
<td>
<TableCode>'before'</TableCode>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -96,42 +80,25 @@ const sections = [
</td>
</tr>
<tr>
<td>label</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed within the dropdown.</td>
<td>-</td>
</tr>
<tr>
<td>caretHidden</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>Whether the arrow next to the label must be displayed or not.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>disabled</td>
<td>margin</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
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>expandOnHover</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the options are shown when the dropdown is hovered.</td>
<td>label</td>
<td>
<TableCode>false</TableCode>
<TableCode>string</TableCode>
</td>
<td>Text to be placed within the dropdown.</td>
<td>-</td>
</tr>
<tr>
<td>
Expand All @@ -150,18 +117,51 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
options
</DxcFlex>
</td>
<td>
<TableCode>
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
{
"{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
}
</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.
An array of objects representing the options. Each object has the following properties:
<ul>
<li>
<b>label</b>: Option display value.
</li>
<li>
<b>icon</b>:{" "}
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed next to the option label. When using Material
Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
prefix the symbol name with <TableCode>"filled_"</TableCode>.
</li>
<li>
<b>value</b>: Option inner value.
</li>
</ul>
</td>
<td>-</td>
</tr>
<tr>
<td>optionsIconPosition</td>
<td>
<TableCode>'before' | 'after'</TableCode>
</td>
<td>In case options include icons, whether the icon should appear after or before the label.</td>
<td>
<TableCode>'before'</TableCode>
</td>
</tr>
<tr>
<td>size</td>
<td>
Expand Down
Loading