Merge pull request #1130 from Bedrock-Layouts/feature/frame

feat(frame): allow ratio string in `ratio` prop
Bedrock-Layouts · Feb 16, 2022 · 89a528b · 89a528b
2 parents 45733c7 + 97b2fca
commit 89a528b
Show file tree

Hide file tree

Showing 9 changed files with 303 additions and 85 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -24,3 +24,4 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: false
diff --git a/packages/frame/README.md b/packages/frame/README.md
@@ -42,7 +42,8 @@ For styling purposes, you can select `data-bedrock-frame`.
 
 ## API
 
-| Property | Description                                                                                                                   | Type               | Default           |
-| :------: | :---------------------------------------------------------------------------------------------------------------------------: | :----------------: | :---------------: |
-| ratio    | Aspect ratio that you want the child element to maintain                                                                      | `[number, number]` | medium breakpoint |
-| position | Alignment of the child element. Use [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) | string             | `50%`             |
+∏
+| Property | Description | Type | Default |
+| :------: | :---------------------------------------------------------------------------------------------------------------------------: | :---------------: | :-------------------: | ----------------- |
+| ratio | Aspect ratio that you want the child element to maintain | `[number, number] | ${number}/${number}` | medium breakpoint |
+| position | Alignment of the child element. Use [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) | string | `50%` |