update designs of TheradingToolbar

fixes VICE-1235
flag=none

InstUI had a few hidden gems, this switches us to use them

test plan:
  - open storybook
  - components should more closely match the original updated
    designs

qa risk: low

Change-Id: Ibd68ec64a764d4c93132d934e4eb94ca0d4f7c26
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/261328
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Chawn Neal <chawn.neal@instructure.com>
QA-Review: Chawn Neal <chawn.neal@instructure.com>
Product-Review: Chawn Neal <chawn.neal@instructure.com>

app/jsx/discussion_posts/components/ThreadingToolbar/Expansion.js

@@ -19,12 +19,12 @@
 import I18n from 'i18n!conversations_2'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {Button} from '@instructure/ui-buttons'
+import {CondensedButton} from '@instructure/ui-buttons'
 import {ScreenReaderContent} from '@instructure/ui-a11y-content'
 
 export function Expansion({...props}) {
   return (
-    <Button
+    <CondensedButton
       onClick={props.onClick}
       withBackground={false}
       color="primary"
@@ -36,7 +36,7 @@ export function Expansion({...props}) {
           : I18n.t('Expand discussion thread')}
       </ScreenReaderContent>
       {props.expandText}
-    </Button>
+    </CondensedButton>
   )
 }
 

app/jsx/discussion_posts/components/ThreadingToolbar/Like.js

@@ -19,13 +19,13 @@
 import I18n from 'i18n!conversations_2'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {Button} from '@instructure/ui-buttons'
+import {CondensedButton} from '@instructure/ui-buttons'
 import {IconLikeLine, IconLikeSolid} from '@instructure/ui-icons'
 import {ScreenReaderContent, PresentationContent} from '@instructure/ui-a11y-content'
 
 export function Like({...props}) {
   return (
-    <Button
+    <CondensedButton
       renderIcon={
         props.isLiked ? (
           <IconLikeSolid data-testid="liked-icon" />
@@ -49,7 +49,7 @@ export function Like({...props}) {
           </ScreenReaderContent>
         </>
       )}
-    </Button>
+    </CondensedButton>
   )
 }
 

app/jsx/discussion_posts/components/ThreadingToolbar/Reply.js

@@ -19,13 +19,13 @@
 import I18n from 'i18n!conversations_2'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {Button} from '@instructure/ui-buttons'
+import {CondensedButton} from '@instructure/ui-buttons'
 
 export function Reply({...props}) {
   return (
-    <Button onClick={props.onClick} withBackground={props.withBackground} color="primary">
+    <CondensedButton onClick={props.onClick} withBackground={props.withBackground} color="primary">
       {I18n.t('Reply')}
-    </Button>
+    </CondensedButton>
   )
 }
 

app/jsx/discussion_posts/components/ThreadingToolbar/ThreadingToolbar.js

@@ -18,18 +18,18 @@
 
 import PropTypes from 'prop-types'
 import React from 'react'
-import {Flex} from '@instructure/ui-flex'
+import {InlineList} from '@instructure/ui-list'
 import {Reply} from './Reply'
 import {Like} from './Like'
 import {Expansion} from './Expansion'
 
 export function ThreadingToolbar({...props}) {
   return (
-    <Flex>
+    <InlineList delimiter="pipe">
       {React.Children.map(props.children, c => (
-        <Flex.Item margin="0 xx-small">{c}</Flex.Item>
+        <InlineList.Item>{c}</InlineList.Item>
       ))}
-    </Flex>
+    </InlineList>
   )
 }