Underline nav focus state (#1821)

* add pseudo selectors * adjustments * add stories, cleanup * update mixin * fix mixin * lint * add back overflow styles * adjust focus for better overflow state, scrollsnap * post test adjustments, move hacks to primer css * Stylelint auto-fixes * hover state desktop only * document data-content hack * Create nice-days-jog.md * Use counter-border for LHC (#1792) * Use counter-border for LHC * Create orange-ties-sin.md * Remove fallback * Update nice-days-jog.md Co-authored-by: langermank <langermank@github.com> Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com>
primer · Dec 8, 2021 · daa2685 · daa2685
1 parent 085ae3f
commit daa2685
Show file tree

Hide file tree

Showing 9 changed files with 493 additions and 32 deletions.
diff --git a/.changeset/nice-days-jog.md b/.changeset/nice-days-jog.md
@@ -0,0 +1,7 @@
+---
+"@primer/css": major
+---
+
+UnderlineNav `:focus` styles
+Refactor selected state and spacing
+Add selected bold state override from github/github
diff --git a/.changeset/orange-ties-sin.md b/.changeset/orange-ties-sin.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Use `counter-border` for LHC
diff --git a/docs/src/stories/components/Navigation/UnderlineNav.stories.jsx b/docs/src/stories/components/Navigation/UnderlineNav.stories.jsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import clsx from 'clsx'
+import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'
+
+export default {
+  title: 'Components/Navigation/UnderlineNav',
+  excludeStories: ['UnderlineNavTemplate'],
+  layout: 'padded',
+  argTypes: {
+    variant: {
+      options: [0, 1, 2], // iterator
+      mapping: ['', 'UnderlineNav--right', 'UnderlineNav--full'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'align-right', 'fullwidth']
+      },
+      description: 'nav positioning options',
+      table: {
+        category: 'CSS'
+      }
+    },
+    children: {
+      description: 'creates a slot for children',
+      table: {
+        category: 'HTML'
+      }
+    },
+    actionStart: {
+      description: 'action to left of nav',
+      table: {
+        category: 'HTML'
+      }
+    },
+    actionEnd: {
+      description: 'action to right of nav',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const UnderlineNavTemplate = ({variant, children, actionStart, actionEnd}) => (
+  <>
+    <nav className={clsx('UnderlineNav', variant && `${variant}`)}>
+      {actionStart}
+      {variant === 'UnderlineNav--full' ? (
+        <div class="container-lg UnderlineNav-container">
+          <ul class="UnderlineNav-body" role="tablist">
+            {children}
+          </ul>
+        </div>
+      ) : (
+        <ul class="UnderlineNav-body" role="tablist">
+          {children}
+        </ul>
+      )}
+      {actionEnd}
+    </nav>
+  </>
+)
+
+export const Playground = UnderlineNavTemplate.bind({})
+Playground.args = {
+  variant: 0,
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
+    </>
+  )
+}
diff --git a/docs/src/stories/components/Navigation/UnderlineNavAction.stories.jsx b/docs/src/stories/components/Navigation/UnderlineNavAction.stories.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from '../Button/Button.stories'
+import {LinkTemplate} from '../Link/Link.stories'
+
+export default {
+  title: 'Components/Navigation/UnderlineNav/Action',
+  excludeStories: ['UnderlineNavActionTemplate'],
+  layout: 'padded',
+  argTypes: {
+    semanticItemType: {
+      options: ['button', 'link'],
+      control: {
+        type: 'inline-radio'
+      },
+      description: 'item can be a button or a link',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      name: 'label',
+      type: 'string',
+      description: 'Item label text',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set manual focus on item',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+export const UnderlineNavActionTemplate = ({semanticItemType, label, focusElement}) => {
+  return (
+    <div class="UnderlineNav-actions">
+      {semanticItemType === 'button' ? (
+        <ButtonTemplate label={label} focusAllElements={focusElement} />
+      ) : (
+        <LinkTemplate label={label} focusAllElements={focusElement} />
+      )}
+    </div>
+  )
+}
+
+export const Playground = UnderlineNavActionTemplate.bind({})
+Playground.args = {
+  semanticItemType: 'button',
+  label: 'Action',
+  focusElement: false
+}
diff --git a/docs/src/stories/components/Navigation/UnderlineNavItem.stories.jsx b/docs/src/stories/components/Navigation/UnderlineNavItem.stories.jsx
@@ -0,0 +1,140 @@
+import React from 'react'
+import clsx from 'clsx'
+import useToggle from '../../helpers/useToggle.jsx'
+
+export default {
+  title: 'Components/Navigation/UnderlineNav/Item',
+  excludeStories: ['UnderlineNavItemTemplate'],
+  layout: 'padded',
+  argTypes: {
+    selected: {
+      control: {type: 'boolean'},
+      description: 'active nav item',
+      table: {
+        category: 'CSS'
+      }
+    },
+    usesDataContent: {
+      control: {type: 'boolean'},
+      description: 'creates a hidden label to allow for bold text without layout shift',
+      table: {
+        category: 'CSS'
+      }
+    },
+    semanticItemType: {
+      options: ['button', 'link'],
+      control: {
+        type: 'inline-radio'
+      },
+      description: 'item can be a button or a link',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      name: 'label',
+      type: 'string',
+      description: 'Item label text',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set manual focus on tab item',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    icon: {
+      control: {type: 'boolean'},
+      description: 'show icon',
+      table: {
+        category: 'CSS'
+      }
+    },
+    counter: {
+      control: {type: 'boolean'},
+      description: 'show counter',
+      table: {
+        category: 'CSS'
+      }
+    }
+  }
+}
+
+export const UnderlineNavItemTemplate = ({
+  semanticItemType,
+  label,
+  selected,
+  focusElement,
+  icon,
+  counter,
+  usesDataContent
+}) => {
+  const [isSelected, itemisSelected] = useToggle()
+  return (
+    <li className="d-inline-flex">
+      {semanticItemType === 'button' ? (
+        <button
+          className={clsx('UnderlineNav-item', focusElement && 'focus')}
+          role="tab"
+          aria-selected={selected || isSelected ? 'true' : undefined}
+          onClick={itemisSelected}
+        >
+          {icon && (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              className="UnderlineNav-octicon"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z"
+              ></path>
+            </svg>
+          )}
+          <span data-content={usesDataContent ? label : undefined}>{label}</span>
+          {counter && <span class="Counter">10</span>}
+        </button>
+      ) : (
+        <a
+          className={clsx('UnderlineNav-item', focusElement && 'focus')}
+          aria-current={selected || isSelected ? 'true' : undefined}
+          onClick={itemisSelected}
+          //   aria-current={selected ? 'page' : undefined}
+        >
+          {icon && (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              className="UnderlineNav-octicon"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z"
+              ></path>
+            </svg>
+          )}
+          <span data-content={usesDataContent ? label : undefined}>{label}</span>
+          {counter && <span class="Counter">10</span>}
+        </a>
+      )}
+    </li>
+  )
+}
+
+export const Playground = UnderlineNavItemTemplate.bind({})
+Playground.args = {
+  semanticItemType: 'button',
+  label: 'Item',
+  selected: false,
+  focusElement: false,
+  icon: false,
+  counter: false,
+  usesDataContent: true
+}
diff --git a/docs/src/stories/components/Navigation/UnderlineNavPatterns.stories.jsx b/docs/src/stories/components/Navigation/UnderlineNavPatterns.stories.jsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import clsx from 'clsx'
+import {UnderlineNavTemplate} from './UnderlineNav.stories'
+import {UnderlineNavItemTemplate} from './UnderlineNavItem.stories'
+import {UnderlineNavActionTemplate} from './UnderlineNavAction.stories'
+
+export default {
+  title: 'Components/Navigation/UnderlineNav/Features',
+  layout: 'padded'
+}
+
+export const LinkItems = UnderlineNavTemplate.bind({})
+LinkItems.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" selectedusesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+    </>
+  )
+}
+
+export const ButtonItems = UnderlineNavTemplate.bind({})
+ButtonItems.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="button" usesDataContent />
+    </>
+  )
+}
+
+export const NavRight = UnderlineNavTemplate.bind({})
+NavRight.args = {
+  variant: 'UnderlineNav--right',
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+    </>
+  )
+}
+
+export const NavFullWidth = UnderlineNavTemplate.bind({})
+NavFullWidth.args = {
+  variant: 'UnderlineNav--full',
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+    </>
+  )
+}
+
+export const ActionRight = UnderlineNavTemplate.bind({})
+ActionRight.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+    </>
+  ),
+  actionEnd: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
+}
+
+export const ActionLeft = UnderlineNavTemplate.bind({})
+ActionLeft.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" selected usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item" semanticItemType="link" usesDataContent />
+    </>
+  ),
+  actionStart: <UnderlineNavActionTemplate label="Action" semanticItemType="button" />
+}
+
+export const Overflow = UnderlineNavTemplate.bind({})
+Overflow.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item name 1" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 2" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 3" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 4" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 5" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 6" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 7" semanticItemType="link" selected />
+      <UnderlineNavItemTemplate label="Item name 8" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 9" semanticItemType="link" usesDataContent />
+      <UnderlineNavItemTemplate label="Item name 10" semanticItemType="link" usesDataContent />
+    </>
+  )
+}
+
+export const Icons = UnderlineNavTemplate.bind({})
+Icons.args = {
+  children: (
+    <>
+      <UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
+      <UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
+      <UnderlineNavItemTemplate label="Item name" semanticItemType="link" selected icon usesDataContent />
+      <UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
+      <UnderlineNavItemTemplate label="Item name" semanticItemType="link" icon usesDataContent />
+    </>
+  )
+}