Week 40 Release - “Talking Heads”

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, 2019 Release - “Steve Miller Band”

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 29, 2019 Release - “REO Speedwagon”

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, 2019 Release

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, 2019 release

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

Week 17, 2019 Release

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.

Week 16, 2019 Release

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.

Week 14, 2019 Release

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

Week 12, 2019 Release

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

Week 10, 2019 Release

Updates to all components including TS support.