@itwin/itwinui-layouts-react@0.4.0

Minor Changes

• #87: Added support for @itwin/itwinui-react v3 and removed dependency on @itwin/itwinui-variables.
  • Updated dependencies: @itwin/itwinui-layouts-css@0.4.0

@itwin/itwinui-layouts-css@0.4.0

Minor Changes

• #87: Added support for @itwin/itwinui-react v3 and removed dependency on @itwin/itwinui-variables.

v0.3.0

@itwin/itwinui-layouts-css@0.3.0

• #72: Breakpoints:
  • Removed landscape-mobile breakpoint.
  • Using rem instead of px.
• #70: Page layout:
  • Added bottom-bar area in page grid.
  • Added action-bar layout for bottom-bar.

@itwin/itwinui-layouts-react@0.3.0

• #72: GridItem: removed landscapeMobile breakpoint from ColumnSpan and ColumnStart types.
• #72: Improved breakpoints for page and grid layouts.
• #70: Added a sticky BottomBar and ActionBar layout to use within BottomBar. ActionBar has 3 slots for custom components: ActionBar.Left, ActionBar.Center and ActionBar.Right.

  <PageLayout.BottomBar>
    <ActionBar>
      <ActionBar.Left/>
      <ActionBar.Center/>
      <ActionBar.Right/>
    </ActionBar>
  </PageLayout.BottomBar>

v0.2.0

@itwin/itwinui-layouts-css v0.2.0 and @itwin/itwinui-layouts-react v0.2.0

What's new

• Using iTwinUI-variables
• Removed dependency on iTWinUI-css

Full Changelog: v0.1.3...v0.2.0

v0.1.3

@itwin/itwinui-layouts-css v0.1.3 and @itwin/itwinui-layouts-react v0.1.3

Fixes

• Grid.Item: Added max-width: 100% to fix overflow in Firefox (#61)

---

Full Changelog: v0.1.2...v0.1.3

v0.1.2

@itwin/itwinui-layouts-react v0.1.2 (2022-05-26)

What's new

• Added PageLayout component. It has PageLayout.Header, PageLayout.SideNavigation, PageLayout.Content, PageLayout.TitleArea and PageLayout.ToolsArea sub-components that place content in the correct places.
• Added FluidGrid component.
  • Use it for items (e.g. tiles) array.
  • It has minItemWidth prop that defines minimum width of the item that is used for responsiveness.
• Added Grid component. It is based on CSS grid and has 12 columns. As children pass Grid.Item sub-component which has:
  • columnSpan prop that defines how many columns the item should span.
  • columnStart prop that defines the column the item should start in.

@itwin/itwinui-layouts-css v0.1.1 (2022-05-25)

What's new

• Added PageLayout component. It has sub-components that place content in the correct places.
• Added FluidGrid component.
  • Use it for items (e.g. tiles) array.
  • It has --_iui-grid-item-min-width CSS variable that defines minimum width of the item that is used for responsiveness.
• Added Grid component. It is based on CSS grid and has 12 columns. As children pass iui-layouts-grid-item sub-component which has:
  • --_iui-grid-item-column-span-[BREAKPOINT] prop that defines how many columns the item should span.
  • --_iui-grid-item-column-start-[BREAKPOINT] prop that defines the column the item should start in.