braid-design-system 30.6.0 → 30.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/components/Toggle/Toggle.tsx +95 -92
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 30.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - **Toggle:** Add ref support ([#1029](https://github.com/seek-oss/braid-design-system/pull/1029))
8
+
3
9
  ## 30.6.0
4
10
 
5
11
  ### Minor Changes
package/lib/components/Toggle/Toggle.tsx CHANGED
@@ -1,4 +1,9 @@
1
- import React, { AllHTMLAttributes, ChangeEvent, ReactNode } from 'react';
1
+ import React, {
2
+ AllHTMLAttributes,
3
+ forwardRef,
4
+ ChangeEvent,
5
+ ReactNode,
6
+ } from 'react';
2
7
  import { Box } from '../Box/Box';
3
8
  import { FieldOverlay } from '../private/FieldOverlay/FieldOverlay';
4
9
  import { Text } from '../Text/Text';
@@ -30,111 +35,109 @@ const handleChange =
30
35
  }
31
36
  };
32
37
 
33
- export const Toggle = ({
34
- id,
35
- on,
36
- onChange,
37
- label,
38
- align = 'left',
39
- size = 'standard',
40
- data,
41
- }: ToggleProps) => {
42
- const showBorder = useBackgroundLightness() === 'light';
38
+ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
39
+ (
40
+ { id, on, onChange, label, align = 'left', size = 'standard', data },
41
+ forwardedRef,
42
+ ) => {
43
+ const showBorder = useBackgroundLightness() === 'light';
43
44
 
44
- return (
45
- <Box
46
- position="relative"
47
- zIndex={0}
48
- display="flex"
49
- flexDirection={align === 'left' ? undefined : 'rowReverse'}
50
- className={styles.root}
51
- {...(data ? buildDataAttributes(data) : undefined)}
52
- >
53
- <Box
54
- component="input"
55
- type="checkbox"
56
- id={id}
57
- checked={on}
58
- onChange={handleChange(onChange)}
59
- position="absolute"
60
- zIndex={1}
61
- cursor="pointer"
62
- opacity={0}
63
- className={[
64
- styles.realField,
65
- styles.realFieldPosition[size],
66
- styles.fieldSize[size],
67
- ]}
68
- />
45
+ return (
69
46
  <Box
70
47
  position="relative"
48
+ zIndex={0}
71
49
  display="flex"
72
- alignItems="center"
73
- flexShrink={0}
74
- className={[
75
- styles.slideContainer,
76
- styles.slideContainerSize[size],
77
- styles.fieldSize[size],
78
- ]}
50
+ flexDirection={align === 'left' ? undefined : 'rowReverse'}
51
+ className={styles.root}
52
+ {...(data ? buildDataAttributes(data) : undefined)}
79
53
  >
80
54
  <Box
55
+ component="input"
56
+ type="checkbox"
57
+ id={id}
58
+ checked={on}
59
+ onChange={handleChange(onChange)}
81
60
  position="absolute"
82
- width="full"
83
- overflow="hidden"
84
- borderRadius="full"
85
- className={[styles.slideTrack[size], styles.slideTrackBackground]}
61
+ zIndex={1}
62
+ cursor="pointer"
63
+ opacity={0}
64
+ className={[
65
+ styles.realField,
66
+ styles.realFieldPosition[size],
67
+ styles.fieldSize[size],
68
+ ]}
69
+ ref={forwardedRef}
70
+ />
71
+ <Box
72
+ position="relative"
73
+ display="flex"
74
+ alignItems="center"
75
+ flexShrink={0}
76
+ className={[
77
+ styles.slideContainer,
78
+ styles.slideContainerSize[size],
79
+ styles.fieldSize[size],
80
+ ]}
86
81
  >
87
82
  <Box
88
83
  position="absolute"
89
84
  width="full"
90
- height="full"
91
- background="formAccent"
85
+ overflow="hidden"
86
+ borderRadius="full"
87
+ className={[styles.slideTrack[size], styles.slideTrackBackground]}
88
+ >
89
+ <Box
90
+ position="absolute"
91
+ width="full"
92
+ height="full"
93
+ background="formAccent"
94
+ transition="fast"
95
+ className={styles.slideTrackSelected}
96
+ />
97
+ </Box>
98
+ <Box
99
+ position="absolute"
100
+ background="input"
101
+ boxShadow={showBorder ? 'borderField' : undefined}
92
102
  transition="fast"
93
- className={styles.slideTrackSelected}
94
- />
103
+ display="flex"
104
+ alignItems="center"
105
+ justifyContent="center"
106
+ borderRadius="full"
107
+ className={styles.slider[size]}
108
+ >
109
+ <FieldOverlay className={styles.icon}>
110
+ <IconTick tone="formAccent" size="fill" />
111
+ </FieldOverlay>
112
+ <FieldOverlay
113
+ variant="focus"
114
+ borderRadius="full"
115
+ className={styles.focusOverlay}
116
+ />
117
+ <FieldOverlay
118
+ variant="hover"
119
+ borderRadius="full"
120
+ className={styles.hoverOverlay}
121
+ />
122
+ </Box>
95
123
  </Box>
96
124
  <Box
97
- position="absolute"
98
- background="input"
99
- boxShadow={showBorder ? 'borderField' : undefined}
100
- transition="fast"
101
- display="flex"
102
- alignItems="center"
103
- justifyContent="center"
104
- borderRadius="full"
105
- className={styles.slider[size]}
125
+ component="label"
126
+ htmlFor={id}
127
+ paddingLeft={align === 'left' ? 'xsmall' : undefined}
128
+ paddingRight={
129
+ align === 'right' || align === 'justify' ? 'xsmall' : undefined
130
+ }
131
+ flexGrow={align === 'justify' ? 1 : undefined}
132
+ userSelect="none"
133
+ cursor="pointer"
134
+ className={[styles.label[size], virtualTouchable()]}
106
135
  >
107
- <FieldOverlay className={styles.icon}>
108
- <IconTick tone="formAccent" size="fill" />
109
- </FieldOverlay>
110
- <FieldOverlay
111
- variant="focus"
112
- borderRadius="full"
113
- className={styles.focusOverlay}
114
- />
115
- <FieldOverlay
116
- variant="hover"
117
- borderRadius="full"
118
- className={styles.hoverOverlay}
119
- />
136
+ <Text baseline={false} weight={on ? 'strong' : undefined} size={size}>
137
+ {label}
138
+ </Text>
120
139
  </Box>
121
140
  </Box>
122
- <Box
123
- component="label"
124
- htmlFor={id}
125
- paddingLeft={align === 'left' ? 'xsmall' : undefined}
126
- paddingRight={
127
- align === 'right' || align === 'justify' ? 'xsmall' : undefined
128
- }
129
- flexGrow={align === 'justify' ? 1 : undefined}
130
- userSelect="none"
131
- cursor="pointer"
132
- className={[styles.label[size], virtualTouchable()]}
133
- >
134
- <Text baseline={false} weight={on ? 'strong' : undefined} size={size}>
135
- {label}
136
- </Text>
137
- </Box>
138
- </Box>
139
- );
140
- };
141
+ );
142
+ },
143
+ );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "30.6.0",
3
+ "version": "30.7.0",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "main": "lib/components/index.ts",
6
6
  "sideEffects": [