Skip to content

File Input redesign #2156

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 34 commits into from
Apr 25, 2025
Merged

File Input redesign #2156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
34d8612
File input tokens applied
Jialecl Feb 3, 2025
57ff8ab
Size tokens added to icons
Jialecl Feb 4, 2025
8a16335
theemProvider removed
Jialecl Feb 4, 2025
c5867c0
Added import changes to fix storybook styles
Jialecl Feb 7, 2025
c494256
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Feb 18, 2025
c71f0ac
Spacing token added
Jialecl Feb 20, 2025
1e524f1
Documentation structure preparation
Jialecl Feb 20, 2025
20fd131
Error message location changed to under each file
Jialecl Feb 24, 2025
1dad97f
Merge branch 'master' into jialecl-fileInput-tokens
Mil4n0r Feb 27, 2025
070360b
Updated FileItem structure to match accessibility requirements
Feb 27, 2025
874fe17
missing tokens and small changes based on feedback
Jialecl Mar 17, 2025
d114dc2
added some small changes to tokens and removed specs
Jialecl Mar 20, 2025
5274d57
file item correctly centered
Jialecl Mar 25, 2025
d46da9d
changing token to padding instead of gap
Jialecl Mar 31, 2025
6c06ce0
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Apr 22, 2025
e09b490
Overview documentation added
Jialecl Apr 23, 2025
c10a9af
removed duplicate sentence
Jialecl Apr 23, 2025
d990abb
adding tooltip to long error and visual test
Jialecl Apr 23, 2025
3d51243
fiing chromatic error
Jialecl Apr 24, 2025
1764f72
Another try to fix the chromatic error
Jialecl Apr 24, 2025
27ac798
adding a second hover
Jialecl Apr 24, 2025
0871591
separating ellipsis test
Jialecl Apr 24, 2025
7df2787
Merge branch 'master' into jialecl-fileInput-tokens
Mil4n0r Apr 24, 2025
15579cf
first getBytext removed
Jialecl Apr 24, 2025
9727676
Merge branch 'jialecl-fileInput-tokens' of https://github.com/dxc-tec…
Jialecl Apr 24, 2025
ee27602
Removed storybook action u\nneeded line
Apr 24, 2025
7897208
Merge branch 'jialecl-fileInput-tokens' of github.com:dxc-technology/…
Apr 24, 2025
4bea781
removed halstackContext and added Label and HelperText
Jialecl Apr 24, 2025
2fdff76
Merge branch 'jialecl-fileInput-tokens' of https://github.com/dxc-tec…
Jialecl Apr 24, 2025
41d1398
changing to regular epression
Jialecl Apr 24, 2025
addc54d
changed to screen
Jialecl Apr 24, 2025
559ab65
reverted back to canvas
Jialecl Apr 24, 2025
f776fc1
changing to function
Jialecl Apr 24, 2025
9280c10
Problematic test commented for now
Jialecl Apr 25, 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/file-input/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 FileInputCodePage from "screens/components/file-input/code/FileInputCodePage";
import FileInputPageLayout from "screens/components/file-input/FileInputPageLayout";

const Code = () => {
return (
<>
<Head>
<title>File Input Code — Halstack Design System</title>
</Head>
<FileInputCodePage />
</>
);
};

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

export default Code;
12 changes: 5 additions & 7 deletions apps/website/pages/components/file-input/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 FileInputCodePage from "screens/components/file-input/code/FileInputCodePage";
import FileInputPageLayout from "screens/components/file-input/FileInputPageLayout";
import FileInputOverviewPage from "screens/components/file-input/overview/FileInputOverviewPage";

const Usage = () => {
const Index = () => {
return (
<>
<Head>
<title>File Input — Halstack Design System</title>
</Head>
<FileInputCodePage></FileInputCodePage>
<FileInputOverviewPage />
</>
);
};

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

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

This file was deleted.

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

This file was deleted.

15 changes: 5 additions & 10 deletions apps/website/screens/components/file-input/FileInputPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@ import { ReactNode } from "react";

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

return (
Expand All @@ -20,11 +16,10 @@ const FileInputPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="File Input" />
<DxcParagraph>
The file input component is used to choose files from any location in the local machine and update those
files to the server where the application is hosted. It is a common procedure in applications where files
are required, like documents, images, or other information in digital formats.
File inputs are used to allow users to upload one or more files from their local device to an application in
a structured and accessible way.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
Loading