Skip to content

Commit 710e4f8

Browse files
author
Pat Renner
committed
upgrade to instui v7
closes OUT-4520 test-plan: - open down demo app before fetching this PS - fetch this PS; rebuild ui container (dc build --no-cache ui) - ensure demo app loads and looks the same as the non-upgraded version Change-Id: I064463f55f603b85d108b86251b9f6b003c39835 Reviewed-on: https://gerrit.instructure.com/c/outcomes-ui/+/267762 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: Chrystal Langston <[email protected]> Reviewed-by: Augusto Callejas <[email protected]> QA-Review: Brian Watson <[email protected]> Product-Review: Augusto Callejas <[email protected]>
1 parent 0d959af commit 710e4f8

File tree

30 files changed

+8094
-6483
lines changed

30 files changed

+8094
-6483
lines changed

‎package.json

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,37 @@
2828
},
2929
"dependencies": {
3030
"@instructure/redux-service-middleware": "^1.0.0",
31-
"@instructure/ui-a11y": "^6.17.0",
32-
"@instructure/ui-billboard": "^6.17.0",
33-
"@instructure/ui-buttons": "^6.17.0",
34-
"@instructure/ui-color-utils": "^6.17.0",
35-
"@instructure/ui-elements": "^6.17.0",
36-
"@instructure/ui-flex": "^6.17.0",
37-
"@instructure/ui-focusable": "^6.17.0",
38-
"@instructure/ui-forms": "^6.17.0",
39-
"@instructure/ui-icons": "^6.17.0",
40-
"@instructure/ui-layout": "^6.17.0",
41-
"@instructure/ui-list": "^6.17.0",
42-
"@instructure/ui-modal": "^6.17.0",
43-
"@instructure/ui-overlays": "^6.17.0",
44-
"@instructure/ui-pagination": "^6.17.0",
45-
"@instructure/ui-progress": "^6.17.0",
46-
"@instructure/ui-spinner": "^6.17.0",
47-
"@instructure/ui-text-input": "^6.17.0",
48-
"@instructure/ui-themeable": "^6.17.0",
49-
"@instructure/ui-themes": "^6.17.0",
50-
"@instructure/ui-tree-browser": "^6.17.0",
51-
"@instructure/ui-truncate-text": "^6.17.0",
52-
"@instructure/ui-view": "^6.17.0",
31+
"@instructure/ui-a11y-content": "^7",
32+
"@instructure/ui-a11y-utils": "^7",
33+
"@instructure/ui-avatar": "^7",
34+
"@instructure/ui-billboard": "^7",
35+
"@instructure/ui-buttons": "^7",
36+
"@instructure/ui-checkbox": "^7",
37+
"@instructure/ui-color-utils": "^7",
38+
"@instructure/ui-flex": "^7",
39+
"@instructure/ui-focusable": "^7",
40+
"@instructure/ui-form-field": "^7",
41+
"@instructure/ui-heading": "^7",
42+
"@instructure/ui-icons": "^7",
43+
"@instructure/ui-link": "^7",
44+
"@instructure/ui-list": "^7",
45+
"@instructure/ui-modal": "^7",
46+
"@instructure/ui-overlays": "^7",
47+
"@instructure/ui-pagination": "^7",
48+
"@instructure/ui-pill": "^7",
49+
"@instructure/ui-progress": "^7",
50+
"@instructure/ui-spinner": "^7",
51+
"@instructure/ui-table": "^7",
52+
"@instructure/ui-tag": "^7",
53+
"@instructure/ui-text": "^7",
54+
"@instructure/ui-text-input": "^7",
55+
"@instructure/ui-themeable": "^7",
56+
"@instructure/ui-themes": "^7",
57+
"@instructure/ui-tooltip": "^7",
58+
"@instructure/ui-tray": "^7",
59+
"@instructure/ui-tree-browser": "^7",
60+
"@instructure/ui-truncate-text": "^7",
61+
"@instructure/ui-view": "^7",
5362
"classnames": "^2.2.5",
5463
"core-js": "^3.2.1",
5564
"format-message": "^6.2.1",
@@ -76,14 +85,14 @@
7685
"devDependencies": {
7786
"@babel/cli": "^7.0.0",
7887
"@babel/core": "^7.0.0",
79-
"@instructure/canvas-high-contrast-theme": "^6.17.0",
80-
"@instructure/canvas-theme": "^6.17.0",
81-
"@instructure/ui-alerts": "^6.17.0",
82-
"@instructure/ui-babel-preset": "^6.17.0",
83-
"@instructure/ui-eslint-config": "^6.17.0",
84-
"@instructure/ui-select": "^6.17.0",
85-
"@instructure/ui-tabs": "^6.17.0",
86-
"@instructure/ui-webpack-config": "^6.17.0",
88+
"@instructure/canvas-high-contrast-theme": "^7",
89+
"@instructure/canvas-theme": "^7",
90+
"@instructure/ui-alerts": "^7",
91+
"@instructure/ui-babel-preset": "^7",
92+
"@instructure/ui-eslint-config": "^7",
93+
"@instructure/ui-simple-select": "^7",
94+
"@instructure/ui-tabs": "^7",
95+
"@instructure/ui-webpack-config": "^7",
8796
"@storybook/addon-actions": "^5.3.10",
8897
"@storybook/addon-knobs": "^5.3.11",
8998
"@storybook/addon-links": "^5.3.10",

‎src/components/Alignment/index.js

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import t from 'format-message'
22
import React from 'react'
33
import PropTypes from 'prop-types'
44
import { Button } from '@instructure/ui-buttons'
5-
import { Link, Text } from '@instructure/ui-elements'
5+
import { Text } from '@instructure/ui-text'
6+
import { Link } from '@instructure/ui-link'
67
import { IconTrashLine, IconOutcomesLine } from '@instructure/ui-icons'
7-
import { View } from '@instructure/ui-layout'
8+
import { View } from '@instructure/ui-view'
89
import { themeable } from '@instructure/ui-themeable'
910
import OutcomeViewModal from '../OutcomeViewModal'
1011
import theme from '../theme'
@@ -26,20 +27,20 @@ export default class Alignment extends React.Component {
2627
artifactTypeName: PropTypes.string,
2728
displayMasteryDescription: PropTypes.bool,
2829
displayMasteryPercentText: PropTypes.bool,
29-
scope: PropTypes.string.isRequired,
30+
scope: PropTypes.string.isRequired
3031
}
3132

3233
static defaultProps = {
3334
artifactTypeName: null,
3435
displayMasteryDescription: false,
35-
displayMasteryPercentText: false,
36+
displayMasteryPercentText: false
3637
}
3738

38-
focus () {
39+
focus() {
3940
this.focusLink.focus()
4041
}
4142

42-
render () {
43+
render() {
4344
const {
4445
outcome,
4546
removeAlignment,
@@ -52,12 +53,16 @@ export default class Alignment extends React.Component {
5253
readOnly,
5354
scope
5455
} = this.props
55-
const removeMessage = t({
56-
default: 'Remove {title}',
57-
description: 'Screen reader caption for button that removes an alignment'
58-
}, {
59-
title: outcome.title
60-
})
56+
const removeMessage = t(
57+
{
58+
default: 'Remove {title}',
59+
description:
60+
'Screen reader caption for button that removes an alignment'
61+
},
62+
{
63+
title: outcome.title
64+
}
65+
)
6166
return (
6267
<li className={styles.item} data-automation="outcomeAlignment__item">
6368
<span className={styles.outcome}>
@@ -68,24 +73,26 @@ export default class Alignment extends React.Component {
6873
<span className={styles.link}>
6974
<span className={styles.linkText}>
7075
<span className={styles.innerLinkText}>
71-
<View as='div' margin='xx-small'>
76+
<View as="div" margin="xx-small">
7277
<Link
7378
onClick={viewAlignment}
74-
ref={(link) => { this.focusLink = link }} // eslint-disable-line immutable/no-mutation
79+
ref={(link) => {
80+
this.focusLink = link
81+
}} // eslint-disable-line immutable/no-mutation
7582
>
7683
<Text weight="bold">{outcome.title}</Text>
7784
</Link>
7885
</View>
7986
</span>
8087
</span>
8188
</span>
82-
{!readOnly &&
89+
{!readOnly && (
8390
<span className={styles.delete} data-automation="alignment-delete">
8491
<Button variant="icon" onClick={removeAlignment}>
8592
<IconTrashLine title={removeMessage} />
8693
</Button>
8794
</span>
88-
}
95+
)}
8996
<OutcomeViewModal
9097
outcome={outcome}
9198
closeAlignment={closeAlignment}

‎src/components/AlignmentButton/AlignmentItem/index.js

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import t from 'format-message'
44
import { IconButton } from '@instructure/ui-buttons'
5-
import { Text } from '@instructure/ui-elements'
5+
import { Text } from '@instructure/ui-text'
66
import { IconTrashLine } from '@instructure/ui-icons'
77
import { themeable } from '@instructure/ui-themeable'
88
import OutcomeDescription from '../../OutcomeDescription'
@@ -23,21 +23,27 @@ export default class AlignmentItem extends React.Component {
2323
readOnly: false
2424
}
2525

26-
focus () {
26+
focus() {
2727
this.focusLink.focus()
2828
}
2929

3030
renderDeleteButton() {
3131
const { outcome, removeAlignment, readOnly } = this.props
32-
if(!readOnly) {
32+
if (!readOnly) {
3333
return (
34-
<span className={styles.deleteButton} data-automation='outcomeAlignmentItem__delete'>
34+
<span
35+
className={styles.deleteButton}
36+
data-automation="outcomeAlignmentItem__delete"
37+
>
3538
<IconButton
3639
withBackground={false}
3740
withBorder={false}
3841
screenReaderLabel={t(`Remove ${outcome.title}`)}
39-
elementRef={(link) => { this.focusLink = link }} // eslint-disable-line immutable/no-mutation
40-
onClick={removeAlignment} >
42+
elementRef={(link) => {
43+
this.focusLink = link
44+
}} // eslint-disable-line immutable/no-mutation
45+
onClick={removeAlignment}
46+
>
4147
<IconTrashLine />
4248
</IconButton>
4349
</span>
@@ -49,10 +55,15 @@ export default class AlignmentItem extends React.Component {
4955
const { outcome } = this.props
5056
return (
5157
<React.Fragment>
52-
<Text size="small">{ outcome.label }</Text>
53-
<div className={styles.outcomeTitle} data-automation='outcomeAlignmentItem__title'>
54-
<Text weight="bold" size="small">{ outcome.title }</Text>
55-
{ this.renderDeleteButton() }
58+
<Text size="small">{outcome.label}</Text>
59+
<div
60+
className={styles.outcomeTitle}
61+
data-automation="outcomeAlignmentItem__title"
62+
>
63+
<Text weight="bold" size="small">
64+
{outcome.title}
65+
</Text>
66+
{this.renderDeleteButton()}
5667
</div>
5768
<OutcomeDescription description={outcome.description} />
5869
</React.Fragment>

‎src/components/AlignmentButton/index.js

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import t from 'format-message'
4-
import { AccessibleContent } from '@instructure/ui-a11y'
4+
import { AccessibleContent } from '@instructure/ui-a11y-content'
55
import { Button } from '@instructure/ui-buttons'
6-
import { Text } from '@instructure/ui-elements'
6+
import { Text } from '@instructure/ui-text'
77
import { IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons'
88
import { List } from '@instructure/ui-list'
99
import { themeable } from '@instructure/ui-themeable'
@@ -27,7 +27,7 @@ export default class AlignmentButton extends React.Component {
2727
onUpdate: PropTypes.func,
2828
screenreaderNotification: PropTypes.func,
2929
liveRegion: OutcomePickerModal.propTypes.liveRegion,
30-
readOnly: PropTypes.bool.isRequired,
30+
readOnly: PropTypes.bool.isRequired
3131
}
3232

3333
static defaultProps = {
@@ -39,7 +39,7 @@ export default class AlignmentButton extends React.Component {
3939
readOnly: false
4040
}
4141

42-
componentDidUpdate (oldProps) {
42+
componentDidUpdate(oldProps) {
4343
const { alignedOutcomes } = this.props
4444
if (oldProps.alignedOutcomes.length && !alignedOutcomes.length) {
4545
if (this.align) {
@@ -48,24 +48,31 @@ export default class AlignmentButton extends React.Component {
4848
}
4949
}
5050

51-
handleRemoveAlignment (removedOutcome, index) {
51+
handleRemoveAlignment(removedOutcome, index) {
5252
const { removeAlignment, onUpdate, alignedOutcomes } = this.props
5353
removeAlignment(removedOutcome.id, onUpdate, true)
54-
this.props.screenreaderNotification(t('{label} alignment removed', {label: removedOutcome.label}))
54+
this.props.screenreaderNotification(
55+
t('{label} alignment removed', { label: removedOutcome.label })
56+
)
5557
const priorListItem = this[`position${index - 1}`]
5658
if (priorListItem) {
5759
priorListItem.focus()
5860
} else if (alignedOutcomes.length > 0) {
5961
const nextListItem = this[`position${index + 1}`]
60-
if (nextListItem) { nextListItem.focus() }
62+
if (nextListItem) {
63+
nextListItem.focus()
64+
}
6165
}
6266
}
6367

6468
renderHeader = () => {
6569
const { readOnly, alignedOutcomes } = this.props
66-
if(!readOnly || alignedOutcomes.length) {
70+
if (!readOnly || alignedOutcomes.length) {
6771
return (
68-
<div className={styles.line} data-automation='outcomeLabel__alignedOutcomes'>
72+
<div
73+
className={styles.line}
74+
data-automation="outcomeLabel__alignedOutcomes"
75+
>
6976
<Text size="medium">
7077
<div className={styles.spacing}>
7178
<IconOutcomesLine />
@@ -86,12 +93,16 @@ export default class AlignmentButton extends React.Component {
8693
const { alignedOutcomes, readOnly } = this.props
8794
return (
8895
<List isUnstyled margin="small 0" delimiter="solid">
89-
{ alignedOutcomes.map((outcome, index) => {
96+
{alignedOutcomes.map((outcome, index) => {
9097
return (
9198
<List.Item margin="small 0" key={outcome.id}>
9299
<AlignmentItem
93-
removeAlignment={() => this.handleRemoveAlignment(outcome, index)}
94-
ref={(o) => { this[`position${index}`] = o }} // eslint-disable-line immutable/no-mutation
100+
removeAlignment={() =>
101+
this.handleRemoveAlignment(outcome, index)
102+
}
103+
ref={(o) => {
104+
this[`position${index}`] = o
105+
}} // eslint-disable-line immutable/no-mutation
95106
outcome={outcome}
96107
readOnly={readOnly}
97108
/>
@@ -106,9 +117,9 @@ export default class AlignmentButton extends React.Component {
106117
const {
107118
pickerProps,
108119
scope,
109-
tray : OutcomeTray,
120+
tray: OutcomeTray,
110121
liveRegion,
111-
screenreaderNotification,
122+
screenreaderNotification
112123
} = this.props
113124
return (
114125
<OutcomeTray
@@ -123,11 +134,13 @@ export default class AlignmentButton extends React.Component {
123134

124135
renderButton = () => {
125136
const { openOutcomePicker, readOnly } = this.props
126-
if(!readOnly) {
137+
if (!readOnly) {
127138
return (
128139
<div className={styles.button}>
129140
<Button
130-
ref={(d) => { this.align = d }} // eslint-disable-line immutable/no-mutation
141+
ref={(d) => {
142+
this.align = d
143+
}} // eslint-disable-line immutable/no-mutation
131144
icon={IconPlusLine}
132145
onClick={openOutcomePicker}
133146
data-automation="alignmentButton__button"
@@ -144,10 +157,10 @@ export default class AlignmentButton extends React.Component {
144157
render() {
145158
return (
146159
<React.Fragment>
147-
{ this.renderHeader() }
148-
{ this.renderAlignmentList() }
149-
{ this.renderButton() }
150-
{ this.renderTray() }
160+
{this.renderHeader()}
161+
{this.renderAlignmentList()}
162+
{this.renderButton()}
163+
{this.renderTray()}
151164
</React.Fragment>
152165
)
153166
}

0 commit comments

Comments
 (0)