search

Autodesk / orion-ui

UI Components that work seamlessly in multiple UI frameworks
https://goo.gl/shxHPB
Other
22 stars 6 forks source link

Add Icon Button #272

Closed unitedempire closed 7 years ago

unitedempire commented 7 years ago 
As a developer
I want to add Icon Button to my application
So that I can provide Button with an Icon to our user

Typical usage

<IconButton
  disabled={false}
  icon="gear"
  onClick={this.clickHandler}
  title="Engage"
/>

Complete props

Button.propTypes = {
  disabled: PropTypes.bool
  icon: PropTypes.oneOf(Button.hig.ICONS),
  link: PropTypes.string,
  onBlur: PropTypes.func,
  onClick: PropTypes.func,
  onFocus: PropTypes.func,
  onHover: PropTypes.func,
  title: PropTypes.string
}

TODO

aneyzberg commented 7 years ago

canary build - 1.0.3-alpha.a0976bfe completed by #290

camwest commented 7 years ago

Using 1.0.3-alpha.e53f44b5 I get the following error when trying to create an IconButton:

          <IconButton
            title="Engage"
            disabled={false}
            icon="gear"
            onClick={() => alert('clicked')}
×
TypeError: Cannot read property '_interface' of undefined
IconButton.HIGElement
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:6986
  6983 | this.initialProps = initialProps;
  6984 | this.props = initialProps;
  6985 | 
> 6986 | var _partitionProps = partitionProps(initialProps, HIGConstructor._interface),
  6987 |     defaults$$1 = _partitionProps.defaults,
  6988 |     events = _partitionProps.events,
  6989 |     possibleEvents = _partitionProps.possibleEvents;
View compiled
new IconButton
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:10989
  10986 | 
  10987 | function IconButton(initialProps) {
  10988 |   classCallCheck(this, IconButton);
> 10989 |   return possibleConstructorReturn(this, (IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call(this, undefined, initialProps));
  10990 | }
  10991 | 
  10992 | createClass(IconButton, [{
View compiled
new Adapter
node_modules/@orion-ui/react-hig/lib/react-hig.es.js:7255
  7252 |   if (context.parent) {
  7253 |     _this.instance = context.parent.createElement(ElementConstructor, props);
  7254 |   } else {
> 7255 |     _this.instance = new ElementConstructor(props);
  7256 |   }
  7257 |   return _this;
  7258 | }
View compiled
(anonymous function)
node_modules/react-dom/lib/ReactCompositeComponent.js:294
  291 | if (doConstruct) {
  292 |   if (process.env.NODE_ENV !== 'production') {
  293 |     return measureLifeCyclePerf(function () {
> 294 |       return new Component(publicProps, publicContext, updateQueue);
  295 |     }, this._debugID, 'ctor');
  296 |   } else {
  297 |     return new Component(publicProps, publicContext, updateQueue);
View compiled
measureLifeCyclePerf
node_modules/react-dom/lib/ReactCompositeComponent.js:75
  72 | 
  73 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
  74 | try {
> 75 |   return fn();
  76 | } finally {
  77 |   ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
  78 | }
View compiled
ReactCompositeComponentWrapper._constructComponentWithoutOwner
node_modules/react-dom/lib/ReactCompositeComponent.js:293
  290 | 
  291 | if (doConstruct) {
  292 |   if (process.env.NODE_ENV !== 'production') {
> 293 |     return measureLifeCyclePerf(function () {
  294 |       return new Component(publicProps, publicContext, updateQueue);
  295 |     }, this._debugID, 'ctor');
  296 |   } else {
View compiled
ReactCompositeComponentWrapper._constructComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:279
  276 | if (process.env.NODE_ENV !== 'production') {
  277 |   ReactCurrentOwner.current = this;
  278 |   try {
> 279 |     return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
  280 |   } finally {
  281 |     ReactCurrentOwner.current = null;
  282 |   }
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:187
  184 | 
  185 | // Initialize the public class
  186 | var doConstruct = shouldConstruct(Component);
> 187 | var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
  188 | var renderedElement;
  189 | 
  190 | // Support functional components
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactDOMComponent.mountChildren
node_modules/react-dom/lib/ReactMultiChild.js:236
  233 |   if (process.env.NODE_ENV !== 'production') {
  234 |     selfDebugID = getDebugID(this);
  235 |   }
> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
  237 |   child._mountIndex = index++;
  238 |   mountImages.push(mountImage);
  239 | }
View compiled
ReactDOMComponent._createInitialChildren
node_modules/react-dom/lib/ReactDOMComponent.js:703
  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
  701 |   }
  702 | } else if (childrenToUse != null) {
> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
  704 |   for (var i = 0; i < mountImages.length; i++) {
  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
  706 |   }
View compiled
ReactDOMComponent.mountComponent
node_modules/react-dom/lib/ReactDOMComponent.js:522
  519 |   }
  520 |   this._updateDOMProperties(null, props, transaction);
  521 |   var lazyTree = DOMLazyTree(el);
> 522 |   this._createInitialChildren(transaction, props, context, lazyTree);
  523 |   mountImage = lazyTree;
  524 | } else {
  525 |   var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactDOMComponent.mountChildren
node_modules/react-dom/lib/ReactMultiChild.js:236
  233 |   if (process.env.NODE_ENV !== 'production') {
  234 |     selfDebugID = getDebugID(this);
  235 |   }
> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
  237 |   child._mountIndex = index++;
  238 |   mountImages.push(mountImage);
  239 | }
View compiled
ReactDOMComponent._createInitialChildren
node_modules/react-dom/lib/ReactDOMComponent.js:703
  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
  701 |   }
  702 | } else if (childrenToUse != null) {
> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
  704 |   for (var i = 0; i < mountImages.length; i++) {
  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
  706 |   }
View compiled
ReactDOMComponent.mountComponent
node_modules/react-dom/lib/ReactDOMComponent.js:522
  519 |   }
  520 |   this._updateDOMProperties(null, props, transaction);
  521 |   var lazyTree = DOMLazyTree(el);
> 522 |   this._createInitialChildren(transaction, props, context, lazyTree);
  523 |   mountImage = lazyTree;
  524 | } else {
  525 |   var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:370
  367 | );
  368 | this._renderedComponent = child;
  369 | 
> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
  371 | 
  372 | if (process.env.NODE_ENV !== 'production') {
  373 |   if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:257
  254 | if (inst.unstable_handleError) {
  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
  256 | } else {
> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
  258 | }
  259 | 
  260 | if (inst.componentDidMount) {
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:370
  367 | );
  368 | this._renderedComponent = child;
  369 | 
> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
  371 | 
  372 | if (process.env.NODE_ENV !== 'production') {
  373 |   if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:257
  254 | if (inst.unstable_handleError) {
  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
  256 | } else {
> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
  258 | }
  259 | 
  260 | if (inst.componentDidMount) {
View compiled
Object.mountComponent
node_modules/react-dom/lib/ReactReconciler.js:45
  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
  43 |   }
  44 | }
> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
  48 | }
View compiled
mountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:104
  101 |   console.time(markerName);
  102 | }
  103 | 
> 104 | var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID */
  105 | );
  106 | 
  107 | if (markerName) {
View compiled
ReactReconcileTransaction.perform
node_modules/react-dom/lib/Transaction.js:143
  140 |   // one of these calls threw.
  141 |   errorThrown = true;
  142 |   this.initializeAll(0);
> 143 |   ret = method.call(scope, a, b, c, d, e, f);
  144 |   errorThrown = false;
  145 | } finally {
  146 |   try {
View compiled
batchedMountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:126
  123 |   var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
  124 |   /* useCreateElement */
  125 |   !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
> 126 |   transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
  127 |   ReactUpdates.ReactReconcileTransaction.release(transaction);
  128 | }
  129 | 
View compiled
ReactDefaultBatchingStrategyTransaction.perform
node_modules/react-dom/lib/Transaction.js:143
  140 |   // one of these calls threw.
  141 |   errorThrown = true;
  142 |   this.initializeAll(0);
> 143 |   ret = method.call(scope, a, b, c, d, e, f);
  144 |   errorThrown = false;
  145 | } finally {
  146 |   try {
View compiled
Object.batchedUpdates
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62
  59 |     if (alreadyBatchingUpdates) {
  60 |       return callback(a, b, c, d, e);
  61 |     } else {
> 62 |       return transaction.perform(callback, null, a, b, c, d, e);
  63 |     }
  64 |   }
  65 | };
View compiled
Object.batchedUpdates
node_modules/react-dom/lib/ReactUpdates.js:97
   94 | 
   95 | function batchedUpdates(callback, a, b, c, d, e) {
   96 |   ensureInjected();
>  97 |   return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
   98 | }
   99 | 
  100 | /**
View compiled
Object._renderNewRootComponent
node_modules/react-dom/lib/ReactMount.js:319
  316 | // rendering, in componentWillMount or componentDidMount, will be batched
  317 | // according to the current batching strategy.
  318 | 
> 319 | ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
  320 | 
  321 | var wrapperID = componentInstance._instance.rootID;
  322 | instancesByReactRootID[wrapperID] = componentInstance;
View compiled
Object._renderSubtreeIntoContainer
node_modules/react-dom/lib/ReactMount.js:401
  398 | }
  399 | 
  400 | var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
> 401 | var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
  402 | if (callback) {
  403 |   callback.call(component);
  404 | }
View compiled
Object.render
node_modules/react-dom/lib/ReactMount.js:422
  419 |  * @return {ReactComponent} Component instance rendered in `container`.
  420 |  */
  421 | render: function (nextElement, container, callback) {
> 422 |   return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
  423 | },
  424 | 
  425 | /**
View compiled
Object../src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.