Skip to content

Commit de5108e

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
removed redundant lines of code
Signed-off-by: Aryan Shah <[email protected]>
1 parent c8f9197 commit de5108e

File tree

3 files changed

+92
-224
lines changed

3 files changed

+92
-224
lines changed

‎src/sections/Projects/Sistent/components/text-input/code.js

Lines changed: 31 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,11 @@ import TabButton from "../../../../../reusecore/Button";
1010
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1111

1212
const codes = [
13-
"<Input placeholder=\"Placeholder goes here\" type=\"text\" />",
13+
"<Input placeholder=\"Enter your name\" />",
1414
`<Input
15-
placeholder="Placeholder goes here"
16-
type="text"
17-
size="medium"
15+
placeholder="Share your thoughts..."
16+
multiline
1817
/>`,
19-
`<Input
20-
placeholder="Placeholder goes here"
21-
type="text"
22-
size="small"
23-
/>`
2418
];
2519

2620
const TextInputCode = () => {
@@ -34,11 +28,8 @@ const TextInputCode = () => {
3428
<h2>Text Input</h2>
3529
</a>
3630
<p>
37-
Text inputs are important elements that help users interact with an
38-
experience by providing text commands that will in turn return
39-
expected results. These commands can range from providing a free range
40-
of personal information to entering a limited number of characters for
41-
a use case.
31+
The <code>Input</code> component enables users to enter text data in forms and interfaces.
32+
It provides a clean, accessible way to collect user information with support for different input types and multiline text.
4233
</p>
4334
<div className="filterBtns">
4435
<TabButton
@@ -76,112 +67,48 @@ const TextInputCode = () => {
7667
/>
7768
</div>
7869
<div className="main-content">
79-
<a id="Design">
80-
<h2>Design</h2>
81-
</a>
8270
<p>
83-
Instead of various types for use across designs, the text input has
84-
just one type to ensure simplicity and efficiency. It is preferable
85-
that inputs are as minimal as possible since the sole function that
86-
they generally perform is to ensure that users are able to send in
87-
data and receive corresponding information.
71+
The Input component provides flexible text input capabilities with minimal configuration.
72+
It integrates with Sistent's theming system while maintaining native HTML input behavior
73+
for optimal performance and accessibility.
8874
</p>
89-
<div className="showcase">
90-
<div className="tf-items">
91-
<Row $Hcenter>
92-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
93-
<div style={{ margin: "20px 0" }}>
94-
<Input placeholder="Placeholder goes here" type="text" />
95-
</div>
96-
</SistentThemeProvider>
97-
</Row>
98-
</div>
99-
<CodeBlock name="basic-input" code={codes[0]} />
100-
</div>
101-
<a id="Sizes">
102-
<h2>Sizes</h2>
75+
76+
<a id="Basic Input">
77+
<h2>Basic Input</h2>
10378
</a>
10479
<p>
105-
Since input fields have a responsive width that adjusts depending on
106-
the need and use case, size considerations are mostly directed at
107-
the height of the field. This means that the size of text inputs
108-
adjust only relative to the height of the text field. Because text
109-
inputs are mostly used in tandem with buttons, to ensure design
110-
consistency, text inputs and buttons have similar size requirements.
111-
</p>
112-
<h3>56px / 3.5rem</h3>
113-
<p>
114-
The 56px text input is the first field size. It is the largest text
115-
input available for use and it is available for both mobile and
116-
desktop resolutions, but it serves in different capacities across
117-
these different resolutions.
80+
A simple input field for collecting single-line text data. This is the most common form of text input.
11881
</p>
11982
<div className="showcase">
120-
<div className="tf-items">
121-
<Row $Hcenter>
122-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
123-
<div style={{ margin: "20px 0" }}>
124-
<Input
125-
placeholder="Placeholder goes here"
126-
type="text"
127-
size="medium"
128-
/>
129-
</div>
130-
</SistentThemeProvider>
131-
</Row>
83+
<div className="items">
84+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
85+
<Input placeholder="Enter your name" />
86+
</SistentThemeProvider>
13287
</div>
133-
<CodeBlock name="medium-input" code={codes[1]} />
88+
<CodeBlock name="basic-input" code={codes[0]} />
13489
</div>
135-
<h3>48px / 3rem</h3>
90+
91+
<a id="Multiline Input">
92+
<h2>Multiline Input</h2>
93+
</a>
13694
<p>
137-
The 48px text input is the second field size in use and it is
138-
available from mobile to desktop resolutions, even though it serves
139-
in different capacities across these screen sizes.
95+
For longer text content that may span multiple lines. The input automatically expands vertically as users type.
14096
</p>
14197
<div className="showcase">
142-
<div className="tf-items">
143-
<Row $Hcenter>
144-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
145-
<div style={{ margin: "20px 0" }}>
146-
<Input
147-
placeholder="Placeholder goes here"
148-
type="text"
149-
size="small"
150-
/>
151-
</div>
152-
</SistentThemeProvider>
153-
</Row>
98+
<div className="items">
99+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
100+
<Input
101+
placeholder="Share your thoughts..."
102+
multiline
103+
/>
104+
</SistentThemeProvider>
154105
</div>
155-
<CodeBlock name="small-input" code={codes[2]} />
106+
<CodeBlock name="multiline-input" code={codes[1]} />
156107
</div>
157-
<p>
158-
<strong>NOTE:</strong>
159-
</p>
160-
<p>
161-
These sizes are being specified with numerical values because though
162-
the same size is used across screen resolutions, they have different
163-
roles. On desktop for instance, the 56px text input is a the default
164-
size, and 48px the small size, while on mobile, 56px is large and
165-
48px is the default size. Preferred text input sizes (height) are
166-
usually arrived at through exploration and proper consideration of
167-
industry standards and best practices.
168-
</p>
169-
<a id="Adding Icons">
170-
<h2>Adding Icons</h2>
171-
</a>
172-
<p>
173-
Icons can be used often in text inputs to aid in understanding the
174-
required parameters for a given field or to provide options that can
175-
help to improve the experience as a user navigates a given set of
176-
text inputs. Depending on the context, icons can be placed on the
177-
left and right at different times or even at the same time. The
178-
icons should be aligned to the left or right side of the input field
179-
and not to the center, while text remains left aligned.
180-
</p>
181108
</div>
182109
</div>
183110
</SistentLayout>
184111
);
185112
};
186113

187-
export default TextInputCode;
114+
export default TextInputCode;

‎src/sections/Projects/Sistent/components/text-input/guidance.js

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
88

99
import TabButton from "../../../../../reusecore/Button";
1010
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
1112
const TextInputGuidance = () => {
1213
const location = useLocation();
1314
const { isDark } = useStyledDarkMode();
@@ -19,11 +20,8 @@ const TextInputGuidance = () => {
1920
<h2>Text Input</h2>
2021
</a>
2122
<p>
22-
Text inputs are important elements that help users interact with an
23-
experience by providing text commands that will in turn return
24-
expected results. These commands can range from providing a free range
25-
of personal information to entering a limited number of characters for
26-
a use case.
23+
The Input component is a fundamental form element that enables efficient text data collection.
24+
It adapts to different content types and user contexts while maintaining accessibility and usability standards.
2725
</p>
2826
<div className="filterBtns">
2927
<TabButton
@@ -62,69 +60,68 @@ const TextInputGuidance = () => {
6260
</div>
6361
<div className="main-content">
6462
<p>
65-
Although we have only one type of text input to be used, there are
66-
different roles that they can function in that ensure that these
67-
inputs prove sufficient for multiple use cases.
63+
Input components are essential elements in user interfaces, enabling users to enter and edit text data.
64+
Their design and implementation are crucial for creating effective forms and data collection experiences.
6865
</p>
66+
6967
<a id="Function">
7068
<h2>Function</h2>
7169
</a>
72-
<p></p>
73-
<h3>Default</h3>
70+
<p>Input components serve various functions in user interfaces:</p>
71+
72+
<h3>Single-line Text Input</h3>
7473
<p>
75-
Default text inputs are used for most of the input needs across an
76-
interface. From filling up forms to entering text content in
77-
provided form fields to complete an action or a task. this text
78-
input is mostly utilized. Icons are not seldom required in this text
79-
input, however, they can included when extremely necessary.
74+
These inputs collect brief text data such as names, emails, or search queries.
75+
They should be appropriately sized and provide clear visual feedback to users.
8076
</p>
81-
<Row $Hcenter>
77+
<Row $Hcenter className="image-container">
8278
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
83-
<Input placeholder="PlaceHolder" />
79+
<Input placeholder="Enter your email" type="email" />
8480
</SistentThemeProvider>
8581
</Row>
86-
<h3>Multiline</h3>
82+
83+
<h3>Multi-line Text Input</h3>
8784
<p>
88-
Multiline text input functions for input that requires more than one
89-
line of text. This text input adjusts vertically based on the amount
90-
of lines of text entered into the text field.
85+
Multi-line inputs accommodate longer text content like comments, descriptions, or messages.
86+
They automatically expand to fit content and provide users with adequate space for expression.
9187
</p>
92-
<Row $Hcenter>
88+
<Row $Hcenter className="image-container">
9389
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
94-
<Input placeholder="Placeholder" multiline />
90+
<Input
91+
placeholder="Share your feedback..."
92+
multiline
93+
/>
9594
</SistentThemeProvider>
9695
</Row>
97-
<a id="Labelling">
98-
<h2>Labelling</h2>
96+
<a id="Placeholder Guidelines">
97+
<h2>Placeholder Guidelines</h2>
9998
</a>
10099
<p>
101-
A couple of elements come together to support the input field
102-
depending on the context in is being used. These elements either
103-
provide added information or provide much needed support to ensure
104-
users are able to complete intended tasks.
100+
Placeholder text is crucial for guiding users and setting expectations.
101+
Effective placeholders improve usability and reduce form completion errors.
105102
</p>
106-
<h3>Label</h3>
103+
104+
<h3>Descriptive Text</h3>
107105
<p>
108-
The label is an optional feature that can accompany the text input.
109-
It an be used to point out what is required in the input field.
106+
Use clear, descriptive placeholder text that indicates the expected input format or provides helpful examples.
107+
Avoid generic placeholders that don't add value to the user experience.
110108
</p>
111-
<h3>Required</h3>
109+
110+
<h3>Concise Language</h3>
112111
<p>
113-
This type of label that is usually applied in forms to inform users
114-
of a compulsary information that is to be provided in order to
115-
complete the form. It is represented by an asterisk mark (*) that
116-
appears after the label text.
112+
Keep placeholder text brief and to the point. Long placeholders can be truncated on smaller screens
113+
and may overwhelm the input field visually.
117114
</p>
118-
<h3>Helper text</h3>
115+
116+
<h3>Accessibility Considerations</h3>
119117
<p>
120-
Helper text appears at the bottom of the input field and it is
121-
primarily to serve as an alert for the user to inform them based on
122-
the input they have entered but only where necessary.
118+
Ensure placeholder text has sufficient contrast and doesn't rely solely on color to convey information.
119+
Placeholders should complement, not replace, proper form labels for screen reader accessibility.
123120
</p>
124121
</div>
125122
</div>
126123
</SistentLayout>
127124
);
128125
};
129126

130-
export default TextInputGuidance;
127+
export default TextInputGuidance;

0 commit comments

Comments
 (0)