Skip to content

feat(@clayui/css): LPD-53483 Adds inline-text-input #6056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

feat(@clayui/css): LPD-53483 Adds inline-text-input #6056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ddb077c
feat(@clayui/css): LPD-53483 Adds inline-text-input
pat270 May 13, 2025
e6e165b
feat(@clayui/form): LPD-53483 Add ClayInput.InlineText
pat270 May 13, 2025
708e544
chore(@clayui/form): LPD-53483 Add storybook example of ClayInput.Inl…
pat270 May 13, 2025
648cadb
fix(@clayui/css): LPD-53483 Cadmin Form prefix variables with $cadmin-
pat270 May 16, 2025
3d893a5
fix(@clayui/form): LPD-53483 SF
pat270 May 16, 2025
15d40b1
chore(@clayui/form): LPD-53483 add Input.InlineText test
pat270 May 19, 2025
fb35ff7
chore(@clayui/form): LPD-53483 Update snapshot
pat270 May 19, 2025
29f973c
docs(clayui.com): LPD-53483 Add examples of InlineText
pat270 May 19, 2025
7c807f9
Uncontrolled only works
pat270 May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 79 additions & 1 deletion packages/clay-css/src/scss/cadmin/variables/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,59 @@ $cadmin-input-palette: map-deep-merge(
white-space: nowrap,
width: min-content,
),
'.form-control-fit-content': (
max-width: 100%,
'.form-control': (
display: inline-flex,
width: auto,
),
'.form-control-inset': (
margin: 0,
min-height: 0,
min-width: 50px,
width: auto,
'&:empty:before': (
color: $cadmin-secondary,
content: unquote("'\\FEFF' attr(placeholder)"),
cursor: text,
pointer-events: none,
),
'&:focus:empty:before': (
content: none,
),
),
'.form-control-hidden': (
width: 0,
),
),
'.inline-text-input': (
'.form-control': (
background-color: transparent,
border-color: transparent,
font-size: 28px,
font-weight: $cadmin-font-weight-semi-bold,
line-height: 1,
padding: 5px 0 5px 16px,
'&:hover': (
border-color: $cadmin-secondary-l3,
),
),
'.form-control-inset': (
padding-right: 16px,
'&:focus ~ .form-control-indicator': (
display: none,
),
'&[contenteditable="false"] ~ .form-control-indicator': (
display: none,
),
),
'.form-control-item': (
padding-right: 16px,
),
'.lexicon-icon': (
font-size: 16px,
),
),
),
$cadmin-input-palette
);
Expand Down Expand Up @@ -421,9 +474,10 @@ $cadmin-form-control-inset: map-deep-merge(
margin-bottom: $cadmin-form-control-inset-margin-y,
margin-left: 8px,
margin-top: $cadmin-form-control-inset-margin-y,
max-width: 100%,
min-height: $cadmin-form-control-inset-min-height,
min-width: 50px,
padding: 0,
width: 50px,
focus: (
outline: 0,
),
Expand Down Expand Up @@ -840,6 +894,14 @@ $cadmin-has-error: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $cadmin-input-danger-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$cadmin-has-error
);
Expand Down Expand Up @@ -1010,6 +1072,14 @@ $cadmin-has-warning: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $cadmin-input-warning-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$cadmin-has-warning
);
Expand Down Expand Up @@ -1180,6 +1250,14 @@ $cadmin-has-success: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $cadmin-input-success-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$cadmin-has-success
);
Expand Down
47 changes: 45 additions & 2 deletions packages/clay-css/src/scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,8 +607,11 @@
$_focus-within: map-get($map, focus-within);

@if ($_focus-within) {
&:focus-within:has(input:focus) {
@include clay-form-control-variant($_focus-within);
&:focus-within {
&:has(input:focus),
&:has([contenteditable]:focus) {
@include clay-form-control-variant($_focus-within);
}
}
}

Expand Down Expand Up @@ -644,6 +647,14 @@
}
}

$_readonly: map-get($map, readonly);

@if ($_readonly) {
&[readonly] {
@include clay-form-control-variant($_readonly);
}
}

// Disabled
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
Expand Down Expand Up @@ -700,6 +711,22 @@
}
}

@each $key, $value in $map {
@if not clay-is-map-unset($value) {
$selector: if(
starts-with($key, '.') or starts-with($key, '#'),
$key,
false
);

@if ($selector) {
#{$selector} {
@include clay-map-to-css($value);
}
}
}
}

@include clay-generate-media-breakpoints($map);
}
}
Expand Down Expand Up @@ -1605,6 +1632,22 @@
}
}
}

@each $key, $value in $map {
@if not clay-is-map-unset($value) {
$selector: if(
starts-with($key, '.') or starts-with($key, '#'),
$key,
false
);

@if ($selector) {
#{$selector} {
@include clay-map-to-css($value);
}
}
}
}
}
}
}
Expand Down
80 changes: 79 additions & 1 deletion packages/clay-css/src/scss/variables/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,59 @@ $input-palette: map-deep-merge(
white-space: nowrap,
width: min-content,
),
'.form-control-fit-content': (
max-width: 100%,
'.form-control': (
display: inline-flex,
width: auto,
),
'.form-control-inset': (
margin: 0,
min-height: 0,
min-width: 50px,
width: auto,
'&:empty:before': (
color: $secondary,
content: unquote("'\\FEFF' attr(placeholder)"),
cursor: text,
pointer-events: none,
),
'&:focus:empty:before': (
content: none,
),
),
'.form-control-hidden': (
width: 0,
),
),
'.inline-text-input': (
'.form-control': (
background-color: transparent,
border-color: transparent,
font-size: 1.75rem,
font-weight: $font-weight-semi-bold,
line-height: 1,
padding: 0.3125rem 0 0.3125rem 1rem,
'&:hover': (
border-color: $secondary-l3,
),
),
'.form-control-inset': (
padding-right: 1rem,
'&:focus ~ .form-control-indicator': (
display: none,
),
'&[contenteditable="false"] ~ .form-control-indicator': (
display: none,
),
),
'.form-control-item': (
padding-right: 1rem,
),
'.lexicon-icon': (
font-size: 1rem,
),
),
),
$input-palette
);
Expand Down Expand Up @@ -468,9 +521,10 @@ $form-control-inset: map-deep-merge(
margin-bottom: $form-control-inset-margin-y,
margin-left: 0.25rem,
margin-top: $form-control-inset-margin-y,
max-width: 100%,
min-height: $form-control-inset-min-height,
min-width: 50px,
padding: 0,
width: 50px,
focus: (
outline: 0,
),
Expand Down Expand Up @@ -922,6 +976,14 @@ $has-error: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $input-danger-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$has-error
);
Expand Down Expand Up @@ -1075,6 +1137,14 @@ $has-warning: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $input-warning-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$has-warning
);
Expand Down Expand Up @@ -1228,6 +1298,14 @@ $has-success: map-deep-merge(
),
),
),
'.inline-text-input': (
'.form-control': (
border-color: $input-success-border-color,
),
'.form-control-indicator': (
display: none,
),
),
),
$has-success
);
Expand Down
47 changes: 47 additions & 0 deletions packages/clay-form/docs/form.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,53 @@ export default function App() {
}
```

## Inline Text Input

A text input that grows along with its content.

```jsx preview
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Form>
<Form.Group>
<label htmlFor="inlineTextInput1">
Inline Text Input with Label
</label>
<ClayInput.InlineText
id="inlineTextInput1"
placeholder="Placeholder"
/>
</Form.Group>
<Form.Group>
<label htmlFor="inlineTextInput1">Readonly</label>
<ClayInput.InlineText
id="inlineTextInput2"
placeholder="Placeholder"
readonly={true}
value="This is readonly text in the input."
/>
</Form.Group>
<Form.Group>
<ClayInput.InlineText
id="inlineTextInput3"
placeholder="Untitled Case Study"
/>
</Form.Group>
</Form>
</div>
</Provider>
);
}
```

## Validation

`.has-error`, `.has-success` and `.has-warning` classes are used in `ClayForm.Group` to identifier validation state of the form group items.
Expand Down
Loading
Loading