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

Author: mlynam

.changeset/neat-wasps-whisper.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Make .form-control elements render as disabled when a parent fieldset is disabled

docs/src/stories/components/Forms/Fieldset.stories.jsx

@@ -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
+}

src/forms/form-control.scss

@@ -57,7 +57,8 @@ label {
     }
   }
 
-  &[disabled] {
+  &[disabled],
+  fieldset[disabled] & {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);
     border-color: var(--color-border-default);