Skip to content

Releases: kettanaito/atomic-layout

[email protected]

06 Aug 08:19
Compare
Choose a tag to compare

Bug fixes

  • Fixes an issue that resulted into the useResponsiveValue hook value not being updated when one of its dependencies updates (#326, #327).

[email protected]

24 Apr 11:02
Compare
Choose a tag to compare

Bug fixes

  • Fixes an issue that resulted into area component losing their state when parent updated (#320, #321)

[email protected]

22 Apr 09:24
Compare
Choose a tag to compare

Breaking changes

  • useResponsiveComponent() function has been renamed to makeResponsive() in order to prevent a confusion over that function being a React hook (which it's not).
- import { withResponsiveComponent } from 'atomic-layout'
+ import { makeResponsive } from 'atomic-layout'

const Image = styled.img``

- export default withResponsiveComponent(Image)
+ export default makeResponsive(Image)

<Image src="small.png" srcMd="large.png" />

Features

  • Adds a new query() utility function for shorthand composition of inline media queries aligned with your Layout options:
import styled from 'styled-components'
import { query } from 'atomic-layout'

const Component = styled.div`
  @media ${query({ from: 'md' })} {
    background-color: red;
  }
`

[email protected]

05 Apr 10:14
Compare
Choose a tag to compare

Changes

  • Removes the <MediaQuery/> component (#309, #313). Please replace its usage in your code with the useMediaQuery hook:
- import { MediaQuery } from 'atomic-layout'
+ import { useMediaQuery } from 'atomic-layout'

const Usage = () => {
+  const matches = useMediaQuery({ minWidth: '500px' })

  return (
-  <MediaQuery minWidth="500px">
-    {matches => matches && <p>Conditional content</p>}
-  </MediaQuery>
+  {matches && <p>Conditional content</p>}
  )
}

Bug fixes

  • Fixes an issue that resulted into the library's README being broken on NPM (#277)

[email protected]

01 Apr 14:35
Compare
Choose a tag to compare

This is published as a minor release, since in case you have a wrongly typed responsive props (i.e. templatelg) they worked in the previous release, but will stop doing so in this one.

Bug fixes

  • Fixes an issue when providing a lowercase responsive prop would register its behavior/breakpoint (#296, #312)

[email protected]

01 Apr 14:10
Compare
Choose a tag to compare

Features

  • Adds a new useResponsiveQuery hook (docs)

Bug fixes

  • Fixes an issue that resulted Only to remount its children when the parent component has been updated (#308 , #310)

[email protected]

30 Mar 08:57
Compare
Choose a tag to compare

Bug fixes

  • Exported components now come with a meaningful displayName property for easier debugging in React DevTools (#306)

0.13.0

12 Feb 08:12
Compare
Choose a tag to compare

Bug fixes

  • Fixes an issue that prevented forwarding of refs with useResponsiveComponent (#263, #264)
  • Fixes an issue that prevented components to be re-rendered upon props change with useResponsiveProps (#265, #267)

0.12.7

09 Feb 20:11
Compare
Choose a tag to compare

Features

  • Supports order CSS property on Box component and area components generated by Composition (#300)

0.12.0

06 Dec 11:43
Compare
Choose a tag to compare

This release does not introduce new features, but changes the way Atomic Layout functions internally. It's recommended to update to 0.12.0 to test the changes and be ready for the upcoming features.

Internal

  • Restructures Atomic Layout to be a monorepo
  • A monorepo includes @atomic-layout/core library and a single rendering implementation atomic-layout (styled-components) for backward-compatibility