Skip to content

Commit

Permalink
add component size
Browse files Browse the repository at this point in the history
  • Loading branch information
@nganphan123
nganphan123 committed Dec 27, 2024
1 parent d592833 commit 02f6e29
Showing 1 changed file with 67 additions and 43 deletions.
110 changes: 67 additions & 43 deletions src/sections/Projects/Sistent/components/select/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import { SistentThemeProvider, Button } from "@layer5/sistent";
import { SistentThemeProvider } from "@layer5/sistent";
import TabButton from "../../../../../reusecore/Button";
import { SistentLayout } from "../../sistent-layout";
import { Col, Row } from "../../../../../reusecore/Layout";
import { Row } from "../../../../../reusecore/Layout";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import {
Container,
Expand Down Expand Up @@ -196,25 +196,19 @@ const SistentSelect = () => {
<h2>Sizes</h2>
</a>
<p>
For buttons to be fully effective, they can be adjusted in size to
accommodate multiple use cases where they may apply. These size
changes are usually done to the height of the buttons and not the
width since buttons usually grow to contain their content. The
height that makes up the different sizes of our buttons are gotten
from our spacing system to retain space consistency. We have chosen
two different sizes of buttons to provide options and more sizes can
be added to fill the growing needs.
</p>
<h3>56px / 3.5rem</h3>
<p>
The 56px button is the first button size. It is currently the
largest button available for use and it is available for both mobile
and desktop resolutions, but it serves in different capacities
across these different resolutions.
The select component can be adjusted in size to accommodate various
use cases. These size adjustments typically affect the height of the
component, while the width adjusts to fit the content. The height of
the select component is derived from our spacing system to maintain
consistency. We offer multiple sizes to meet different needs.
</p>
<h3>Auto width</h3>
{/* <p>
The width of the component can scale
</p> */}
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl fullWidth>
<FormControl sx={{ minWidth: "120px", m: 1 }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label-standard"
Expand All @@ -229,32 +223,54 @@ const SistentSelect = () => {
</FormControl>
</SistentThemeProvider>
</Row>
<h3>48px / 3rem</h3>
<p>
<h3>Small</h3>
{/* <p>
The 48px button is the second button size currently in use and it is
available from mobile to desktop resolutions, even though it serves
in different capacities across these screen sizes.
</p>
</p> */}
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Button variant="contained" label="48px / 3rem" size="medium" />
<FormControl sx={{ minWidth: "80px", m: 1 }} size="small">
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label-standard"
id="demo-select-standard"
label="Age"
variant="standard"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<h3>Full width</h3>
<p>
{/* <p>
Full width buttons are more efficient in mobile designs and rightly
so in order to offer users with a wider touch area since the input
devices - the fingers, are a lot larger than the cursor on a desktop
or larger screen.
</p>
</p> */}
<Row $Hcenter className="image-container">
<Col sm={12}>
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Button variant="contained" label="Full width" fullWidth />
</SistentThemeProvider>
</Col>
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl fullWidth sx={{ m: 1 }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label-standard"
id="demo-select-standard"
label="Age"
variant="standard"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<p>
{/* <p>
<strong>NOTE:</strong>
</p>
<p>
Expand All @@ -265,20 +281,28 @@ const SistentSelect = () => {
48px is the default size. Preferred button sizes (height) are
usually arrived at through exploration and proper consideration of
industry standards and best practices.
</p>
<a id="Adding Icons">
<h2>Adding Icons</h2>
</p> */}
<a id="Multiple select">
<h2>Multiple select</h2>
</a>
<p>
Sometimes, icons are used alongside labels in buttons to pass across
specific information or relay added information for a higher level
of understanding and better comprehension. Depending on the
information being conveyed, the icons can be placed on the left side
of the label text or on the right side of the label text. No
specific rules apply apart from spacing tips which may be considered
here. For full width buttons, if icons must be added, they should be
centered in the button alongside the label text.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl fullWidth sx={{ m: 1 }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label-standard"
id="demo-select-standard"
label="Age"
variant="standard"
multiple
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
</div>
</div>
</SistentLayout>
Expand Down

0 comments on commit 02f6e29

Please sign in to comment.