Skip to content

Commit 011003f

Browse files
TechQueryTechQuery
committed
[optimize] upgrade Upstream packages
1 parent d9aec3a commit 011003f

File tree

6 files changed

+477
-470
lines changed

6 files changed

+477
-470
lines changed

‎document/source/components/ButtonGroup.mdx‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Fragment } from 'web-cell';
1010
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
1111
import { Button } from 'boot-cell/source/Form/Button';
1212
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
13+
import { Field } from 'boot-cell/source/Form/Field';
1314
import { DropMenu, DropMenuItem } from 'boot-cell/source/Navigator/DropMenu';
1415

1516
import { Example } from '../../../source/component/Example';
@@ -107,11 +108,13 @@ you’ll likely need some utilities though to space things properly.
107108
<Button color="secondary">{index}</Button>
108109
))}
109110
</ButtonGroup>
110-
<InputGroup
111-
placeholder="Input group example"
112-
aria-label="Input group example"
113-
prepend="@"
114-
/>
111+
<InputGroup>
112+
@
113+
<Field
114+
placeholder="Input group example"
115+
aria-label="Input group example"
116+
/>
117+
</InputGroup>
115118
</Toolbar>
116119
<Toolbar
117120
className="justify-content-between"
@@ -122,11 +125,13 @@ you’ll likely need some utilities though to space things properly.
122125
<Button color="secondary">{index}</Button>
123126
))}
124127
</ButtonGroup>
125-
<InputGroup
126-
placeholder="Input group example"
127-
aria-label="Input group example"
128-
prepend="@"
129-
/>
128+
<InputGroup>
129+
@
130+
<Field
131+
placeholder="Input group example"
132+
aria-label="Input group example"
133+
/>
134+
</InputGroup>
130135
</Toolbar>
131136
</Example>
132137

@@ -135,6 +140,7 @@ import { render, createCell, Fragment } from 'web-cell';
135140
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
136141
import { Button } from 'boot-cell/source/Form/Button';
137142
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
143+
import { Field } from 'boot-cell/source/Form/Field';
138144

139145
render(
140146
<>
@@ -144,11 +150,13 @@ render(
144150
<Button color="secondary">{index}</Button>
145151
))}
146152
</ButtonGroup>
147-
<InputGroup
148-
placeholder="Input group example"
149-
aria-label="Input group example"
150-
prepend="@"
151-
/>
153+
<InputGroup>
154+
@
155+
<Field
156+
placeholder="Input group example"
157+
aria-label="Input group example"
158+
/>
159+
</InputGroup>
152160
</Toolbar>
153161
<Toolbar
154162
className="justify-content-between"
@@ -159,11 +167,13 @@ render(
159167
<Button color="secondary">{index}</Button>
160168
))}
161169
</ButtonGroup>
162-
<InputGroup
163-
placeholder="Input group example"
164-
aria-label="Input group example"
165-
prepend="@"
166-
/>
170+
<InputGroup>
171+
@
172+
<Field
173+
placeholder="Input group example"
174+
aria-label="Input group example"
175+
/>
176+
</InputGroup>
167177
</Toolbar>
168178
</>
169179
);

‎document/source/components/FormField.mdx‎

Lines changed: 66 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -810,42 +810,34 @@ Validation styles are available for the following form components:
810810
<FormField
811811
className="mb-3"
812812
type="file"
813-
label="Choose file..."
814813
required
815814
invalidMessage="Example invalid custom file feedback"
816815
/>
817816
<InputGroup
818817
className="mb-3"
819-
prepend="@"
820-
required
821-
valid={false}
822818
invalidMessage="Example invalid input group feedback"
823-
/>
819+
>
820+
@
821+
<Field required valid={false} />
822+
</InputGroup>
824823
<InputGroup
825824
className="mb-3"
826-
is="select"
827-
prepend="Options"
828-
required
829-
valid={false}
830825
invalidMessage="Example invalid input group feedback"
831826
>
832-
<option value="">Choose...</option>
833-
<option value="1">One</option>
834-
<option value="2">Two</option>
835-
<option value="3">Three</option>
827+
Options
828+
<Field is="select" required valid={false}>
829+
<option value="">Choose...</option>
830+
<option value="1">One</option>
831+
<option value="2">Two</option>
832+
<option value="3">Three</option>
833+
</Field>
834+
</InputGroup>
835+
<InputGroup invalidMessage="Example invalid input group feedback">
836+
<Field type="file" required valid={false} />
837+
<Button color="secondary" outline>
838+
Button
839+
</Button>
836840
</InputGroup>
837-
<InputGroup
838-
type="file"
839-
label="Choose file..."
840-
append={
841-
<Button color="secondary" outline>
842-
Button
843-
</Button>
844-
}
845-
required
846-
valid={false}
847-
invalidMessage="Example invalid input group feedback"
848-
/>
849841
</Form>
850842
</Example>
851843

@@ -855,6 +847,7 @@ import { Form } from 'boot-cell/source/Form/Form';
855847
import { FormField } from 'boot-cell/source/Form/FormField';
856848
import { ToggleField } from 'boot-cell/source/Form/ToggleField';
857849
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
850+
import { Field } from 'boot-cell/source/Form/Field';
858851
import { Button } from 'boot-cell/source/Form/Button';
859852

860853
render(
@@ -913,36 +906,29 @@ render(
913906
/>
914907
<InputGroup
915908
className="mb-3"
916-
prepend="@"
917-
required
918-
valid={false}
919909
invalidMessage="Example invalid input group feedback"
920-
/>
910+
>
911+
@
912+
<Field required valid={false} />
913+
</InputGroup>
921914
<InputGroup
922915
className="mb-3"
923-
is="select"
924-
prepend="Options"
925-
required
926-
valid={false}
927916
invalidMessage="Example invalid input group feedback"
928917
>
929-
<option value="">Choose...</option>
930-
<option value="1">One</option>
931-
<option value="2">Two</option>
932-
<option value="3">Three</option>
918+
Options
919+
<Field is="select" required valid={false}>
920+
<option value="">Choose...</option>
921+
<option value="1">One</option>
922+
<option value="2">Two</option>
923+
<option value="3">Three</option>
924+
</Field>
925+
</InputGroup>
926+
<InputGroup invalidMessage="Example invalid input group feedback">
927+
<Field type="file" label="Choose file..." required valid={false} />
928+
<Button color="secondary" outline>
929+
Button
930+
</Button>
933931
</InputGroup>
934-
<InputGroup
935-
type="file"
936-
label="Choose file..."
937-
append={
938-
<Button color="secondary" outline>
939-
Button
940-
</Button>
941-
}
942-
required
943-
valid={false}
944-
invalidMessage="Example invalid input group feedback"
945-
/>
946932
</Form>
947933
);
948934
```
@@ -1354,6 +1340,8 @@ render(
13541340

13551341
### Range
13561342

1343+
#### Regular mode
1344+
13571345
The track (the background) and thumb (the value) are both styled to appear the same across browsers.
13581346
As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress,
13591347
we do not currently support it.
@@ -1403,6 +1391,35 @@ render(
14031391
);
14041392
```
14051393

1394+
#### Icon mode
1395+
1396+
<Example>
1397+
<FormField
1398+
type="range"
1399+
label="Evaluation"
1400+
max={5}
1401+
emptyIcon="☆"
1402+
fullIcon="★"
1403+
size="lg"
1404+
/>
1405+
</Example>
1406+
1407+
```TSX
1408+
import { render, createCell } from 'web-cell';
1409+
import { FormField } from 'boot-cell/source/Form/FormField';
1410+
1411+
render(
1412+
<FormField
1413+
type="range"
1414+
label="Evaluation"
1415+
max={5}
1416+
emptyIcon="☆"
1417+
fullIcon="★"
1418+
size="lg"
1419+
/>
1420+
);
1421+
```
1422+
14061423
### File browser
14071424

14081425
<Example>

0 commit comments

Comments
 (0)