# Important Changes

  1. File structure has been simplified. Removed scaffolding feature as it introduced a lot of complexity.
  2. Removed Gulp and BrowserSync in favor of NPM scripts.
  3. Rubix 4.0.0 now uses nested routes. So common code (like Header, Sidebar and Footer) must be wrapped in a React component that is shared across pages (see routes.js for an example)
  4. SidebarNavItems now accept a hidden prop. This is useful when you have a route defined but don't need a corresponding Sidebar item for it.
  5. SidebarNavItems also accept a aliases prop that allow you to have route aliases so that multiple routes can activate a single SidebarNavItem.
  6. SidebarNavs are now searchable.

# Component API Changes

Most of the API now closely follows the React Bootstrap API along with our own extensions to the API. Every example is covered in our documentation. We will be only mentioning some important changes/deprecations here (this list is not exhaustive and will be updated over time so please refer to the COMPONENTS documentation for now):

  1. Please refer to Buttons for examples and complete documentation on all property attributes and API methods.

    • Component size can be varied using bsSize attribute in v4.0.0.
    • The close attribute has been removed in v4.0.0.

      
                    // Rubix v3.0.5 (removed in v4.0.0)
                    <Button close>Close</Button>
                  
  2. Please refer to Button Group for examples and complete documentation on all property attributes and API methods.

    • The dropup and dropdown attributes have been removed in v4.0.0. Please refer to Dropdowns for complete documentation on creating dropdowns with ButtonGroup.

      Rubix v3.0.5:
      
                    <ButtonGroup dropup>
                      <DropdownButton outlined inverse bsStyle='green'>
                        <span>Basic </span><Caret/>
                      </DropdownButton>
                      <Menu bsStyle='green'>
                        <MenuItem active href='#'>Action</MenuItem>
                        <MenuItem href='#'>Another action</MenuItem>
                        <MenuItem href='#'>Something else here</MenuItem>
                        <MenuItem divider/>
                        <MenuItem href='#'>Separated link</MenuItem>
                      </Menu>
                    </ButtonGroup>
                  
      Rubix v4.0.0:
      
                    // Rubix v4.0.0
                    <ButtonGroup>
                      <DropdownButton dropup title="Basic" id="dropup-btn" bsStyle="green">
                        <MenuItem active eventKey="1">Action</MenuItem>
                        <MenuItem eventKey="2">Another action</MenuItem>
                        <MenuItem eventKey="3">Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey="4">Separated link</MenuItem>
                      </DropdownButton>
                    </ButtonGroup>
                  
  3. Please refer to Dropdowns for examples and complete documentation on all property attributes and API methods.

    • Rubix 4.0.0 has DropdownButton, DropdownHoverButton, SplitButton and SplitHoverButton as various Menu wrappers.
    • toggleOnHover prop has been removed in favor of DropdownHoverButton / SplitHoverButton.
    • Menu component has been removed.
    • To change the orientation to top, enable the dropup prop.
    • To remove the caret, enable the noCaret prop.
    • To align dropdown right, enable the pullRight prop.
    • To size the dropdown, either use bsSize prop or shortcut props like lg, sm and xs.
    • To disable the dropdown, enable the disabled prop.
    • Rubix v3.0.5:
      
                    <ButtonGroup dropup>
                      <DropdownButton outlined inverse bsStyle='green'>
                        <span>Basic </span><Caret/>
                      </DropdownButton>
                      <Menu bsStyle='green'>
                        <MenuItem active href='#'>Action</MenuItem>
                        <MenuItem href='#'>Another action</MenuItem>
                        <MenuItem href='#'>Something else here</MenuItem>
                        <MenuItem divider/>
                        <MenuItem href='#'>Separated link</MenuItem>
                      </Menu>
                    </ButtonGroup>
                  
      Rubix v4.0.0:
      
                    <DropdownButton dropup disabled={false} noCaret={false} pullRight={false} bsSize="large" bsStyle='green' title='Basic' id='basic-dropdown'>
                      <MenuItem eventKey="1">Action</MenuItem>
                      <MenuItem eventKey="2">Another action</MenuItem>
                      <MenuItem eventKey="3" active>Active Item</MenuItem>
                      <MenuItem divider />
                      <MenuItem eventKey="4">Separated link</MenuItem>
                    </DropdownButton>
                  
  4. Please refer to Modals for examples and complete documentation on all property attributes and API methods.

    • Rubix 4.0.0 has a ModalTitle component apart from ModalDialog, ModalHeader, ModalBody and ModalFooter
    • disableAutoClose has been removed in favor of backdrop="static" attribute.
    • ModalManager has been removed in Rubix 4.0.0. Modals are now created and disposed off automatically.
  5. Please refer to Wells for examples and complete documentation on all property attributes and API methods.

    • Component size can be varied using bsSize attribute in v4.0.0.
  6. Please refer to Images for examples and complete documentation on all property attributes and API methods.

    • <Img> is now renamed to <Image> in v4.0.0.
  7. Please refer to Thumbnails for examples and complete documentation on all property attributes and API methods.

    • New in v4.0.0.
  8. Please refer to Form controls for examples and complete documentation on all property attributes and API methods.

    • <Input> is deprecated in v4.0.0 in favor of <FormControl>.
      Rubix v3.0.5:
      
                    <Input type='text' placeholder='Basic Text' />
                  
      Rubix v4.0.0:
      
                    <FormControl type='text' placeholder='Basic Text' />
                  
  9. Please refer to Responsive Embed for examples and complete documentation on all property attributes and API methods.

    • New in v4.0.0.
  10. Please refer to Carousels for examples and complete documentation on all property attributes and API methods.

    • New in v4.0.0.
  11. Please refer to Media objects for examples and complete documentation on all property attributes and API methods.

    • v4.0.0 now includes <MediaLeft>, <MediaRight> and <MediaListItem>
    • <Media> is now renamed to <MediaListItem>
    • <MediaDiv> is now renamed to <Media>
  12. Please refer to Progress bars for examples and complete documentation on all property attributes and API methods.

    • withLabel has been deprecated in favor of label attribute in v4.0.0.