LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): fix Switch toggle shrinking in narrow spaces

This commit is contained in:
Michał Leszczyk 2022-03-15 15:54:34 +01:00
parent 387e08f69b
commit 4a5be18dae
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dashboard-v2/src/components/Switch/Switch.js
View File

@ -21,7 +21,7 @@ const Label = styled.label.attrs({
`;
const Toggle = styled.span.attrs({
className: `flex flex-row items-center justify-between
className: `flex flex-row items-center justify-between shrink-0
w-[44px] h-[22px] bg-white rounded-full
border border-palette-200 relative cursor-pointer`,
})`
@ -45,7 +45,7 @@ const TogglePin = styled.span.attrs(({ $checked }) => ({
}
`;
export const Switch = ({ children, defaultChecked, onChange, ...props }) => {
export const Switch = ({ children, defaultChecked, labelClassName, onChange, ...props }) => {
const id = useMemo(nanoid, [onChange]);
const [checked, setChecked] = useState(defaultChecked);
@ -56,7 +56,7 @@ export const Switch = ({ children, defaultChecked, onChange, ...props }) => {
return (
<Container {...props}>
<Checkbox checked={checked} onChange={(ev) => setChecked(ev.target.checked)} id={id} />
<Label htmlFor={id}>
<Label htmlFor={id} className={labelClassName}>
<Toggle>
<TogglePin $checked={checked} />
</Toggle>
@ -75,6 +75,10 @@ Switch.propTypes = {
* Element to be rendered as the switch label
*/
children: PropTypes.element,
/**
* Pass additional CSS classes to the `label` element.
*/
labelClassName: PropTypes.string,
/**
* Function to execute on change
*/
@ -83,4 +87,5 @@ Switch.propTypes = {
Switch.defaultProps = {
defaultChecked: false,
labelClassName: "",
};