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