Skip to content

Commit

Permalink
Fix the toggle-button
Browse files Browse the repository at this point in the history 
Signed-off-by: eyeaadil <[email protected]>
  • Loading branch information
@eyeaadil
eyeaadil committed Jan 1, 2025
1 parent 22dd684 commit 4d91016
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/components/handbook-navigation/TocPagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const TocPagination = () => {
) : null}

{currentPage < content.length - 1 ? (
<Button $primary $url={content[currentPage + 1]?.link} onClick={() => console.log("button is clicked")}>
<Button $primary $url={content[currentPage + 1]?.link}>
Next &rarr;
</Button>
) : null}
Expand Down
72 changes: 52 additions & 20 deletions src/sections/Projects/Sistent/components/toggle-button/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,12 +102,12 @@ const ToggleButtonCode = () => {
<h2>ToggleButton</h2>
</a>
<p>
The `ToggleButton` and `ToggleButtonGroup` are versatile components
that can be used for a wide range of applications. Their intuitive
design ensures users can make selections easily and confidently.
Whether it's enabling a setting, selecting a mode, or choosing
multiple options, these components are built to enhance user
experience across different scenarios.
The `ToggleButton` and `ToggleButtonGroup` are versatile components
that can be used for a wide range of applications. Their intuitive
design ensures users can make selections easily and confidently.
Whether it's enabling a setting, selecting a mode, or choosing
multiple options, these components are built to enhance user
experience across different scenarios.
</p>
<div className="filterBtns">
<TabButton
Expand Down Expand Up @@ -176,7 +176,6 @@ const ToggleButtonCode = () => {
<ToggleButtonGroup
value={multiSelected}
onChange={handleMultiToggle}
orientation="vertical"
>
<ToggleButton value="bold">Toggle Button 1</ToggleButton>
<ToggleButton value="italic">Toggle Button 2</ToggleButton>
Expand All @@ -197,18 +196,46 @@ const ToggleButtonCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="medium">
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value={sizeSelected} onChange={handleSizeToggle} exclusive size="large">
<ToggleButton value="option1">Large</ToggleButton>
<ToggleButton value="option2">Large</ToggleButton>
</ToggleButtonGroup>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
alignItems: "center",
}}
>
<ToggleButtonGroup
value={sizeSelected}
onChange={handleSizeToggle}
exclusive
size="small"
style={{ width: "70%" }}
>
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
value={sizeSelected}
onChange={handleSizeToggle}
exclusive
size="medium"
>
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
value={sizeSelected}
onChange={handleSizeToggle}
exclusive
size="large"
style={{ width: "120%" }}
>
<ToggleButton style={ { width: "50%" }} value="option1">Large</ToggleButton>
<ToggleButton style={ { width: "50%" }} value="option2">Large</ToggleButton>
</ToggleButtonGroup>
</div>
</SistentThemeProvider>
</div>
<CodeBlock name="toggle-button-sizes" code={codes[2]} />
Expand All @@ -220,7 +247,12 @@ const ToggleButtonCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value={colorSelected} onChange={handleColorToggle} exclusive color="primary">
<ToggleButtonGroup
value={colorSelected}
onChange={handleColorToggle}
exclusive
color="primary"
>
<ToggleButton value="primary">Primary</ToggleButton>
<ToggleButton value="secondary">Secondary</ToggleButton>
</ToggleButtonGroup>
Expand Down
65 changes: 47 additions & 18 deletions src/sections/Projects/Sistent/components/toggle-button/guidance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ const ToggleButtonGuidance = () => {
<h2>ToggleButton</h2>
</a>
<p>
The `ToggleButton` and `ToggleButtonGroup` are versatile components
that can be used for a wide range of applications. Their intuitive
design ensures users can make selections easily and confidently.
Whether it's enabling a setting, selecting a mode, or choosing
multiple options, these components are built to enhance user
experience across different scenarios.
The `ToggleButton` and `ToggleButtonGroup` are versatile components
that can be used for a wide range of applications. Their intuitive
design ensures users can make selections easily and confidently.
Whether it's enabling a setting, selecting a mode, or choosing
multiple options, these components are built to enhance user
experience across different scenarios.
</p>
<div className="filterBtns">
<TabButton
Expand Down Expand Up @@ -116,18 +116,47 @@ const ToggleButtonGuidance = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<ToggleButtonGroup value="option1" exclusive size="small">
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value="option1" exclusive size="medium">
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup value="option1" exclusive size="large">
<ToggleButton value="option1">Large</ToggleButton>
<ToggleButton value="option2">Large</ToggleButton>
</ToggleButtonGroup>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
alignItems: "center",
}}
>
<ToggleButtonGroup
value="option1"
exclusive
size="small"
style={{ width: "70%" }}
>
<ToggleButton value="option1">Small</ToggleButton>
<ToggleButton value="option2">Small</ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
value="option1"
exclusive
size="medium"
>
<ToggleButton value="option1">Medium</ToggleButton>
<ToggleButton value="option2">Medium</ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
value="option1"
exclusive
size="large"
style={{ width: "120%" }}
>
<ToggleButton style={{ width: "50%" }} value="option1">
Large
</ToggleButton>
<ToggleButton style={{ width: "50%" }} value="option2">
Large
</ToggleButton>
</ToggleButtonGroup>
</div>
</SistentThemeProvider>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/sections/Projects/Sistent/components/toggle-button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import { Row } from "../../../../../reusecore/Layout";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const formatButtons = [
<ToggleButton key="bold" value="bold">Bold</ToggleButton>,
<ToggleButton key="italic" value="italic">Italic</ToggleButton>,
<ToggleButton key="underline" value="underline">Underline</ToggleButton>,
<ToggleButton key="bold" value="bold">ToggleButton 1</ToggleButton>,
<ToggleButton key="italic" value="italic">ToggleButton 2</ToggleButton>,
<ToggleButton key="underline" value="underline">ToggleButton 3</ToggleButton>,
];

const SistentToggleButton = () => {
Expand Down

0 comments on commit 4d91016

Please sign in to comment.