Skip to content
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

Add styling for readonly, fix AutoComplete inset focus background color #2218

Merged
merged 9 commits into from
Aug 29, 2022
Merged

Add styling for readonly, fix AutoComplete inset focus background color #2218

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
91011ea
add readme styles
langermank Aug 26, 2022
40c3900
Stylelint auto-fixes
actions-user Aug 26, 2022
db42331
Create brown-grapes-swim.md
langermank Aug 26, 2022
8850c79
fix background color
langermank Aug 26, 2022
22b5431
Merge branch 'form-bug-fixes' of https://github.com/primer/css into f…
langermank Aug 26, 2022
60e935a
add story and fix background color for inset focus
langermank Aug 26, 2022
24ca4f3
Stylelint auto-fixes
actions-user Aug 26, 2022
fce1540
Update brown-grapes-swim.md
langermank Aug 26, 2022
514d29b
made readonly undefined
langermank Aug 26, 2022
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
6 changes: 6 additions & 0 deletions .changeset/brown-grapes-swim.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@primer/css": patch
---

- Adding readonly styles
- Fixing focus background color for inset field
15 changes: 13 additions & 2 deletions docs/src/stories/rails-form-framework/TextInput.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,13 @@ export default {
table: {
category: 'Input'
}
},
readOnly: {
description: 'readonly styles',
control: {type: 'boolean'},
table: {
category: 'Input'
}
}
}
}
Expand Down Expand Up @@ -173,7 +180,8 @@ export const InputTemplate = ({
caption,
validation,
trailingActionDivider,
validationStatus
validationStatus,
readOnly
}) => (
<>
<div className={clsx('FormControl', fullWidth && 'FormControl--fullWidth')}>
Expand Down Expand Up @@ -212,6 +220,7 @@ export const InputTemplate = ({
placeholder={placeholder}
id="input-id"
type="text"
readonly={readOnly ? 'true' : undefined}
className={clsx(
'FormControl-input',
size && `${size}`,
Expand Down Expand Up @@ -253,6 +262,7 @@ export const InputTemplate = ({
id="input-id"
type="text"
disabled={disabled ? 'true' : undefined}
readonly={readOnly ? 'true' : undefined}
className={clsx(
'FormControl-input',
size && `${size}`,
Expand Down Expand Up @@ -307,5 +317,6 @@ Playground.args = {
visuallyHidden: false,
validation: '',
trailingActionDivider: false,
validationStatus: 0
validationStatus: 0,
readOnly: false
}
9 changes: 9 additions & 0 deletions src/forms/FormControl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,10 @@
}
}

&[readonly] {
background-color: var(--color-input-disabled-bg);
}

::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
Expand Down Expand Up @@ -161,6 +165,11 @@

&.FormControl-inset {
background-color: var(--color-canvas-inset);

&:focus-visible,
&:focus {
background-color: var(--color-canvas-default);
}
}

&.FormControl-monospace {
Expand Down