Skip to content
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

#167 Allow classnames for switch #171

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

#167 Allow classnames for switch #171

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ee994e
#167 Allow switches to have classnames
rushi Aug 21, 2022
5f2cb98
Merge branch 'master' into customize-switch
rushi Oct 30, 2023
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
13 changes: 8 additions & 5 deletions src/components/Forms/Switch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,27 @@ const sizes = {
},
};

// TODO: Native checkbox input `checked` and `disabled` properties are not prefixed with `is`.
// Decide on the naming convention.
export const Switch = ({ isChecked = false, size = "medium", ...rest }) => {
export const Switch = ({ isChecked = false, size = "medium", classNames = { parent: "", inner: "" }, ...rest }) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parent and inner match what we 8 lines about in sizes

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about container and input (or switch)? That is what we used for some other components

return (
<HeadlessSwitch
checked={isChecked}
className={clsx(
"ui-switch",
isChecked ? "bg-primary disabled:bg-gray-light" : "bg-gray disabled:bg-gray-light",
"relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
"relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent",
Comment on lines -33 to +31
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split into two lines

"transition-colors duration-200 ease-in-out focus:outline-none",
sizes[size].parent,
classNames.parent,
)}
{...rest}
>
<span
className={clsx(
"ui-switch-inner pointer-events-none inline-block transform rounded-full bg-white shadow ring-0",
isChecked ? sizes[size].translate : "translate-x-0",
"ui-switch-inner pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved above

"transition duration-200 ease-in-out",
sizes[size].inner,
classNames.inner,
)}
/>
</HeadlessSwitch>
Expand All @@ -49,6 +51,7 @@ export const Switch = ({ isChecked = false, size = "medium", ...rest }) => {
Switch.propTypes = {
isChecked: PropTypes.bool,
size: PropTypes.string,
classNames: PropTypes.shape({ switch: PropTypes.string, content: PropTypes.string }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does not match the props

};

Switch.Group = ({ className, children }) => {
Expand Down
Loading