Add utility classes for <details>

modules/primer-utilities/docs/details.md

@@ -0,0 +1,30 @@
+---
+title: Details
+status: New release
+---
+
+Details classes are created to enhance the native behaviors of `<details>`.
+
+{:toc}
+
+## Fullscreen click area
+
+Use `.details-expanded` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
+
+```html
+<details class="details-expanded">
+  <summary class="btn">More</summary>
+  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+</details>
+```
+
+## Darkened fullscreen click area
+
+Use `.details-expanded-dark` darken the click area overlay. Useful for modals.
+
+```html
+<details class="details-expanded details-expanded-dark">
+  <summary class="btn">More</summary>
+  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+</details>
+```

modules/primer-utilities/index.scss

@@ -4,6 +4,7 @@
 @import "./lib/borders.scss";
 @import "./lib/box-shadow.scss";
 @import "./lib/colors.scss";
+@import "./lib/details.scss";
 @import "./lib/flexbox.scss";
 @import "./lib/layout.scss";
 @import "./lib/margin.scss";

modules/primer-utilities/lib/details.scss

@@ -0,0 +1,17 @@
+// stylelint-disable selector-max-type
+.details-expanded[open] > summary::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  display: block;
+  cursor: default;
+  content: " ";
+  background: transparent;
+}
+
+.details-expanded-dark[open] > summary::before {
+  background: $black-fade-50;
+}

modules/primer-utilities/stories/Details.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Details utilities', module)
+.add('details-expanded', () => (
+  <details className='details-expanded'>
+    <summary className='btn'>More</summary>
+    <div className='position-relative bg-white p-3 border' style={{zIndex: 100}}>Hidden text</div>
+  </details>
+))
+.add('details-expanded-dark', () => (
+  <details className='details-expanded details-expanded-dark'>
+    <summary className='btn'>More</summary>
+    <div className='position-relative bg-white p-3 border' style={{zIndex: 100}}>Hidden text</div>
+  </details>
+))