helixdesignsystem/helix-react

React components to wrap HelixUI Components.

helix-react's Issues

FileIcon

<FileIcon/> component to wrap HelixUI <hx-file-icon> element.

Configure Storybook

As a Consumer, I would like to have documentation around how to consume helix-react components, so that I can use them in my application.

As a Developer, I would like to have documentation that automatically updates, so that I can build components easier.

FileTile

<FileTile/> component to wrap cancel, delete, and retry events from the HelixUI <hx-file-tile> element.

Contribution Guidelines

Document contribution guidelines

• core maintainers
• review process
• etc.

Testing Slack

Search

<Search/> component to wrap blur, clear, focus, and input events from the HelixUI <hx-search> element.

Panel

<Panel/> component to wrap HelixUI Panels.

Automated Continuous Integration

• TravisCI/CircleCI/other
• Enzyme
• etc.

Popover

<Popover/> component to wrap open and close events from the HelixUI <hx-popover> element.

Initialize Standards Docs in Wiki

• naming
  • No Prefixes
    • yes: Alert, Menu, Button, etc.
    • no: HXAlert, HxMenu, Hxbutton, etc.
• file/code structure
• tabs vs spaces
• etc.

Disclosure

<Disclosure/> component to wrap HelixUI <hx-disclosure> element.

Automated Continuous Deployment

• master branch
  • deploy manually for each release
  • documentation updates
  • src updates
  • test updates
• netlify branch
  • automatically deploy when PR merged
  • documentation updates only

Reveal

<Reveal/> component to wrap open and close events from the HelixUI <hx-reveal> element.

Tab

<Tab/> component to wrap the HelixUI <hx-tab> element.

Roadmap

Tentative Roadmap

Phase 0

• Document contribution guidelines (core maintainers, review process, etc.)
• Initialize Wiki to document standards (naming, structure, tabs vs spaces, etc.)
• Prototype dev pipeline (How will a contributor add/update features?)
  • Build with TypeScript to export HelixUI type definitions?
  • React storybook (or equivalent library) to easily publish component documentation

Phase 1

• Finalize dev pipeline
• Publish component documentation
• Build component for every HelixUI element that emits custom events (see "Custom Elements" docs at https://rackerlabs.github.io/helix-ui)
• CI/CD Pipeline (Travis/CircleCI, Enzyme, etc.)

Phase 2

• Build components for CSS-based HelixUI components (e.g., radio, select, pagination, etc.)

ChoiceTile

<ChoiceTile/> React component to wrap HelixUI Choice Tiles.

MenuItem

<MenuItem/> component to wrap HelixUI <hx-menuitem> element.

Badge

<Badge/> component to wrap HelixUI Badges.

Toast

<Toast/> component to wrap dismiss and submit events from the HelixUI <hx-toast> element.

JSX Removes Necessary Whitespace

See HelixDesignSystem/helix-ui#283 for details.

Problem

There are several cases where white space is necessary to apply HelixUI styles to inline elements.
JSX removes inline whitespace if element nodes are defined on separate physical lines than non-element nodes within JSX source code.

TL;DR

This JSX template

return (
  <button className="hxBtn">
    Text Node
    <hx-icon type="filter"></hx-icon>
  </button>
)

renders to

<button class="hxBtn">Text Node<hx-icon type="filter"></hx-icon></button>

However, JSX stripped significant whitespace between the text node and the <hx-icon> that CSS expects to be present in order to distance the icon properly from the text.

Solution

When building React components, strategically add white-space-only text nodes into JSX templates using the { " " } syntax.

This JSX template

return (
  <button className="hxBtn">
    Text Node
    { " " }
    <hx-icon type="filter"></hx-icon>
  </button>
)

renders to

  <button class="hxBtn">Text Node <hx-icon type="filter"></hx-icon></button>

This time, JSX inserts the needed white space between the text node and <hx-icon> element.

Checkbox

<Checkbox/> component to wrap change event from the HelixUI <hx-checkbox> element.

• Keep in mind that the <hx-checkbox> element will eventually be replaced with semantic HTML for integration into Helix-styled forms.

Initialize Rollup

As a Developer, I would like to run a command to generate distributable assets, so that I don't have to build them manually.

---

• Generate in CommonJS format, for Node consumption.

Pill

<Pill/> component to wrap dismiss event from the HelixUI <hx-pill> element.

DescriptionList

<DescriptionList/> component to wrap HelixUI Description Lists.

Breadcrumbs

<Breadcrumbs/> React component to wrap HelixUI Breadcrumbs.

SearchAssistance

<SearchAssistance/> component to wrap open and close events from the HelixUI <hx-search-assistance> element.

TabContent

<TabContent/> component to wrap the HelixUI <hx-tabcontent> element.

AccordionPanel

<AccordionPanel/> component to wrap open and close events from the HelixUI <hx-accordion-panel> element.

Initialize NPM package

@helix-design-system/helix-react

Depends on #8

Navigation

<Navigation/> component to wrap HelixUI Navigation.

Initialize testing logic.

• Unit testing react components.

Finalize dev pipeline

Menu

<Menu/> component to wrap open and close events from the HelixUI <hx-menu> element.

Pagination

<Pagination/> component to wrap HelixUI Pagination.

Error

<Error/> component to wrap HelixUI <hx-error> element.

Busy

<Busy/> component to wrap HelixUI <hx-busy> element.

Tile

<Tile/> component to wrap the HelixUI <hx-tile> element.

TabList

<TabList/> component to wrap the HelixUI <hx-tablist> element.

Dev Pipeline

As a developer, I would like to know how to set up my local dev environment, so that I can contribute updates as fast as possible.

---

• Netlify should only deploy documentation on merges to release branch (not master).
• Linting should run automatically as contributors develop locally
  • all messages should be warnings to the developer
• Linting should run automatically on PR submit/update
  • any linting issues should immediately fail PR validation

TabSet

<TabSet/> component to wrap tabchange event from the HelixUI <hx-tabset> element.

FileInput

<FileInput/> component to wrap <hx-file-input> element.

• This may or may not need to absorb click events from <hx-file-input>.

Accordion

<Accordion/> component to wrap panelchange event from the HelixUI <hx-accordion> element.

Grid

<Row/> component to wrap .hxRow containers.

<Col/> component to wrap .hxCol, .hxSpan-*, .hxOffset-*, and .hxOrder-* classes.

See https://helix-ui.netlify.com/components/grid/

Modal

<Modal/> component to wrap open and close events from the HelixUI <hx-modal> element.

Tooltip

<Tooltip/> component to wrap open and close events from the HelixUI <hx-tooltip> element.

Alert

<Alert/> component to wrap dismiss and submit events from the HelixUI <hx-alert> element.

TabPanel

<TabPanel/> component to wrap open and close events from the HelixUI <hx-tabpanel> element.

HelixApp

<HelixApp/> component to wrap layout of Helix app content.

<div id="app"><!-- mount React app here -->
  <div id="stage">
    <!-- (optional) Product Navigation -->
    <nav id="nav">...</nav>

    <!-- (optional) Left Rail -->
    <aside class="hxSiderail">...</aside>

    <main id="content">
      <!-- Application Content goes here -->
    </main>

    <!-- (optional) Right Rail -->
    <aside class="hxSiderail">...</aside>
  </div>
</div>

See https://helix-ui.netlify.com/components/layouts/#stage-area

Initial Netlify Configuration

• helix-react.netlify.com
• PR Deploy Previews
• No automatic deploys

Progress

<Progress/> component to wrap the HelixUI <hx-progress> element.