fix: Status indicators should appear as a pill badge

bcgov · Sep 17, 2020 · dfbb19c · dfbb19c
1 parent bdd8f02
commit dfbb19c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/app/containers/Applications/ApplicationRevisionStatusContainer.tsx b/app/containers/Applications/ApplicationRevisionStatusContainer.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Row, Col, Dropdown, Button, Modal} from 'react-bootstrap';
+import {Row, Col, Dropdown, Button, Badge, Modal} from 'react-bootstrap';
 import {graphql, createFragmentContainer, RelayProp} from 'react-relay';
 import DropdownMenuItemComponent from 'components/DropdownMenuItemComponent';
 import createApplicationRevisionStatusMutation from 'mutations/application/createApplicationRevisionStatusMutation';
@@ -111,7 +111,9 @@ export const ApplicationRevisionStatusComponent: React.FunctionComponent<Props>
           <Col md={2}>
             <Dropdown style={{width: '100%'}}>
               <Dropdown.Toggle
-                style={{width: '100%', textTransform: 'capitalize'}}
+                pill
+                as={Badge}
+                style={{padding: '0.6em 1em', fontSize: '1em'}}
                 variant={
                   statusBadgeColor[
                     props.applicationRevisionStatus.applicationRevisionStatus

diff --git a/...tests/unit/containers/Applications/__snapshots__/ApplicationStatusContainer.test.tsx.snap b/...tests/unit/containers/Applications/__snapshots__/ApplicationStatusContainer.test.tsx.snap
@@ -139,11 +139,22 @@ exports[`ApplicationRevisionStatusItem should render the application status in a
         }
       >
         <DropdownToggle
+          as={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "defaultProps": Object {
+                "pill": false,
+              },
+              "displayName": "Badge",
+              "render": [Function],
+            }
+          }
           id="dropdown"
+          pill={true}
           style={
             Object {
-              "textTransform": "capitalize",
-              "width": "100%",
+              "fontSize": "1em",
+              "padding": "0.6em 1em",
             }
           }
           variant="info"