Merge pull request #2710 from teamleadercrm/FRAF-2192

Added labelPosition and fullWidth props to Toggle

CHANGELOG.md

@@ -4,8 +4,6 @@
 
 ### Changed
 
-- `Popover`: Aligned the popover shadows with our design spec. ([@lowiebenoot](https://https://github.com/lowiebenoot) in [#2708](https://github.com/teamleadercrm/ui/pull/2708))
-
 ### Deprecated
 
 ### Removed
@@ -14,6 +12,16 @@
 
 ### Dependency updates
 
+## [22.2.0] - 2023-07-11
+
+### Added
+
+- `Toggle`: Props `labelPosition` and `fullWidth`. ([@qubis741](https://github.com/qubis741) in [#2710](https://github.com/teamleadercrm/ui/pull/2710))
+
+### Changed
+
+- `Popover`: Aligned the popover shadows with our design spec. ([@lowiebenoot](https://https://github.com/lowiebenoot) in [#2708](https://github.com/teamleadercrm/ui/pull/2708))
+
 ## [22.1.1] - 2023-06-14
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.1.1",
+  "version": "22.2.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/toggle/Toggle.tsx

@@ -25,6 +25,8 @@ export interface ToggleProps
   label?: ReactNode;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  labelPosition?: 'left' | 'right';
+  fullWidth?: boolean;
 }
 
 const Toggle: GenericComponent<ToggleProps> = ({
@@ -38,6 +40,8 @@ const Toggle: GenericComponent<ToggleProps> = ({
   size = 'medium',
   tooltip,
   tooltipPosition,
+  labelPosition = 'right',
+  fullWidth = false,
   ...others
 }) => {
   const ref = useRef<HTMLInputElement>(null);
@@ -55,6 +59,8 @@ const Toggle: GenericComponent<ToggleProps> = ({
     {
       [theme['is-checked']]: checked,
       [theme['is-disabled']]: disabled,
+      [theme['label-on-left']]: labelPosition === 'left',
+      [theme['is-full-width']]: fullWidth,
     },
     className,
   );

src/components/toggle/theme.css

@@ -29,10 +29,11 @@
     overflow: hidden;
     opacity: 0;
     margin: 0;
+    position: absolute;
   }
 
   .label {
-    margin-left: var(--spacer-small);
+    margin: 0 0 0 var(--spacer-small);
     display: flex;
   }
 
@@ -112,6 +113,18 @@
     }
   }
 
+  &.label-on-left {
+    flex-direction: row-reverse;
+    .label {
+      margin: 0 var(--spacer-small) 0 0;
+    }
+  }
+
+  &.is-full-width {
+    justify-content: space-between;
+    width: 100%;
+  }
+
   input:focus-visible + .track {
     border-color: var(--color-neutral-darkest);
     box-shadow: 0 0 0 1px var(--color-neutral-darkest);