Merge pull request #40 from Lattice-Works/feature/APPS-2315-pass-aria…

…-label-to-LUK-select

APPS-2313: CDSS WOA-5 Remediation of ADA compliance violations

package.json

@@ -20,6 +20,10 @@
     {
       "name": "Hristo Oskov",
       "email": "hristo@openlattice.com"
+    },
+    {
+      "name": "Todd Bergman",
+      "email": "todd@openlattice.com"
     }
   ],
   "repository": {
@@ -50,7 +54,7 @@
     "immutable": "4.0.0-rc.9",
     "jwt-decode": "~2.2.0",
     "lattice": "~0.73.0",
-    "lattice-ui-kit": "~0.30.1",
+    "lattice-ui-kit": "~0.38.0",
     "lodash": "~4.17.10",
     "loglevel": "~1.6.0",
     "luxon": "~1.21.0",

src/components/buttons/DropdownButton.js

@@ -14,12 +14,6 @@ const DropdownButtonWrapper = styled.div`
   position: relative;
 `;
 
-const BaseButton = styled(Button)`
-  svg {
-    margin-left: 10px;
-  }
-`;
-
 const MenuContainer = styled.div`
   background-color: white;
   border-radius: 3px;
@@ -101,14 +95,14 @@ class DropdownButton extends Component<Props, State> {
 
     return (
       <DropdownButtonWrapper>
-        <BaseButton
+        <Button
+            endIcon={<FontAwesomeIcon icon={faChevronDown} fixedWidth />}
             isLoading={isLoading}
             onBlur={this.closeDropdown}
             onClick={this.toggleDropdown}
             size={size}>
           {title}
-          <FontAwesomeIcon icon={faChevronDown} fixedWidth />
-        </BaseButton>
+        </Button>
         { open && (
           <MenuContainer offset={size}>
             {options.map((option) => (

src/containers/app/AppContainer.js

@@ -12,6 +12,7 @@ import {
   Spinner,
   ThemeProvider,
   lightTheme,
+  StylesProvider
 } from 'lattice-ui-kit';
 import { connect } from 'react-redux';
 import { Redirect, Route, Switch } from 'react-router-dom';
@@ -131,13 +132,15 @@ class AppContainer extends Component<Props> {
     return (
       <ThemeProvider theme={lightTheme}>
         <MuiPickersUtilsProvider utils={LatticeLuxonUtils}>
-          <AppContainerWrapper>
-            <AppHeaderContainer />
-            <AppContentOuterWrapper>
-              { this.renderUnsupportedBrowserModal() }
-              { this.renderAppContent() }
-            </AppContentOuterWrapper>
-          </AppContainerWrapper>
+          <StylesProvider injectFirst>
+            <AppContainerWrapper>
+              <AppHeaderContainer />
+              <AppContentOuterWrapper>
+                { this.renderUnsupportedBrowserModal() }
+                { this.renderAppContent() }
+              </AppContentOuterWrapper>
+            </AppContainerWrapper>
+          </StylesProvider>
         </MuiPickersUtilsProvider>
       </ThemeProvider>
     );

src/containers/location/providers/EditFilter.js

@@ -1,21 +1,17 @@
 // @flow
 
 import React from 'react';
-
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { faChevronLeft } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { List, Map } from 'immutable';
-import { Colors } from 'lattice-ui-kit';
-import { FILTER_HEADERS } from './constants';
+import { Button, Colors } from 'lattice-ui-kit';
 import { APP_CONTAINER_WIDTH, HEADER_HEIGHT } from '../../../core/style/Sizes';
 
 import ActiveOnlyFilter from './filters/ActiveOnlyFilter';
 import ChildrenFilter from './filters/ChildrenFilter';
 import DayAndTimeFilter from './filters/DayAndTimeFilter';
 import RadiusFilter from './filters/RadiusFilter';
 import TypeOfCareFilter from './filters/TypeOfCareFilter';
-import InfoButton from '../../../components/buttons/InfoButton';
 import { ContentOuterWrapper, ContentWrapper } from '../../../components/layout';
 import { PROVIDERS } from '../../../utils/constants/StateConstants';
 import { LABELS, HEADER_LABELS } from '../../../utils/constants/Labels';
@@ -75,16 +71,6 @@ const EditFilterHeader = styled.div`
   color: #555E6F;
 `;
 
-const fixedBottomButtonStyle = css`
-  border-radius: 3px;
-  border: none;
-  width: 100%;
-  font-family: Inter;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 17px;
-`;
-
 const ApplyButtonWrapper = styled.div`
    position: fixed;
    padding: 10px ${PADDING}px 30px ${PADDING}px;
@@ -93,10 +79,10 @@ const ApplyButtonWrapper = styled.div`
    height: 70px;
    background-color: white;
    z-index: 16;
-`;
 
-const SaveFilterButton = styled(InfoButton)`
-  ${fixedBottomButtonStyle}
+   button {
+     width: 100%;
+   }
 `;
 
 const FILTER_COMPONENTS = {
@@ -160,9 +146,9 @@ export default class EditFilter extends React.Component {
 
         </StyledContentWrapper>
         <ApplyButtonWrapper>
-          <SaveFilterButton disabled={!isValid} onClick={() => onSave({ field, value })}>
+          <Button color="primary" disabled={!isValid} onClick={() => onSave({ field, value })}>
             {renderText(LABELS.SAVE)}
-          </SaveFilterButton>
+          </Button>
         </ApplyButtonWrapper>
       </StyledContentOuterWrapper>
     );