Skip to content

Instantly share code, notes, and snippets.

Matt Zabriskie mzabriskie

Block or report user

Report or block mzabriskie

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View Enzyme3Gotchas.md

Enzyme 3 Gotchas

Some things have changed with enzyme 3 that deviate from version 2, and in some cases deviate from what even the enzyme docs suggest. Here's some of the gotchas I came across in upgrading from enzyme 2 to 3.

Accessing the DOM node

React

render () {
  return (
View gist:80df970d54f491fdce8ecab79cf666ee
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class MessageModalBody extends Component {
render () {
return (
<TabList>
<TabPanel title="Score Range">
<MessageForm showScoreFilter={true} />
</TabPanel>
View DialogRefactor.md

Dialog Components Refactor

The purpose of this document is to help define the components that comprise Instructure UI's dialog components. Dialog components typically render outside the context of the application and are the primary focal point when rendered.

This represents a refactor as specified by Jen Stern.

Building Blocks

These are the low-level components needed for dialogs.

View Dialog.md

Dialog Components

The purpose of this document is to help define the components that comprise Instructure UI's dialog components. Dialog components typically render outside the context of the application and are the primary focal point when rendered.

This represents the current state of things.

Building Blocks

These are the low-level components needed for dialogs.

View PortalComponent.markdown

Portal Component Refactor

Proposal for how to refactor InstUI's use of <Portal />.

The Problem

There are several issues with how <Portal /> is currently being used.

  1. We have two versions of <Portal /> in our code base. A version that we wrote ourselves and a version packaged with react-overlays. This causes unecessary overhead.
  2. There are inconsistencies with the developer facing API for how to specify the trigger and the content for components that use a <Portal />. This makes it confusing as the usage of these components is not predictable.
@mzabriskie
mzabriskie / webpack.config.js
Last active Oct 14, 2016
Webpack externals for React
View webpack.config.js
// Which is the best practice for React?
// This needs to be compatible with RequireJS.
module.exports = {
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
// - OR -
@mzabriskie
mzabriskie / index.js
Last active Jun 23, 2016
requirebin sketch
View index.js
// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
'use strict';
/*
Pre Babel
import axios from 'axios'
View FormField.md

Example use of <FormField/>:

<FormField label="Username" errors={['Cannot be left blank']}>
  <input type="text" name="username" value=""/>
</FormField>

This renders something like:

@mzabriskie
mzabriskie / .gitignore
Last active Jul 17, 2017
Releasing ES6 node modules to npm
View .gitignore
build/
node_modules/
You can’t perform that action at this time.