From facb5e917fe4bd88729c3a0294d8f257311b853f Mon Sep 17 00:00:00 2001 From: Leandro Vieira Date: Wed, 23 Aug 2023 01:12:47 -0300 Subject: [PATCH 1/3] Checkbox component, adjustments in Input/dropdown --- src/Checkbox/Checkbox.stories.tsx | 16 +++++++ src/Checkbox/index.tsx | 14 +++++++ src/Checkbox/style/Checkbox.module.scss | 55 +++++++++++++++++++++++++ src/Checkbox/types/index.ts | 5 +++ src/Input/style/Input.module.scss | 5 ++- 5 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 src/Checkbox/Checkbox.stories.tsx create mode 100644 src/Checkbox/index.tsx create mode 100644 src/Checkbox/style/Checkbox.module.scss create mode 100644 src/Checkbox/types/index.ts diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx new file mode 100644 index 0000000..65033b2 --- /dev/null +++ b/src/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { iconsArray } from "../Icon/types"; +import CheckboxComponent from "."; +import { CheckboxProps } from "./types"; + +export default { + title: "User Interface/Checkbox", + component: CheckboxComponent, +} as ComponentMeta; + +const Template: ComponentStory = (args: CheckboxProps) => ; + +export const Checkbox = Template.bind({}); +Checkbox.args = { + label: "Text", +}; diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx new file mode 100644 index 0000000..953c13f --- /dev/null +++ b/src/Checkbox/index.tsx @@ -0,0 +1,14 @@ +import classes from "../utils/classes"; +import { CheckboxProps } from "./types"; +import style from "./style/Checkbox.module.scss"; + +export default function Checkbox({ label, className, ...props }: CheckboxProps) { + const containerClasses = classes([style.container, className]); + + return ( + + ); +} diff --git a/src/Checkbox/style/Checkbox.module.scss b/src/Checkbox/style/Checkbox.module.scss new file mode 100644 index 0000000..8dba267 --- /dev/null +++ b/src/Checkbox/style/Checkbox.module.scss @@ -0,0 +1,55 @@ +.container { + display: inline-block; + display: flex; + gap: var(--m-xs); + align-items: center; + + &:has(input:not(:disabled)) { + cursor: pointer; + } + + input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + background-color: transparent; + margin: 0; + color: var(--color-primary); + width: var(--m); + height: var(--m); + border: 2px solid var(--color-border); + display: grid; + place-content: center; + border-radius: var(--border-radius-1); + cursor: pointer; + + &::before { + content: ""; + width: var(--m-xs); + height: var(--m-xs); + } + + &:checked { + background-color: var(--color-primary); + border-color: var(--color-primary); + } + + &:checked::before { + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + box-shadow: inset 1em 1em var(--color-input-background); + } + + &:not(:disabled) { + &:focus { + outline: 1px solid var(--color-border); + outline-offset: 3px; + } + } + + &:disabled { + --container-color: var(--container-disabled); + color: var(--container-disabled); + cursor: default; + background-color: var(--color-input-disabled); + } + } +} diff --git a/src/Checkbox/types/index.ts b/src/Checkbox/types/index.ts new file mode 100644 index 0000000..cf56f2c --- /dev/null +++ b/src/Checkbox/types/index.ts @@ -0,0 +1,5 @@ +import { InputHTMLAttributes, ReactElement } from "react"; + +export type CheckboxProps = InputHTMLAttributes & { + label?: string | ReactElement; +}; diff --git a/src/Input/style/Input.module.scss b/src/Input/style/Input.module.scss index e4d7c3b..02c4104 100644 --- a/src/Input/style/Input.module.scss +++ b/src/Input/style/Input.module.scss @@ -30,7 +30,7 @@ .inputWrapper { background-color: var(--color-input-background); border-radius: var(--border-radius-2); - outline: 2px solid transparent; + outline: 1px solid transparent; padding: calc(var(--m-xxs) / 2); border: 1px solid var(--color-border); font-weight: 400; @@ -172,12 +172,13 @@ background-color: var(--color-input-background); border-radius: var(--border-radius-2); padding: var(--m-xxxxs); - outline: 2px solid var(--color-text); + outline: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--m-xxxxs); max-height: calc(100vh - 8px); overflow-y: auto; + margin-top: var(--m-xxxxs); } .option { From 394cd75e2a72c496fbcf7df09400aa6cf81bacfb Mon Sep 17 00:00:00 2001 From: Leandro Vieira Date: Wed, 23 Aug 2023 04:53:40 -0300 Subject: [PATCH 2/3] Add missing Checkbox to exports --- src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index b7e1bd3..e5139b0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,6 +27,7 @@ import "./style/index.scss"; import Badge from "./Badge"; import Box from "./Box"; import Button from "./Button"; +import Checkbox from "./Checkbox"; import Dialog from "./Dialog"; import Errors from "./Errors"; import Icon from "./Icon"; @@ -48,6 +49,7 @@ export { Badge, Box, Button, + Checkbox, Dialog, Errors, Frame, @@ -65,7 +67,7 @@ export { Tabs, TagEditor, ThemeToggle, - Tooltip + Tooltip, }; export { From 382909dd54dd2f57e43e234fda31138d4cc5a4f4 Mon Sep 17 00:00:00 2001 From: ciminelli Date: Mon, 28 Aug 2023 13:45:21 -0700 Subject: [PATCH 3/3] Removed checkbox focus --- src/Checkbox/style/Checkbox.module.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Checkbox/style/Checkbox.module.scss b/src/Checkbox/style/Checkbox.module.scss index 8dba267..2801736 100644 --- a/src/Checkbox/style/Checkbox.module.scss +++ b/src/Checkbox/style/Checkbox.module.scss @@ -38,12 +38,12 @@ box-shadow: inset 1em 1em var(--color-input-background); } - &:not(:disabled) { - &:focus { - outline: 1px solid var(--color-border); - outline-offset: 3px; - } - } + //&:not(:disabled) { + // &:focus { + // outline: 1px solid var(--color-border); + // outline-offset: 3px; + // } + //} &:disabled { --container-color: var(--container-disabled);