Install button states #330
Conversation
| render() { | ||
| const { addonState, downloadProgressPercent } = this.props; | ||
| const installed = addonState === INSTALLED && | ||
| addonState !== UNINSTALLED; |
There was a problem hiding this comment.
This looks like it should just be addonState === INSTALLED.
muffinresearch
force-pushed
the
install-buttons-states
branch
from
6de755e to
9a862ab
Compare
| downloading: isDownloading, | ||
| installed, | ||
| installing: addonState === INSTALLING, | ||
| uninstalling: addonState === UNINSTALLING, |
There was a problem hiding this comment.
I figured we'd do something like const switchClasses = switch switch-state-${addonState};.
There was a problem hiding this comment.
Yeah or just this would work. I don't have a class for unknown but that doesn't really matter.
const switchClasses = `switch ${addonState}`;
There was a problem hiding this comment.
I'm going to make the tests simpler now in light of that change.
| const root = findDOMNode(button); | ||
| const checkbox = root.querySelector('input[type=checkbox]'); | ||
| assert.equal(checkbox.checked, false); | ||
| assert.notInclude(root.getAttribute('class'), 'installed'); |
There was a problem hiding this comment.
I think these would be better off using assert(!root.classList.contains('installed')) since if this had an uninstalled or not-installed or whatever class this would fail.
|
I find Looks really good! r+wc |
muffinresearch
force-pushed
the
install-buttons-states
branch
from
9a862ab to
6b5ba56
Compare
Yeah I know what you mean. This was something of a conscious decision since |
Fixes: mozilla/addons#9564
Sets-up the UI for the various installation states
Download progress works via generated attribute selectors. We'll need to see how this works in practice - if the perf is bad or we want to reduce the stylesheet weight we could look to manipulating the style properties (not style attributes) via the DOM directly as this won't cause any problems with CSP.
I left out cancelled and error states because it's unclear if we're going to need them on this component. If we need them we can add them in later.