Skip to content

Commit 1f69ae2

Browse files
ethib137ethib137
authored
Merge pull request #6180 from pat270/LPD-66883
feat(@clayui/autocomplete): LPD-66883 Adds sticker insetItem before to input groups.
2 parents 4241601 + 529916e commit 1f69ae2

File tree

6 files changed

+87
-8
lines changed

6 files changed

+87
-8
lines changed

‎packages/clay-css/src/scss/cadmin/components/_input-groups.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,11 @@
209209
);
210210
}
211211
}
212+
213+
.sticker {
214+
margin-left: 12px;
215+
margin-right: 8px;
216+
}
212217
}
213218

214219
.input-group-inset-icon {

‎packages/clay-css/src/scss/cadmin/variables/_forms.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1630,8 +1630,8 @@ $cadmin-input-group-item-focusable: map-deep-merge(
16301630
// Input Group Inset
16311631

16321632
$cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;
1633-
$cadmin-input-group-inset-item-padding-left: 5px !default;
1634-
$cadmin-input-group-inset-item-padding-right: 5px !default;
1633+
$cadmin-input-group-inset-item-padding-left: 4px !default;
1634+
$cadmin-input-group-inset-item-padding-right: 4px !default;
16351635

16361636
$cadmin-input-group-inset-item-btn: () !default;
16371637
$cadmin-input-group-inset-item-btn: map-deep-merge(
@@ -1641,8 +1641,8 @@ $cadmin-input-group-inset-item-btn: map-deep-merge(
16411641
height: 75%,
16421642
justify-content: center,
16431643
line-height: 1,
1644-
margin-left: 3px,
1645-
margin-right: 3px,
1644+
margin-left: 4px,
1645+
margin-right: 4px,
16461646
padding-bottom: 0,
16471647
padding-left: 8px,
16481648
padding-right: 8px,

‎packages/clay-css/src/scss/components/_input-groups.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,11 @@
259259
@include clay-button-size($input-group-inset-form-file-btn);
260260
}
261261
}
262+
263+
.sticker {
264+
margin-left: 0.75rem;
265+
margin-right: 0.5rem;
266+
}
262267
}
263268

264269
.input-group-inset-icon {

‎packages/clay-css/src/scss/variables/_forms.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1628,8 +1628,8 @@ $input-group-item-focusable: map-deep-merge(
16281628
// Input Group Inset
16291629

16301630
$input-group-inset-item-color: $input-group-addon-color !default;
1631-
$input-group-inset-item-padding-left: 5px !default;
1632-
$input-group-inset-item-padding-right: 5px !default;
1631+
$input-group-inset-item-padding-left: 4px !default;
1632+
$input-group-inset-item-padding-right: 4px !default;
16331633

16341634
$input-group-inset-item-btn: () !default;
16351635
$input-group-inset-item-btn: map-deep-merge(
@@ -1639,8 +1639,8 @@ $input-group-inset-item-btn: map-deep-merge(
16391639
height: 75%,
16401640
justify-content: center,
16411641
line-height: 1,
1642-
margin-left: 0.1875rem,
1643-
margin-right: 0.1875rem,
1642+
margin-left: 0.25rem,
1643+
margin-right: 0.25rem,
16441644
padding-bottom: 0,
16451645
padding-left: 0.5rem,
16461646
padding-right: 0.5rem,

‎packages/clay-form/docs/input-group.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,48 @@ export default function App() {
167167
}
168168
```
169169

170+
### Inset Before
171+
172+
```jsx preview
173+
import {Provider} from '@clayui/core';
174+
import Form, {ClayInput} from '@clayui/form';
175+
import ClayButton from '@clayui/button';
176+
import ClaySticker from '@clayui/sticker';
177+
import React, {useState} from 'react';
178+
179+
import '@clayui/css/lib/css/atlas.css';
180+
181+
export default function App() {
182+
return (
183+
<Provider spritemap="/public/icons.svg">
184+
<div className="p-4">
185+
<Form.Group>
186+
<label htmlFor="selectASpace">Select a Space</label>
187+
<ClayInput.Group>
188+
<ClayInput.GroupItem>
189+
<ClayInput
190+
aria-label="Select a space"
191+
className="form-control-select"
192+
id="selectASpace"
193+
insetBefore
194+
placeholder="Select a Space"
195+
type="text"
196+
value="Space Program"
197+
/>
198+
<ClayInput.GroupInsetItem before>
199+
<ClaySticker displayType="outline-2" size="sm">
200+
S
201+
</ClaySticker>
202+
</ClayInput.GroupInsetItem>
203+
</ClayInput.GroupItem>
204+
</ClayInput.Group>
205+
</Form.Group>
206+
</div>
207+
</Provider>
208+
);
209+
}
210+
```
211+
170212
### Stacked
171213

172214
For creating a stack of the items inside a item group, use `stacked` property in the `<ClayInput.Group>` and use `shrink` property for using in screens sizes less than 576px.

‎packages/clay-form/stories/InputGroup.stories.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* SPDX-License-Identifier: BSD-3-Clause
44
*/
55

6+
import ClaySticker from '@clayui/sticker';
67
import React from 'react';
78

89
import {ClayInput} from '../src';
@@ -121,3 +122,29 @@ export const GroupMixed = () => (
121122
</ClayForm.Group>
122123
</div>
123124
);
125+
126+
export const Spaces = () => (
127+
<div className="sheet">
128+
<ClayForm.Group>
129+
<label htmlFor="selectASpace">Select a Space</label>
130+
<ClayInput.Group>
131+
<ClayInput.GroupItem>
132+
<ClayInput
133+
aria-label="Select a space"
134+
className="form-control-select"
135+
id="selectASpace"
136+
insetBefore
137+
placeholder="Select a Space"
138+
type="text"
139+
value="Space Program"
140+
/>
141+
<ClayInput.GroupInsetItem before>
142+
<ClaySticker displayType="outline-2" size="sm">
143+
S
144+
</ClaySticker>
145+
</ClayInput.GroupInsetItem>
146+
</ClayInput.GroupItem>
147+
</ClayInput.Group>
148+
</ClayForm.Group>
149+
</div>
150+
);

0 commit comments

Comments
 (0)