mirror of
https://github.com/primer/css.git
synced 2024-12-23 14:13:14 +03:00
Fieldset disable (#2077)
* feat: style .form-control as disabled when parent fieldset is disabled * docs: add the changeset * refactor(fieldset[disable]): use scss parent + nested selector instead of mixin
This commit is contained in:
parent
f59639fb8d
commit
ab078a58c6
5
.changeset/neat-wasps-whisper.md
Normal file
5
.changeset/neat-wasps-whisper.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@primer/css": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Make .form-control elements render as disabled when a parent fieldset is disabled
|
36
docs/src/stories/components/Forms/Fieldset.stories.jsx
Normal file
36
docs/src/stories/components/Forms/Fieldset.stories.jsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/Forms/Fieldset',
|
||||||
|
decorators: [
|
||||||
|
Story => (
|
||||||
|
<form>
|
||||||
|
<Story/>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
],
|
||||||
|
argTypes: {
|
||||||
|
disabled: {
|
||||||
|
description: 'disabled fieldset',
|
||||||
|
control: {type: 'boolean'},
|
||||||
|
table: {
|
||||||
|
category: 'Interactive'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const FieldsetTemplate = ({disabled}) => (
|
||||||
|
<fieldset disabled={disabled}>
|
||||||
|
<label htmlFor="email">Email</label>
|
||||||
|
<input className="form-control" id="email" placeholder="email"/>
|
||||||
|
|
||||||
|
<label htmlFor="username">Username</label>
|
||||||
|
<input className="form-control" id="username" placeholder="username"/>
|
||||||
|
</fieldset>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const Playground = FieldsetTemplate.bind({})
|
||||||
|
Playground.args = {
|
||||||
|
disabled: false
|
||||||
|
}
|
@ -57,7 +57,8 @@ label {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled],
|
||||||
|
fieldset[disabled] & {
|
||||||
color: var(--color-primer-fg-disabled);
|
color: var(--color-primer-fg-disabled);
|
||||||
background-color: var(--color-input-disabled-bg);
|
background-color: var(--color-input-disabled-bg);
|
||||||
border-color: var(--color-border-default);
|
border-color: var(--color-border-default);
|
||||||
|
Loading…
Reference in New Issue
Block a user