Skip to content

Commit 95fb106

Browse files
committed
feat(components): add pseudo props for an existing component binding
1 parent 8ee5590 commit 95fb106

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+976
-16016
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,3 +166,4 @@ temp/
166166
.pnp.*
167167

168168
.vercel
169+
src/**/*.js

examples/app.js

Lines changed: 111 additions & 18 deletions
Large diffs are not rendered by default.

examples/app.res

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ module Borders = {
7777
}
7878
/**
7979
Background
80-
@see <>
80+
@see <https://chakra-ui.com/docs/features/style-props#background>
8181
**/
8282
module Background = {
8383
open Chakra
@@ -93,7 +93,30 @@ module Background = {
9393
<Box bgImage=#url("/images/kyuubi.png") bgPosition=#center bgRepeat=#noRepeat />
9494
</>
9595
}
96-
96+
@ocaml.docs(`Pseudo
97+
@see <https://chakra-ui.com/docs/features/style-props#pseudo>
98+
`)
99+
module Pseudo = {
100+
open Chakra
101+
@react.component
102+
let make = () => <>
103+
// :hover style
104+
<Button colorScheme=#teal _hover={pseudo(~background=#white, ~color=#teal500, ())}>
105+
{"Hover me"->React.string}
106+
</Button>
107+
// apply :hover over parent element
108+
// TODO props {role}
109+
// <Box
110+
// role="group"
111+
// >
112+
// <Box
113+
// _hover={{ fontWeight: 'semibold' }}
114+
// _groupHover={{ color: 'tomato' }}
115+
// >
116+
// </Box>
117+
// </Box>
118+
</>
119+
}
97120
module App = {
98121
open Chakra
99122
@react.component

src/Chakra.js

Lines changed: 0 additions & 64 deletions
This file was deleted.

src/Components/Chakra__AspectRatio.js

Lines changed: 0 additions & 795 deletions
This file was deleted.

src/Components/Chakra__AspectRatio.res

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ external make: (
190190
TODO
191191
Pseudo
192192
@see <https://chakra-ui.com/docs/features/style-props#pseudo>
193+
193194
_hover
194195
_active
195196
_focus
@@ -231,6 +232,47 @@ external make: (
231232
_fullScreen
232233
_selection
233234
**/
235+
@as("_hover") ~_hover: Pseudo.t=?,
236+
@as("_active") ~_active: Pseudo.t=?,
237+
@as("_focus") ~_focus: Pseudo.t=?,
238+
@as("_highlighted") ~_highlighted: Pseudo.t=?,
239+
@as("_focusWithin") ~_focusWithin: Pseudo.t=?,
240+
@as("_focusVisible") ~_focusVisible: Pseudo.t=?,
241+
@as("_disabled") ~_disabled: Pseudo.t=?,
242+
@as("_readOnly") ~_readOnly: Pseudo.t=?,
243+
@as("_before") ~_before: Pseudo.t=?,
244+
@as("_after") ~_after: Pseudo.t=?,
245+
@as("_empty") ~_empty: Pseudo.t=?,
246+
@as("_expanded") ~_expanded: Pseudo.t=?,
247+
@as("_checked") ~_checked: Pseudo.t=?,
248+
@as("_grabbed") ~_grabbed: Pseudo.t=?,
249+
@as("_pressed") ~_pressed: Pseudo.t=?,
250+
@as("_invalid") ~_invalid: Pseudo.t=?,
251+
@as("_valid") ~_valid: Pseudo.t=?,
252+
@as("_loading") ~_loading: Pseudo.t=?,
253+
@as("_selected") ~_selected: Pseudo.t=?,
254+
@as("_hidden") ~_hidden: Pseudo.t=?,
255+
@as("_autofill") ~_autofill: Pseudo.t=?,
256+
@as("_even") ~_even: Pseudo.t=?,
257+
@as("_odd") ~_odd: Pseudo.t=?,
258+
@as("_first") ~_first: Pseudo.t=?,
259+
@as("_last") ~_last: Pseudo.t=?,
260+
@as("_notFirst") ~_notFirst: Pseudo.t=?,
261+
@as("_notLast") ~_notLast: Pseudo.t=?,
262+
@as("_visited") ~_visited: Pseudo.t=?,
263+
@as("_activeLink") ~_activeLink: Pseudo.t=?,
264+
@as("_activeStep") ~_activeStep: Pseudo.t=?,
265+
@as("_indeterminate") ~_indeterminate: Pseudo.t=?,
266+
@as("_groupHover") ~_groupHover: Pseudo.t=?,
267+
@as("_groupFocus") ~_groupFocus: Pseudo.t=?,
268+
@as("_groupActive") ~_groupActive: Pseudo.t=?,
269+
@as("_groupDisabled") ~_groupDisabled: Pseudo.t=?,
270+
@as("_groupInvalid") ~_groupInvalid: Pseudo.t=?,
271+
@as("_groupChecked") ~_groupChecked: Pseudo.t=?,
272+
@as("_placeholder") ~_placeholder: Pseudo.t=?,
273+
@as("_fullScreen") ~_fullScreen: Pseudo.t=?,
274+
@as("_selection") ~_selection: Pseudo.t=?,
275+
234276
/**
235277
TODO
236278
Other Props

src/Components/Chakra__Badge.js

Lines changed: 0 additions & 795 deletions
This file was deleted.

src/Components/Chakra__Badge.res

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ external make: (
191191
TODO
192192
Pseudo
193193
@see <https://chakra-ui.com/docs/features/style-props#pseudo>
194+
194195
_hover
195196
_active
196197
_focus
@@ -232,6 +233,47 @@ external make: (
232233
_fullScreen
233234
_selection
234235
**/
236+
@as("_hover") ~_hover: Pseudo.t=?,
237+
@as("_active") ~_active: Pseudo.t=?,
238+
@as("_focus") ~_focus: Pseudo.t=?,
239+
@as("_highlighted") ~_highlighted: Pseudo.t=?,
240+
@as("_focusWithin") ~_focusWithin: Pseudo.t=?,
241+
@as("_focusVisible") ~_focusVisible: Pseudo.t=?,
242+
@as("_disabled") ~_disabled: Pseudo.t=?,
243+
@as("_readOnly") ~_readOnly: Pseudo.t=?,
244+
@as("_before") ~_before: Pseudo.t=?,
245+
@as("_after") ~_after: Pseudo.t=?,
246+
@as("_empty") ~_empty: Pseudo.t=?,
247+
@as("_expanded") ~_expanded: Pseudo.t=?,
248+
@as("_checked") ~_checked: Pseudo.t=?,
249+
@as("_grabbed") ~_grabbed: Pseudo.t=?,
250+
@as("_pressed") ~_pressed: Pseudo.t=?,
251+
@as("_invalid") ~_invalid: Pseudo.t=?,
252+
@as("_valid") ~_valid: Pseudo.t=?,
253+
@as("_loading") ~_loading: Pseudo.t=?,
254+
@as("_selected") ~_selected: Pseudo.t=?,
255+
@as("_hidden") ~_hidden: Pseudo.t=?,
256+
@as("_autofill") ~_autofill: Pseudo.t=?,
257+
@as("_even") ~_even: Pseudo.t=?,
258+
@as("_odd") ~_odd: Pseudo.t=?,
259+
@as("_first") ~_first: Pseudo.t=?,
260+
@as("_last") ~_last: Pseudo.t=?,
261+
@as("_notFirst") ~_notFirst: Pseudo.t=?,
262+
@as("_notLast") ~_notLast: Pseudo.t=?,
263+
@as("_visited") ~_visited: Pseudo.t=?,
264+
@as("_activeLink") ~_activeLink: Pseudo.t=?,
265+
@as("_activeStep") ~_activeStep: Pseudo.t=?,
266+
@as("_indeterminate") ~_indeterminate: Pseudo.t=?,
267+
@as("_groupHover") ~_groupHover: Pseudo.t=?,
268+
@as("_groupFocus") ~_groupFocus: Pseudo.t=?,
269+
@as("_groupActive") ~_groupActive: Pseudo.t=?,
270+
@as("_groupDisabled") ~_groupDisabled: Pseudo.t=?,
271+
@as("_groupInvalid") ~_groupInvalid: Pseudo.t=?,
272+
@as("_groupChecked") ~_groupChecked: Pseudo.t=?,
273+
@as("_placeholder") ~_placeholder: Pseudo.t=?,
274+
@as("_fullScreen") ~_fullScreen: Pseudo.t=?,
275+
@as("_selection") ~_selection: Pseudo.t=?,
276+
235277
/**
236278
TODO
237279
Other Props

0 commit comments

Comments
 (0)