From c8d2ed3ed72d452e6eb4e0ae3e9bb91a837d440c Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 16 Oct 2025 11:03:35 -0700 Subject: [PATCH 1/3] feat(@clayui/css): LPD-66883 Add spacing for stickers in input-group-inset-before --- .../src/scss/cadmin/components/_input-groups.scss | 5 +++++ packages/clay-css/src/scss/cadmin/variables/_forms.scss | 8 ++++---- packages/clay-css/src/scss/components/_input-groups.scss | 5 +++++ packages/clay-css/src/scss/variables/_forms.scss | 8 ++++---- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/components/_input-groups.scss b/packages/clay-css/src/scss/cadmin/components/_input-groups.scss index 0355aac6b0..768ab76a51 100644 --- a/packages/clay-css/src/scss/cadmin/components/_input-groups.scss +++ b/packages/clay-css/src/scss/cadmin/components/_input-groups.scss @@ -209,6 +209,11 @@ ); } } + + .sticker { + margin-left: 12px; + margin-right: 8px; + } } .input-group-inset-icon { diff --git a/packages/clay-css/src/scss/cadmin/variables/_forms.scss b/packages/clay-css/src/scss/cadmin/variables/_forms.scss index ba7bd3d643..ce9ea1b75b 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_forms.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_forms.scss @@ -1630,8 +1630,8 @@ $cadmin-input-group-item-focusable: map-deep-merge( // Input Group Inset $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default; -$cadmin-input-group-inset-item-padding-left: 5px !default; -$cadmin-input-group-inset-item-padding-right: 5px !default; +$cadmin-input-group-inset-item-padding-left: 4px !default; +$cadmin-input-group-inset-item-padding-right: 4px !default; $cadmin-input-group-inset-item-btn: () !default; $cadmin-input-group-inset-item-btn: map-deep-merge( @@ -1641,8 +1641,8 @@ $cadmin-input-group-inset-item-btn: map-deep-merge( height: 75%, justify-content: center, line-height: 1, - margin-left: 3px, - margin-right: 3px, + margin-left: 4px, + margin-right: 4px, padding-bottom: 0, padding-left: 8px, padding-right: 8px, diff --git a/packages/clay-css/src/scss/components/_input-groups.scss b/packages/clay-css/src/scss/components/_input-groups.scss index 359012ed6b..070bbf8f6d 100644 --- a/packages/clay-css/src/scss/components/_input-groups.scss +++ b/packages/clay-css/src/scss/components/_input-groups.scss @@ -259,6 +259,11 @@ @include clay-button-size($input-group-inset-form-file-btn); } } + + .sticker { + margin-left: 0.75rem; + margin-right: 0.5rem; + } } .input-group-inset-icon { diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss index ad5469f9fe..5dbb767738 100644 --- a/packages/clay-css/src/scss/variables/_forms.scss +++ b/packages/clay-css/src/scss/variables/_forms.scss @@ -1628,8 +1628,8 @@ $input-group-item-focusable: map-deep-merge( // Input Group Inset $input-group-inset-item-color: $input-group-addon-color !default; -$input-group-inset-item-padding-left: 5px !default; -$input-group-inset-item-padding-right: 5px !default; +$input-group-inset-item-padding-left: 4px !default; +$input-group-inset-item-padding-right: 4px !default; $input-group-inset-item-btn: () !default; $input-group-inset-item-btn: map-deep-merge( @@ -1639,8 +1639,8 @@ $input-group-inset-item-btn: map-deep-merge( height: 75%, justify-content: center, line-height: 1, - margin-left: 0.1875rem, - margin-right: 0.1875rem, + margin-left: 0.25rem, + margin-right: 0.25rem, padding-bottom: 0, padding-left: 0.5rem, padding-right: 0.5rem, From c658d72f30dbf0bc0c6438b600c0283f22d9d7e4 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 21 Oct 2025 11:05:20 -0700 Subject: [PATCH 2/3] chore(@clayui/form): LPD-66883 Storybook, add Spaces input-group example --- .../clay-form/stories/InputGroup.stories.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/clay-form/stories/InputGroup.stories.tsx b/packages/clay-form/stories/InputGroup.stories.tsx index 57d20909cd..76452982ac 100644 --- a/packages/clay-form/stories/InputGroup.stories.tsx +++ b/packages/clay-form/stories/InputGroup.stories.tsx @@ -3,6 +3,7 @@ * SPDX-License-Identifier: BSD-3-Clause */ +import ClaySticker from '@clayui/sticker'; import React from 'react'; import {ClayInput} from '../src'; @@ -121,3 +122,29 @@ export const GroupMixed = () => ( ); + +export const Spaces = () => ( +
+ + + + + + + + S + + + + + +
+); From 529916e468e8b52cf1b8a802d9a166aa4e725bcf Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 21 Oct 2025 11:06:06 -0700 Subject: [PATCH 3/3] docs(clayui.com): LPD-66883 Input Group add insetBefore (Spaces) example --- packages/clay-form/docs/input-group.mdx | 42 +++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/clay-form/docs/input-group.mdx b/packages/clay-form/docs/input-group.mdx index ccbd6b8c83..46f011f619 100644 --- a/packages/clay-form/docs/input-group.mdx +++ b/packages/clay-form/docs/input-group.mdx @@ -167,6 +167,48 @@ export default function App() { } ``` +### Inset Before + +```jsx preview +import {Provider} from '@clayui/core'; +import Form, {ClayInput} from '@clayui/form'; +import ClayButton from '@clayui/button'; +import ClaySticker from '@clayui/sticker'; +import React, {useState} from 'react'; + +import '@clayui/css/lib/css/atlas.css'; + +export default function App() { + return ( + +
+ + + + + + + + S + + + + + +
+ + ); +} +``` + ### Stacked For creating a stack of the items inside a item group, use `stacked` property in the `` and use `shrink` property for using in screens sizes less than 576px.