monorail

Monorail Release v0.0.27 - 'Dugout Cafe'

Catchup: Feb 28 - Aug 19

Monorail Release v0.0.21 - Amrheins

src/pageComponents/errorPage/ErrorPage.tsx

• Add color CSS to manually override colors being inherited from Bootstrap

src/visualComponents/inputs/TextArea.tsx

• Add onKeyDown prop to recognize keystroke actions in the TextArea. E.g. key === enter to submit()

Monorail Release v0.0.20 - ZZ Top

package.json

• Add jest-canvas-mock
• Update dependencies

src/helpers/color.ts

• Add:
  • SidebarBg
  • SidebarActive
  • SidebarDivider

src/sharedHelpers/fp-ts-ext/Foldable.ts

• Add and(): and returns the conjunction of all the boolean values in a data structure test whether all of the values in a data structure are true
• Add or(): returns the disjunction of a data structure containing one or more booleans. This function will test whether any of the values in a data structure is true.
• Add any(): Tests whether any element of a data structure satisfies a predicate.

src/visualComponents/alerts/AlertModal.tsx

• Add padding prop which adjusts padding on BBModalContent.
• Now titleText and subtitleText only render if they are passed in.

src/visualComponents/buttons/Button.tsx

• Add props:
  • iconSize?
  • isLoading?
• Add logic for Loading Button

src/visualComponents/collection/Collection.tsx

• Add showPagination={passedData.length > PAGE_SIZE}

src/visualComponents/collection/CollectionPaginationComponent.tsx

• Added component to control pagination for collection components

src/visualComponents/dataTable/ReactTable.tsx

• Update default column rendering to get margin from ThemeProvider
• Fix NoDataComponentHorizontal alignment
• Add EllipsisValueComponent component
• Add support of data grouping and pivoting todefaultFilterMethod
• Add defaultExpanded prop to useTableExpandState
• Update FilterComponent margins

src/visualComponents/inputs/Choice.tsx

• Remove redundant flex attributes.

src/visualComponents/inputs/Search.tsx

• Change html type from text → search
• Add CSS to Override search styling coming from bootstrap.scss

src/visualComponents/layout/LayoutOutline.tsx

• Rename prop name → content

src/visualComponents/layout/ScrollAnimation.tsx

• Replace flexFlow() with flex: 1 to solve weird input lag.

src/visualComponents/list/List.tsx

• Add props:
  • children?
  • ref?
• Change from FC to ForwardRefExoticComponent

src/visualComponents/tile/Tile.tsx

• Add logic for styling TileStatus = Neutral

src/visualComponents/tile/TileStatus.ts

• Add Neutral to TileStatus enum

src/visualComponents/typography/Text.tsx

• Add optional title prop, used for a native browser tooltip

Monorail Release v0.0.19 - 'Yanni'

package.json

• Add dependencies:
  • "@types/react-virtualized-auto-sizer": "1.0.0",
  • "@types/react-window": "1.8.1",
  • "react-virtualized-auto-sizer": "1.0.2",
  • "react-window": "1.8.5"
• Add devDependencies:
  • "@babel/core": "7.7.5",
  • "@babel/plugin-proposal-class-properties": "7.7.4",
  • "@babel/plugin-proposal-decorators": "7.7.4",
  • "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
  • "@babel/plugin-proposal-numeric-separator": "7.7.4",
  • "@babel/plugin-proposal-object-rest-spread": "7.7.4",
  • "@babel/plugin-proposal-optional-chaining": "^7.7.5",
  • "@babel/plugin-transform-react-constant-elements": "7.7.4",
  • "@babel/plugin-transform-react-inline-elements": "7.7.4",
  • "@babel/preset-env": "7.7.6",
  • "@babel/preset-react": "7.7.4",
  • "@babel/preset-typescript": "7.7.4",
  • "@babel/register": "7.7.4",
  • "@reach/portal": "0.6.1",
  • "@types/react-datepicker": "^2.9.5",
  • "react-datepicker": "2.10.1",
  • Update "typescript": "3.7.3",

src/helpers/appName.ts

• Add MyOrg

src/helpers/color.ts

• Add MyOrg & RangeAlt
• Add colors for “Scores”

src/helpers/elevation.ts

• Add Section elevation

src/helpers/theme.ts

• Add pageHeader, breadcrumbs and margin 24 to Theme properties

src/helpers/zIndex.ts

• Add Modal z-index helper

src/metaComponents/popOver/PopOver.tsx

• Updated to work with ReachUI Portal

src/metaComponents/portal/Portal.tsx

• Deleted file, replace with ReachUI portal

src/metaComponents/portal/PortalController.tsx

• Updated to work with ReachUI Portal

src/pageComponents/TablePage/TablePage.tsx

• Add Search props and component

src/sharedHelpers/fp-ts-ext/Array.ts

• Add isNotEmpty - Checks if an array is not empty

src/sharedHelpers/fp-ts-ext/Either.ts

• Add getOrd function

src/sharedHelpers/fp-ts-ext/Record.ts

• Add isNotEmpty - Check if a record is not empty

src/sharedHelpers/react.ts

• Deleted

src/sharedHelpers/strings.ts

• Add capitalizeFirstLetter()

src/sharedHelpers/typeGuards.ts

• Add endReducer - Ensures all actions in reducer are handled in switch statement
• Add isNotUndefined
• Add isNotString

src/visualComponents/actionsButtons/ActionsButtons.tsx

• Actions list definition changed to a more strict type definition based on ActionButton enum
• Add helpers for type and actionProps definition for each ActionButton type

src/visualComponents/actionsMenu/ActionsMenu.tsx

• Convert to FC
• Add ‘chromeless’ prop to MenuAction

src/visualComponents/alerts/AlertModal.tsx

• Add disabled prop
• Add className prop
• Add zIndex prop

src/visualComponents/alerts/DeleteModal.tsx

• Add component to Monorail

src/visualComponents/avatar/Avatar.tsx

• Add fromNullable safety check

src/visualComponents/buttons/Button.tsx

• Convert to FC

src/visualComponents/buttons/DropdownButton.tsx

• New component that has a primary action by default and a list of optional actions displayed as a dropdown menu

src/visualComponents/buttons/IconButton.tsx

• Convert to FC

src/visualComponents/buttons/LoadingButton.tsx

• Remove buttonDefaultProps

src/visualComponents/buttonsBar/ButtonsBar.tsx

• Convert to FC

src/visualComponents/dataStates/DataStates.tsx

• Add vertical and icon props to CustomNoData

src/visualComponents/dataTable/ReactTable.tsx

• Make style prop for TbodyComponent optional

src/visualComponents/dropdown/Dropdown.tsx

• Remove ‘document’ prop

src/visualComponents/dropdown/skin.tsx

• Render Dropdown portal only on open

src/visualComponents/icon/Icon.tsx

• src/visualComponents/icon/custom/AddGroup.tsx
• src/visualComponents/icon/custom/AddList.tsx
• src/visualComponents/icon/custom/GhostVm.tsx
• src/visualComponents/icon/custom/Home.tsx
• src/visualComponents/icon/custom/InformationTaskAddGrey.tsx
• src/visualComponents/icon/custom/MyOrg.tsx
• src/visualComponents/icon/custom/MyTeam.tsx
• src/visualComponents/icon/custom/PeopleGear.tsx
• src/visualComponents/icon/custom/PersonGear.tsx
• src/visualComponents/icon/custom/Profile.tsx
• src/visualComponents/icon/custom/QuestionTaskAddGrey.tsx
• src/visualComponents/icon/custom/SiteMap.tsx
• src/visualComponents/icon/custom/Tie.tsx

src/visualComponents/inputs/CheckboxSelect.tsx

• Convert to FC
• Make select toggleable

src/visualComponents/inputs/Choice.tsx

• Remove display prop

src/visualComponents/inputs/NumberInputGroup.tsx

• Convert to FC

src/visualComponents/inputs/RadioGroup.tsx

• Convert onChange to onClick
• Add name prop to ensure correct grouping

src/visualComponents/inputs/Search.tsx

• Convert to FC
• Add placeholder prop

src/visualComponents/inputs/Select.tsx

• Convert to FC

src/visualComponents/inputs/StdErr.tsx

• Add fontSize prop

src/visualComponents/inputs/TextField.tsx

• Deprecate date, datetime, and datetime-local in favor of FormField.Date
• Pass ref to StyledInput

src/visualComponents/inputs/ViewInput.tsx

• Add orientation prop
• Add disabled prop
• Add placeholder prop
• Add Orientation enum

src/visualComponents/layout/layout.ts => src/visualComponents/layout/Layout.tsx

• Add Section layout component

src/visualComponents/layout/LayoutOutline.tsx

• New component that provides the outline for a list of items at the left and a detail view when one of those items is selected at the right
• Add hook useControlledList to help handling the selected state of list items
• Add OutlineListItem as a base component for list items

src/visualComponents/layout/ScrollAnimation.tsx

• Add forwardRef to ScrollAnimation container to enable external interaction

src/visualComponents/list/List.tsx

• Convert SimpleListItem to FC

src/visualComponents/loading/Loading.tsx

• Refactor to accept a LoaderType passed to it to specify which animation data to use

src/visualComponents/menu/Menu.tsx

• Convert to a FC

src/visualComponents/modals/DeleteModal.tsx

• Deleted

src/visualComponents/modals/FullScreenModal.tsx

• Convert to a FC

src/visualComponents/modals/LargeModal.tsx

• Convert to a FC

src/visualComponents/modals/MediumModal.tsx

• Convert to a FC

src/visualComponents/modals/MiniModal.tsx

• Convert to a FC

src/visualComponents/modals/SmallModal.tsx

• Convert to a FC

src/visualComponents/pageHeader/PageHeader.tsx

• Convert to FC
• Use showBreadCrumbs prop from Theme props to determine visibility of breadcrumbs elements on header navigation

src/visualComponents/sidebar/SideBarComponents.tsx

• Convert to FC
• Check isSideBarCollapsed

src/visualComponents/successPage/Confetti.tsx

• Created Animated SVG of confetti

src/visualComponents/successPage/SuccessPage.tsx

• Added SuccessPage component to display a message and confetti

src/visualComponents/tags/Tag.tsx

• Add ellipsis
• Convert to a FC

src/visualComponents/tile/Tile.tsx

• Created Tile component

src/visualComponents/tile/TileStatus.ts

• Add enums for TileStatus

src/visualComponents/toast/Toast.tsx

• Convert to a FC

src/visualComponents/toggle/Overlay.tsx

• Set zIndex to zIndexValue(ZIndexNodeName.Overlay)

src/visualComponents/typography/Details.tsx

• Convert to a FC

src/visualComponents/typography/Mapping.tsx

• Convert to a FC

src/visualComponents/typography/SectionHeader.tsx

• Convert to a FC

src/visualComponents/typography/Text.tsx

• Convert to a FC
• Add children prop

Monorail Release v0.0.18 - 'X Ambassadors'

package.json

• Update: ”@types/styled-components": "4.4.0"
• Update: "styled-components": "4.4.1"
• Update: "typescript": "3.7.2"

src/pageComponents/ContentPage/ContentBody.tsx

• Add scrollCSS

Dropdown

• Added clearable? prop that defaults to true, which displays a clear IconButton within the dropdown component when an item is selected
• Added display? prop that defaults to DisplayType.Edit, which displays either regular Dropdown or read-only text of the selected value

src/visualComponents/inputs/CheckboxSelect.tsx

• Updated import to reflect changes to Choice

src/visualComponents/inputs/Choice.tsx

• Removed BB and CC prefixes from styled components
• Converted component from FCwDP to FC

src/visualComponents/inputs/Label.tsx

• Added display prop so Label can conditionally display asterisk

src/visualComponents/inputs/RadioGroup.tsx

• Converted SFC to FC
• Added display? prop that defaults to DisplayType.Edit, which displays either regular RadioGroup or read-only text of the selected value

src/visualComponents/inputs/TextArea.tsx

• Added display? prop that defaults to DisplayType.Edit, which displays either regular TextArea or read-only text
• Converted class to FC

src/visualComponents/inputs/TextField.tsx

• Added display? prop that defaults to DisplayType.Edit, which displays either regular TextField or read-only text

src/visualComponents/inputs/ViewInput.tsx

• Added component that displays read-only text or None

src/visualComponents/inputs/inputTypes.ts

• Moved DisplayType declaration to Monorail

src/visualComponents/loading/Loading.tsx

• Rename: loading.json → loadingData.json

src/visualComponents/loading/LoadingGeneric.tsx

• Rename: loadingGeneric.json → loadingGenericData.json

src/visualComponents/modals/Modals.tsx

• Add ‘modal-’ className to allow global style customization to modal positioning

Monorail Release v0.0.17 - 'The Who'

package.json

• Add react-lottie and @types/react-lottie as devDependencies

src/helpers/categoryTransforms.ts

• Config Modules and External Subnet categories added

src/visualComponents/dataStates/DataStates.tsx

• NoModules data state added

src/visualComponents/icon/Icon.tsx

• Add EmptySyllabusList to list of custom icons

Update Icons to resolve bug

• src/visualComponents/icon/custom/Events.tsx
• src/visualComponents/icon/custom/ReportsAnalytics.tsx
• src/visualComponents/icon/custom/TechOps.tsx

Add Loading components

• src/visualComponents/loading/Loading.tsx
• src/visualComponents/loading/LoadingGeneric.tsx
• src/visualComponents/loading/loading.json
• src/visualComponents/loading/loadingGeneric.json

src/visualComponents/menu/Menu.tsx

• Export MenuContainer

src/visualComponents/pageHeader/PageHeader.tsx

• Add justify-content: space-between; to TitleContainer

tsconfig.json

• Add resolveJsonModule so lottie can create loading animation from json

Week 44 Release - 'Van Halen'

package.json

• Update:
  • "react": "16.11.0"
  • "react-dom": "16.11.0"

src/helpers/categoryTransforms.ts

• Add external-subnet

src/sharedHelpers/strings.ts

• Add includesNoncase function, a version of includes() that ignores case

src/visualComponents/dropdown/Dropdown.tsx

• Dropdown component refactored to use Hooks.
• Handles Downshift instance and delegate the look and feel to components hooks.

src/visualComponents/dropdown/DropdownItem.tsx

• Default Dropdown component for every item in the list

src/visualComponents/dropdown/behavior.ts

• useAsSelect hook allows Dropdown component to work as a regular select element
• useAsFilter hook allows Dropdown component to work as a filter dropdown
• Behavior hooks handle the state logic for Dropdown component

src/visualComponents/dropdown/helpers.ts

• DropdownItemType created as the default type for Dropdown component
• Helper functions for dropdown type guards and keyboard interaction

src/visualComponents/dropdown/interaction.ts

• Interaction hooks handle mouse and keyboard events for Dropdown component

src/visualComponents/dropdown/parsers.ts

• Parsers enable Dropdown to handle any type of data object for the items. By default Dropdown component handles types:
  • string
  • number
  • DropdownItemType (label, value, disabled)
• Use useCustomParser to define a parser for given item data object. Define callback functions:
  • value: Value data for the item. Used to match the controlled value for the Dropdown
  • label: Text to display for the item
  • isActive: Item status
  • Includes: Compare and match a string (from filtering) to the item
  • Compare: Compare two items

src/visualComponents/dropdown/render.tsx

• Render hook defines the look and feel of the Dropdown elements.
  • Handler: Dropdown control. Uses TextField by default
  • List: Define the markup to display the collapsible list of items
  • Item: Define how each item is displayed in the list. Handle selected and disabled states.

src/visualComponents/dropdown/skin.tsx

• Skin defines the markup for the Dropdown component using Render hook for the Handler, List and Item elements.
• Control the logic and component events by using Behavior, Interaction, and Parsers hooks.
• Handle error logic and styling

src/visualComponents/icon/Icon.tsx

Icons Added:

• src/visualComponents/icon/custom/Information.tsx
• src/visualComponents/icon/custom/InformationTaskAddBlue.tsx
• src/visualComponents/icon/custom/InformationTaskAddBlue.tsx
• src/visualComponents/icon/custom/InformationTaskAddGrey.tsx
• src/visualComponents/icon/custom/QuestionMark.tsx
• src/visualComponents/icon/custom/QuestionTaskAddBlue.tsx
• src/visualComponents/icon/custom/QuestionTaskAddGrey.tsx

src/visualComponents/inputs/DebouncedSearch.tsx

• Make name and placeholder props optional

src/visualComponents/inputs/RadioGroup.tsx

• Remove hasRequiredAsterisk, add htmlValidation

src/visualComponents/inputs/TextArea.tsx

• Remove :-moz-ui-invalid styles so that invalid form states look similar across browsers https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
• Remove hasRequiredAsterisk, add htmlValidation

src/visualComponents/inputs/TextField.tsx

• Remove :-moz-ui-invalid styles so that invalid form states look similar across browsers https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
• Remove hasRequiredAsterisk, add htmlValidation
• Fix Icons warning console messages limiting component props

Week 41 Release - “U2”

src/helpers/size.ts

• Add width: 444 size for SmallModal

src/pageComponents/CollectionPage/CollectionPage.tsx

• Add pivotBy prop

src/pageComponents/TablePage/TablePage.tsx

• Allow customizing TablePage component with ReactTable props

src/sharedHelpers/fp-ts-ext/Record.ts

• Add values which retrieves the value of a given property key from an object (curried)

src/sharedHelpers/fp-ts-ext/__tests__/Array.jest.ts

• Fix array tests so that it sorts.

src/sharedHelpers/typeGuards.ts

• Add more typeGuards.
• Added TypeGuard type

src/visualComponents/actionsMenu/ActionsMenu.tsx

• Add disabled optional prop to menu items

src/visualComponents/appIcon/AppIcon.tsx

• Remove icon fill.

src/visualComponents/buttons/Button.tsx

• Add status callback to render on top of the button

src/visualComponents/buttons/IconButton.tsx

• Add status prop.
• Export StyledIconButton so that you can style just the IconButton and not the Button.

src/visualComponents/buttonsBar/ButtonsBar.tsx

• Update ButtonsBar styling to adjust to parent dimensions if needed

src/visualComponents/collection/Collection.tsx

• Add pivoteBy prop so that you can do a grouped table.

src/visualComponents/dataTable/ReactTable.tsx

• Fix IconButton styling.
• Update useSort hook to get a default initial state
• Add useTableExpandStateFixedGroups hook

src/visualComponents/dropdown/Dropdown.tsx

• Add hideStdErr prop to TextField to remove gap when searching.

src/visualComponents/icon/Icon.tsx

• Add custom icons:
• src/visualComponents/icon/custom/Bam.tsx
• src/visualComponents/icon/custom/Database.tsx
• src/visualComponents/icon/custom/Upload.tsx

src/visualComponents/icon/custom/Grade.tsx

• Fix grade icon

src/visualComponents/inputs/Choice.tsx

• Add onClick callback

src/visualComponents/inputs/TextArea.tsx

• Remove err prop from conditional display of StErr.

src/visualComponents/layout/ScrollAnimation.tsx

• Improve performance of scrolling area by adding transform: translateZ(0) so that the stack is rendered by the gpu.

src/visualComponents/modals/DeleteModal.tsx

• Fix grammatical error

src/visualComponents/modals/Modals.tsx

• Add SmallModal

src/visualComponents/modals/SmallModal.tsx

• Add SmallModal

src/visualComponents/modals/modalTypes.ts

• Add size for SmallModal

src/visualComponents/pageHeader/PageHeader.tsx

• Add overflow-x to enable horizontal scrolling when many buttons are present.
• Header has correct height when no page name present.

Week 40 Release - “Talking Heads”

src/helpers/baseStyles.ts

• Styles for handling errors added

src/helpers/categoryTransforms.ts

• ‘Course plan’ category added
  • Name
  • Icon
  • Color

src/helpers/hooks.ts

• Added ‘useTimeout’ that is a reusable customizable timeout using hooks for state handling

src/helpers/theme.ts

• Table and margin variables added to Theme interface

src/helpers/typography.ts

• Renamed Content size to Micro
• Removed existing Micro size
• Changed Content to Micro in these files:
  • src/visualComponents/list/List.tsx
  • src/visualComponents/tags/Tag.tsx
  • src/visualComponents/typography/Details.tsx

src/pageComponents/TablePage/TablePage.tsx

• Add TablePage component which contains a page level header and a table on list view mode only.

src/sharedHelpers/array.ts

• Add boundedIdx which keeps idx within the bounds of [0, length), looping back to 0 when over, and length-1 when under

src/sharedHelpers/fp-ts-ext/Array.ts

• Add arrayToRecord which returns an object made up of a keys from the result the accessor function

src/visualComponents/alerts/Alerts.tsx

• Add headerText prop to override default header title from alertType
• Add onSubmit prop

src/visualComponents/brand/Logo.tsx

• Added className prop to enable passing css to component.

src/visualComponents/collection/Collection.tsx

• Use theme provider table margin prop to customize collection component content margin

src/visualComponents/dataStates/DataStates.tsx

• Made several subcomponents exportable to make it easier to customize empty state components.

src/visualComponents/dataTable/ReactTable.tsx

• Enable 1 level columns groups definitions
• Use table margin Theme props to customize left and right padding on table component
• Enable grouping rows using Pivots

src/visualComponents/dropdown/Dropdown.tsx

• Added err prop and corresponding error styling.

src/visualComponents/icon/Icon.tsx

• Add custom Grade icon

src/visualComponents/icon/custom/Grade.tsx

• Add custom Grade icon

src/visualComponents/inputs/CheckboxSelect.tsx

• Renamed CheckmarkSelectValue to CheckboxSelectValue.

src/visualComponents/inputs/Choice.tsx

• Added err prop and corresponding error styling.

src/visualComponents/inputs/Label.tsx

• Added err prop and corresponding error styling.

src/visualComponents/inputs/RadioGroup.tsx

• Added err and msg props.
• Added StdErr to display error messages.
• Added corresponding error styling.
• Added hasRequiredAsterisk to get around HTML validation.

src/visualComponents/inputs/Select.tsx

• Added err prop and corresponding error styling.

src/visualComponents/inputs/StdErr.tsx

• Added component for displaying error text.

src/visualComponents/inputs/TextArea.tsx

• Added height prop. Default height is 64px.
• Added err and msg props.
• Added StdErr to display error messages.
• Added corresponding error styling.
• Added hasRequiredAsterisk to get around HTML validation.
• Added hideStdErr prop for cases where error text definitely not required (StdErr always reserves space otherwise).

src/visualComponents/inputs/TextField.tsx

• Added err and msg props.
• Added StdErr to display error messages.
• Added corresponding error styling.
• Added hasRequiredAsterisk to get around HTML validation.
• Added hideStdErr prop for cases where error text definitely not required (StdErr always reserves space otherwise).
• Converted TextField into functional component.
• Added canToggleVisibility prop so users can hide/reveal passwords.

src/visualComponents/layout/ButtonFooter.tsx

• Added justifyContent prop and margin styling to make it easier to control button positions depending on the number of buttons.

src/visualComponents/pageHeader/PageHeader.tsx

• Change type of title prop from string to ReactNode

src/visualComponents/typography/Text.tsx

• Add div as an option to the Styled Component as prop

Week 37 Release - “Steve Miller Band”

src/helpers/categoryTransforms.ts

• Adjust names and add more icons.

src/helpers/color.ts

• Add Alert colors: Error, Warning, Success, and Info.

src/helpers/hooks.ts

• Add useInputDebouce which lets you delay the submit of Search inputs.

src/helpers/styled-components.ts

• Add CSSProp type with Theme.

src/helpers/typography.ts

• Fix typo in spiltValue. Is now splitValue.

src/helpers/zIndex.ts

• Add More zIndex levels. Add more components to the stack.

src/metaComponents/popOver/PopOver.tsx

• Add yDirection and xDirection so you can manually set the direction PopOver will send in the position object.

src/pageComponents/CollectionPage/CollectionPage.tsx

• Allow a custom SearchInput to be passed to Collection,

src/pageComponents/errorPage/ErrorPage.tsx

• Add Take Me Home button.

src/sharedHelpers/fp-ts-ext/Array.ts

• Added xor for Arrays. Adds or removes items in the second Array to the First

src/sharedHelpers/fp-ts-ext/Option.ts

• Added all which returns true if the option is false or if the predicate returns true when applied to the wrapped value.

src/sharedHelpers/newtypes.ts

• Added Infinity, prismInfinity and Finite.

src/sharedHelpers/typeGuards.ts

• Added isFinite which returns false for NaN, -Infinity, or Infinity.

src/visualComponents/actionsButtons/ActionsButtons.tsx

• Improve type for ActionButton.

src/visualComponents/alerts/Alerts.tsx

• Added templated modals for each of the four alertTypes

src/visualComponents/alerts/alertType.ts

• Add alert types: Error Warning Success Info

src/visualComponents/appIcon/AppIcon.tsx

• Removed cssOverrides prop.

src/visualComponents/arrowButtons/ArrowButtons.tsx

• Use zIndex helper to instead of hard coded zIndex

src/visualComponents/avatar/Avatar.tsx

• Refactor Avatar to remove old naming conventions.

src/visualComponents/cards/Cards.tsx

• Use zIndex helper to instead of hard coded zIndex.

src/visualComponents/collection/Collection.tsx

• Add support for custom Search Input.
• Make filters for Card view of collection.

src/visualComponents/dataStates/DataStates.tsx

• Add state for CustomNoData, NoEvents, NoCompletedEvents

src/visualComponents/dataTable/ReactTable.tsx

• Lots of tweaks to make filters better.
• Add three state sort.
• Add Scrolling Shadow.
• There will be lots of changes still coming to ReactTable over the next few releases. The nice thing about these changes is that it’s all under the hood and automatically works on every table.

src/visualComponents/divider/Divider.tsx

• isVertical prop added to DividerProps

src/visualComponents/dropdown/Dropdown.tsx

• Dropdown types updated
• Dropdown component updated to use React Hooks.
  • Status handling
  • Interaction hooks
  • Events handlers
• Default Dropdown width set to 256px
• Render loops, interaction issues, and controlled selected item weird conditions fixed

src/visualComponents/dropdown/DropdownItem.tsx

• DropdownItem created as separate reusable component

src/visualComponents/dropdown/helpers.ts

• Reusable Dropdown helper functions

src/visualComponents/header/Header.tsx

• Header component updated to receive custom css prop instead of cssOverrides

src/visualComponents/icon/Icon.tsx

• Forwarding icon ‘ref’

src/visualComponents/inputs/CheckboxSelect.tsx

• Added CheckboxSelect component to Monorail.

src/visualComponents/inputs/CheckmarkSelectGroup.tsx

• Removed CheckmarkSelectGroup from Monorail.

src/visualComponents/inputs/Choice.tsx

• Added data-test-id prop.

src/visualComponents/inputs/DebouncedSearch.tsx

• DebouncedSearch component created using useInputDebounce hook

src/visualComponents/inputs/Label.tsx

• Added Label component to Monorail.

src/visualComponents/inputs/MultipleTextField.tsx

• Added Label component.

src/visualComponents/inputs/NumberInputGroup.tsx.

• Added Label component.

src/visualComponents/inputs/RadioGroup.tsx.

• Added Label component.
• Added data-test-id prop.
• Added disabled prop.

src/visualComponents/inputs/Select.tsx

• Added Label component.

src/visualComponents/inputs/TextArea.tsx

• Added Label component.
• Added name prop.

src/visualComponents/inputs/TextField.tsx

• Added htmlType prop.
• Added maxLength prop.
• Added InputHTMLType.
• Added Label component.
• Removed redundant TextArea.

src/visualComponents/menu/Menu.tsx

• Fix on initial render closing animation issue

src/visualComponents/modals/FullScreenModal.tsx

• Define zIndex level for modals

src/visualComponents/modals/LargeModal.tsx

• Define zIndex level for modals

src/visualComponents/modals/MediumModal.tsx

• Define zIndex level for modals

src/visualComponents/pageHeader/PageHeader.tsx

• Move ThemeProvider to only wrap some of PageHeader because the link color of BreadCrumbs was affected.

src/visualComponents/sidebar/SideBarComponents.tsx

• Center dropdown toggle on collapsed sidebars

src/visualComponents/toggle/Overlay.tsx

• Reset the theme colors for when a Modal is inside PageHeader.

src/visualComponents/toggle/Toggle.tsx

• Make toggle scale uniformly
• Update disabled styling

src/visualComponents/typography/Text.tsx

• Add li

Week 28 Release - “REO Speedwagon”

src/helpers/hooks.ts

• useInterval hook added
  • This hook is used to implement the timer on the Carousel component

src/helpers/size.ts

• Page size margin and padding helpers added for generic content page alignment handling

src/helpers/theme.ts

• Active Primary theme color updated to Colors.AccentPurple500

src/helpers/zIndex.ts

• Define z-index for TabBarIndicator

src/metaComponents/popOver/PopOver.tsx

• isRendered prop added
• Default PopOver menu gap set to 8px

src/pageComponents/ContentPage/ContentBody.tsx

• ScrollAnimation added

src/pageComponents/ContentPage/ContentPage.tsx

• ThemeProvider added to define default page content alignment

src/sharedHelpers/typeGuards.ts

• assertNever helper added to warn about non exhaustive switch cases

src/typings/react-router.d.ts

• LinkProps redefinition to handle new Ref types

src/visualComponents/actionsButtons/ActionsButtons.tsx

• Consolidate featuredActions and standardActions into actions with each action having a prop for isFeaturedAction
• Don't show ActionsMenu when there are no standardActions
• Remove margin when only one element

src/visualComponents/actionsMenu/ActionsMenu.tsx

• Consolidate featuredActions and standardActions into actions with each action having a prop for isFeaturedAction

src/visualComponents/arrowButtons/ArrowButtons.tsx

• Add optional looping

src/visualComponents/cards/Cards.tsx

• BBCardGrid is styled ScrollAnimation

src/visualComponents/carousel/Carousel.tsx

• Add loop and autoPlay behavior to Carousel component
• Define timerInterval to set the delay between each slide on autoPlay

src/visualComponents/collection/Collection.tsx

• Add defaults to switches

src/visualComponents/dataStates/DataStates.tsx

• Different data states views for collections
  • NoResultsCollection
  • NoResults
  • EmptyTable
  • NoData
  • NotAuthorized
  • SomethingWentWrong
  • NotFound

src/visualComponents/dataTable/ReactTable.tsx

• TBodyComponent is styled ScrollAnimation
• NoDataComponent view added

src/visualComponents/layout/ScrollAnimation.tsx

• Add containerCssOverrides prop

src/visualComponents/dropdown/Dropdown.tsx

• Dropdown component added.

  It is based on Downshift (https://github.com/downshift-js/downshift) with extended keyboard control and using Monorail components for display

  • Allow default select interaction
  • Set searchable to true to enable a filterable dropdown
  • Use renderHandler and renderItem to set a custom visualization for dropdown components
  • By default it uses a list of label and value pairs (Array<{label, value}>), but can be typed to use any complex type. Use itemToDropdownType to map your type to dropdown type.

src/visualComponents/hyperLink/BaseLink.tsx

• Updated to ReactRouterv3.2.3 so that we can place refs on links via innerRef prop.
• Used forwardRef so that you can just use the ref prop on BaseLink.

src/visualComponents/icon/Icon.tsx

• Add NoResults icon

src/visualComponents/icon/custom/NoResults.tsx

• Add icon used for when No Results are available

src/visualComponents/inputs/TextField.tsx

• Added onClick to detect mouse interaction. Used as a part of Dropdown component.

src/visualComponents/layout/ButtonFooter.tsx

• Added footer for full page forms that your Next and Prev Buttons go into.
• Component respects page size set by ContentPage.

src/visualComponents/list/List.tsx

• Fix bug in SimpleListItem where there was always a hover state because onClick had a default function. Removed default value and updated type definition.

src/visualComponents/brand/Logo.tsx

• App version displayed on hover

src/visualComponents/menu/Menu.tsx

• Added width as a prop to define Menu size

src/visualComponents/modals/DeleteModal.tsx

• Added titleText and subtitleText props to allow modal content customization

src/visualComponents/pageHeader/PageHeader.tsx

• Updated PageHeader to work with the theme colors of the Application.

src/visualComponents/pageHeader/PageLevelNavBar.tsx

• Updated PageLevelNavBar to the new design. The API has remained unchanged.

src/visualComponents/pageHeader/PageLevelNavItem.tsx

• Updated PageLevelNavItem to the new design. The API has remained unchanged.

src/visualComponents/sidebar/ContextMenu.tsx

• ScrollAnimation added

src/visualComponents/sidebar/SideBarComponents.tsx

• SidebarMenuContainer is styled ScrollAnimation

src/visualComponents/tabs/TabBar.tsx

• Fixed bug in TabBar where the bottom border made tabs 1px too short because of the box model. Moved the border to a pseudo element.

src/visualComponents/tile/Tile.tsx

• Delete Tile component

Week 28 Release - “Queen”

Update core folder structure of Monorail. WARNING this breaks almost all imports. Most imports can be fixed by adding visualComponents/ after dist/. It took us about 5min to fix this breaking change in your local code base with find and replace all.

@simspace/monorail/dist/metaComponents

• metaComponents are the same as Higher Order Components or Render Prop Components. They usually don’t add dom that effects styling and instead add functionality like PopOver.

@simspace/monorail/dist/pageComponents

• pageComponents are for page wrappers that encompass all the components for a type of page. This includes Collection and Detail pages.

@simspace/monorail/dist/visualComponents

• visualComponents are where most components ended up. These are components that have a visual output in the DOM like Button.

src/avatar/Avatar.tsx → src/visualComponents/avatar/Avatar.tsx

• Replace ‘isGroup’ prop with optional ‘icon’ prop to allow passing custom icon to avatar

src/hyperLink/FramedLink.tsx → src/visualComponents/hyperLink/FramedLink.tsx

• Fix framed icon vertical alignment

src/icon/Icon.tsx → src/visualComponents/icon/Icon.tsx

• ‘NoUsers’ custom icon added

src/visualComponents/icon/custom/NoUsers.tsx

• Custom icon added

src/inputs/Choice.tsx → src/visualComponents/inputs/Choice.tsx

• Disabled state added to choices, checkboxes and radio buttons

src/sidebar/SideBarComponents.tsx → src/visualComponents/sidebar/SideBarComponents.tsx

• Fix collapsed sidebar styling

Week 26 Release

Added ReactTable with Monorail design.

src/Pages/CollectionPage/CollectionPage.tsx

• Added CollectionPage which wraps Collection. It provides a PageHeader.

src/actions/Actions.tsx

• Added ActionsContainer to be used for components that have the actions prop.

src/actionsButtons/ActionsButtons.tsx

• Fixed how margin was set on the Buttons and the IconButton.

src/actionsMenu/ActionsMenu.tsx

• Fixed bug where the Divider was present when there were no featured actions.

src/arrowButtons/ArrowButtons.tsx

• Buttons are disabled on when previous is undefined or current slide is index 0.
• Add z-index so ArrowButtons are above content, pointer-events: none; so they aren’t clickable.
• count prop renamed to current.
• Added props for slideIndicatorType size arrowColor cssArrowOverrides.

src/avatar/Avatar.tsx

• Added isGroup type to Avatar.

src/buttons/Button.tsx

• Added ‘passedAs’ prop to Buttons component to enable link buttons properly.
• Fix pressed colors definition for Button’s Primary display.

src/buttons/IconButton.tsx

• Fix IconButton pressed prop usage on active status.

src/carousel/Carousel.tsx

• Add optional indicator dots to carousel.

src/collection/Collection.tsx

• Added Collection component which wraps ReactTable with a view switcher for Table, Tile, or Card and adds table wide search.

src/dataTable/ReactTable.tsx

• Added ReactTable custom components for the Monorail design.
• Simply add the following lines to your top level js file: \

import { ReactTableDefaults } from 'react-table' \
import { MonorailReactTableOverrides } from '@monorail/src/dataTable/ReactTable' \
 \
Object.assign(ReactTableDefaults, MonorailReactTableOverrides) \

• Added better types for ReactTable. Replaced a lot of any with unknown while we build it out. Improved support for passing the generic around.

src/header/Header.tsx

• Add override styles ‘cssTitle’ for header.

src/helpers/baseStyles.ts

• Update basePrimaryStyles property order based on actual usage.
• Default text color to ThemeColors.BackgroundSecondary.

src/helpers/color.ts

• Grey90 added.

src/helpers/hooks.ts

• Added useRefCallback hook for when you want a react component to update when the ref returns an element.

src/helpers/theme.ts

• Define ActivePrimary and ActiveSecondary to Theme controller for usage on Button pressed states.

src/helpers/FramedLink.tsx

• Added FramedLink, which displays FramedIcon and HyperLink.

src/helpers/Hyperlink.ts

• Fix css definition error.

src/icon/FramedIcon.tsx

• Added support for showing when an item is archived.

src/icon/Icon.ts

• Switch and TreasureChest icons added.

src/icon/custom/Filter.tsx

• Updated Filter Icon.

src/icon/custom/Switch.tsx

• Added Switch icon.

src/icon/custom/TreasureChest.tsx

• Added TreasureChest icon.

src/inputs/CheckmarkSelectGroup.tsx

• Export types.

src/inputs/SearchController.tsx

• Export CompareSearchType.

src/inputs/TextField.tsx

• Added autofocus prop.

src/layout/ScrollAnimation.tsx

• Updated to be generic, no longer needing SingleCollection and a ref for the shadow on PageHeader.
• Works on anything that needs to vertically scroll with no props.

src/layout/SingleCollection.tsx

• Remove SingleCollection. Use ScrollAnimation directly.

src/modals/DeleteModal.tsx

• Delete modal confirmation component

src/modals/LargeModal.tsx

• Added headerRowChildren prop

src/modals/MediumModal.tsx

• Added headerRowChildren prop
• Added ‘customCloseButton’ prop

src/modals/ModalController.tsx

• Added ModalController to make it easier to programmatically open and close modals.
• Use when you need to open a modal when a user clicks on an item in ActionMenu.

src/pageHeader/PageHeader.tsx

• Remove shadow from PageHeader.
• Remove props that were used for SingleCollection.

src/pageHeader/PageLevelNavItem.tsx

• Fixed tab background alignment.

src/popOver/PopOver.tsx

• Added type definitions for dropDirections, dropXDirection and dropYDirection.
• Define defaultPopOverPosition for reuse
• Define getOverlayPosition helper to reuse same overlay positioning logic with other components

src/popOver/PopOverNext.tsx

• Started work on the next version of PopOver. Started breaking it into separate composable components.

src/portal/PortalController.tsx

• Added to control rendering of the Portal.

src/sharedHelpers/typeLevel.ts

• Added ReactRenderable type as a nullable ReactElement

src/sidebar/SideBarComponents.tsx

• Fix SideBar collapsing behavior
• Added SideBarMenuHeader component
• Update collapsing animations for all SideBarMenu components

src/tile/Tile.tsx

• Add onClick handler event to Tile components
• Added ‘isArchived’ prop to Tile

Release notes

Remove AlertBox

Button changes:

• Add iconLeft and iconRight props.

Modal changes:

• Add size props.

Add Toast component:

• Visual component for displaying dismissible alerts to the user without interrupting the flow or interactions in the application.
• Customize the visual styling based on the alert level (Info, Success, Error, Warning).
• Use pre-defined icons by alert level or custom icons for the Toasts.

Add HyperLink component:

• Wrapps ReactRouter 3 Link and has the same API.
• Used in places where we don't want to use a button, like the name of a record in a table.

Add LargeModal component:

• LargeModal gives you the room to do large CRUD actions while maintaining context for where the user is in the application, unlike FullScreenModal which covers the whole screen and removes the user from the current context.

Release Notes:

Break CommonStyles.js into:

• helpers/animation.ts
• helpers/appName.ts
• helpers/baseStyles.ts
• helpers/borderRadius.ts
• helpers/color.ts
• helpers/elevation.ts
• helpers/eventState.ts
• helpers/exports.ts
• helpers/flex.ts
• helper/hooks.ts
• helpers/size.ts
• helpers/typography.ts
• helpers/zIndex.ts

Add ButtonBar component

• Push mode added to Buttons
• Pressed styles for each Button display
• IconButton using Button component directly instead of styled button component
• Buttons background and borders for focused and active states moved to a floating element to keep different buttons sizes and states consistent between display styling
• ButtonsBar component
• Icon component detection between custom icons or app icons
• ButtonBar and Toolbar display styling added to Button component

Add Carousel Component

• Slider Carousel component

Add helpers/hooks.ts

• Added useEventListener hook as a abstraction over addEventListener and removeEventListener

PopOver, Menu, MiniModal, MediumModal, FullScreenModal changes

• Converted over to Hooks.
• Menu, MiniModal, MediumModal, FullScreenModal now remove themselves from the dom after their close animation finishes.

HorizontalStepper changes

• typography and color helpers added
• cssOverrides eliminated
• styles refactored to use getStateStyles function
• horizontal scroll added
• current step scrolls into view

TabBar changes

• TabBarIndicator now has better placement logic from getBoundingClientRect.
• TabBarIndicator animates using the FLIP technique now.

• Update dependencies.
• Update styled-components typing which affected every file.
• Added ActionsMenu Component.

• Added Divider Component.
• Fixed some typos and added new helpers to CoreUtils.

Updates to all components including TS support.