Merge branch 'master' of https://github.com/reapit/foundations into r…

…efactor/1891-apply-new-styles-and-containers-to-geo-diary-app

.github/workflows/release-note-update.yml

@@ -21,6 +21,8 @@ jobs:
     steps:
       - name: checks out repository to $GITHUB_WORKSPACE
         uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
 
       - name: Setup NodeJS
         uses: actions/setup-node@v1
@@ -48,6 +50,7 @@ jobs:
         with:
           repository: ${{ env.DOC_REPO }}
           path: ${{ env.DOC_CLONE_PATH }}
+          fetch-depth: 0
 
       - name: Run update doc script
         run: |

packages/elements/src/components/DatePicker/index.tsx

@@ -181,7 +181,7 @@ export const DatePicker = ({
         const className = hasError ? 'input is-danger' : 'input is-primary'
 
         return (
-          <div className="field pb-2">
+          <div className="field">
             <div className="control">
               {labelText && (
                 <label className={`label ${required ? 'required-label' : ''}`} htmlFor={id}>

packages/elements/src/components/Input/__tests__/__snapshots__/index.tsx.snap

@@ -18,6 +18,15 @@ exports[`Input should match a snapshot if field is required 1`] = `
 </Field>
 `;
 
+exports[`Input should match a snapshot if helperText is a component 1`] = `
+<Field
+  name="username"
+  validate={null}
+>
+  <Component />
+</Field>
+`;
+
 exports[`Input should match a snapshot with right icon 1`] = `
 <Field
   name="username"

packages/elements/src/components/Input/__tests__/index.tsx

@@ -30,6 +30,14 @@ const requiredInputProps: InputProps = {
   required: true,
 }
 
+const helperTextComponentInputProps: InputProps = {
+  id: 'username',
+  name: 'username',
+  labelText: 'User name',
+  type: 'text',
+  helperText: <b>Helper text</b>,
+}
+
 describe('Input', () => {
   it('should match a snapshot', () => {
     expect(toJson(shallow(<Input {...props} />))).toMatchSnapshot()
@@ -43,6 +51,10 @@ describe('Input', () => {
     expect(toJson(shallow(<Input {...requiredInputProps} />))).toMatchSnapshot()
   })
 
+  it('should match a snapshot if helperText is a component', () => {
+    expect(toJson(shallow(<Input {...helperTextComponentInputProps} />))).toMatchSnapshot()
+  })
+
   it('should work when integrating with Formik', async () => {
     const wrapper = mount(
       <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>

packages/elements/src/components/Input/index.tsx

@@ -8,7 +8,7 @@ export interface InputProps {
   placeholder?: string
   id: string
   labelText?: string
-  helperText?: string
+  helperText?: React.ReactNode
   name: string
   dataTest?: string
   rightIcon?: React.ReactNode
@@ -46,7 +46,7 @@ export const Input = ({
               </label>
             )}
 
-            {helperText && <p className="mb-3">{helperText}</p>}
+            {helperText && (React.isValidElement(helperText) ? helperText : <p className="mb-3">{helperText}</p>)}
 
             <input
               disabled={disabled}

packages/elements/src/components/Modal/__tests__/__snapshots__/index.tsx.snap

@@ -34,6 +34,7 @@ exports[`Modal should match a snapshot for ModalHeader 1`] = `
     className="delete"
     data-test="modal-close-button"
     onClick={[Function]}
+    type="button"
   />
 </header>
 `;

packages/elements/src/components/Modal/index.tsx

@@ -39,6 +39,7 @@ export const ModalHeader: React.SFC<ModalHeaderProps> = ({ title, afterClose })
         className="delete"
         aria-label="close"
         data-test="modal-close-button"
+        type="button"
         onClick={event => {
           event.preventDefault()
           afterClose && afterClose()

packages/elements/src/styles/base/layout.scss

@@ -14,4 +14,5 @@ $layout-quadruple: calc(1rem * 4);
 $layout-sextuple: calc(1rem * 6);
 
 $menu-width: 250px;
-$page-container: calc(100vw - 250px);
+$nav-bar-width: 66px;
+$page-container: calc(100vw - 250px);

packages/elements/src/styles/base/utilities.scss

@@ -7,6 +7,10 @@ $units: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
     flex-grow: $unit;
   }
 
+  .flex-shrink-#{$unit} {
+    flex-shrink: $unit;
+  }
+
   .text-ellipsis-#{$unit} {
     display: -webkit-box;
     -webkit-line-clamp: 1;

packages/elements/src/styles/components/table.scss

@@ -7,6 +7,7 @@
   & td {
     word-break: normal;
     max-width: 300px;
+    overflow-wrap: break-word;
   }
   tr {
     &.is-expanded {

packages/elements/src/styles/components/toast.scss

@@ -1,4 +1,5 @@
 @import '../base/layout.scss';
+@import '../base/browser.scss';
 
 .toast {
   width: 100%;
@@ -18,6 +19,11 @@
     -webkit-transform: translateY(-$layout-base);
   }
 
+  @include for-ie-only {
+    width: inherit;
+    left: $nav-bar-width;
+  }
+
   button {
     white-space: unset;
   }

packages/elements/src/styles/vendor/bulma-overrides.scss

@@ -112,7 +112,8 @@ html {
   }
 }
 
-.field, .field:not(:last-child) {
+.field,
+.field:not(:last-child) {
   margin-bottom: 0.75rem;
 }
 
@@ -168,9 +169,11 @@ html {
 }
 
 .control {
-  .label, i {
+  .label,
+  i {
     color: $grey;
   }
+
   &.has-icons-right,
   &.has-icons-left {
     .icon {
@@ -284,19 +287,28 @@ a {
   }
 
   &.is-page-container {
-    // to allow scroll past end of content, allowing for toast popup and 
+    // to allow scroll past end of content, allowing for toast popup and
     // increase readability, especially in mobile
-    margin-bottom: 6rem;
+    // Need to use "padding-bottom" here because "margin-bottom" doesn't work on IE
+    padding-bottom: 6rem;
+    // Fix IE flex columns height bug
+    // https://stackoverflow.com/a/36900208
+    flex-shrink: 0;
   }
 }
 
 .modal-card-title {
   font-family: $title-family;
 }
 
+.modal-card {
+  overflow: auto;
+}
+
 .modal-card,
 .modal-content {
   margin: 0 auto;
+
   .modal-card {
     @media screen and (max-width: 768px) {
       max-height: calc(100vh - 160px);

packages/elements/src/utils/validators/error-messages.ts

@@ -10,7 +10,7 @@ const errorMessages = {
   FIELD_INVALID_PASSWORD:
     'Your Password should be a minimum of 8 characters; ' +
     'must contain at least one lowercase letter, one uppercase letter and one number.',
-  FIELD_WRONG_URI_FORMAT: 'Invalid uri format',
+  FIELD_WRONG_URI_FORMAT: 'Invalid URI format',
   MINIMUM_CHARACTER_LENGTH: minCharLengthErrMessage,
   MAXIMUM_CHARACTER_LENGTH: maxCharLengthErrMessage,
 }