Skip to content

Commit

Permalink
fix: use correct override index for built-in iconset components (#266)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alexander Harris <alharris@amazon.com>
  • Loading branch information
@dpilch @alharris-at
dpilch and alharris-at committed Dec 2, 2021
1 parent 792ed4b commit 04c3baa
Show file tree
Hide file tree
Showing 4 changed files with 1,093 additions and 7 deletions.
330 changes: 328 additions & 2 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2368,6 +2368,332 @@ export default function SimplePropertyBindingDefaultValue(
}
`;
exports[`amplify render tests icon-indices does not return negative indices for icons 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import {
EscapeHatchProps,
Flex,
FlexProps,
IconArrowForward,
IconBookmarkBorder,
IconMoreVert,
IconShare,
Image,
Text,
} from \\"@aws-amplify/ui-react\\";
export type SocialAProps = React.PropsWithChildren<
Partial<FlexProps> & {
overrides?: EscapeHatchProps | undefined | null;
}
>;
export default function SocialA(props: SocialAProps): React.ReactElement {
const { overrides: overridesProp, ...rest } = props;
const overrides = { ...overridesProp };
return (
/* @ts-ignore: TS2322 */
<Flex
width=\\"960px\\"
padding=\\"24px 24px 24px 24px\\"
backgroundColor=\\"rgba(255,255,255,1)\\"
position=\\"relative\\"
gap=\\"16px\\"
direction=\\"column\\"
{...rest}
{...getOverrideProps(overrides, \\"Flex\\")}
>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
alignItems=\\"flex-start\\"
shrink=\\"0\\"
gap=\\"40px\\"
position=\\"relative\\"
direction=\\"row\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0]\\")}
>
<Flex
padding=\\"0px 0px 0px 0px\\"
grow=\\"1\\"
gap=\\"16px\\"
width=\\"712px\\"
position=\\"relative\\"
basis=\\"712px\\"
direction=\\"column\\"
height=\\"344px\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0]\\")}
>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
position=\\"relative\\"
shrink=\\"0\\"
gap=\\"16px\\"
direction=\\"column\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[0]\\")}
>
<Text
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
color=\\"rgba(0,0,0,1)\\"
textAlign=\\"left\\"
shrink=\\"0\\"
display=\\"flex\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
width=\\"712px\\"
fontSize=\\"32px\\"
lineHeight=\\"40px\\"
position=\\"relative\\"
fontWeight=\\"700\\"
direction=\\"column\\"
children=\\"New Amplify Studio gives designers the ability to export UI to React code\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[0].Text[0]\\"
)}
></Text>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
alignItems=\\"flex-start\\"
shrink=\\"0\\"
gap=\\"16px\\"
position=\\"relative\\"
direction=\\"row\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0]\\"
)}
>
<Text
padding=\\"0px 0px 0px 0px\\"
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
textAlign=\\"left\\"
shrink=\\"0\\"
display=\\"flex\\"
letterSpacing=\\"0.010000000000000009px\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
fontSize=\\"16px\\"
lineHeight=\\"24px\\"
position=\\"relative\\"
fontWeight=\\"400\\"
direction=\\"column\\"
children=\\"Nikhil S\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[0]\\"
)}
></Text>
<Text
padding=\\"0px 0px 0px 0px\\"
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
textAlign=\\"left\\"
shrink=\\"0\\"
display=\\"flex\\"
letterSpacing=\\"0.010000000000000009px\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
width=\\"1396px\\"
fontSize=\\"16px\\"
lineHeight=\\"24px\\"
position=\\"relative\\"
fontWeight=\\"400\\"
direction=\\"column\\"
children=\\"2nd December 2021\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[1]\\"
)}
></Text>
</Flex>
</Flex>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
alignItems=\\"flex-start\\"
shrink=\\"0\\"
gap=\\"16px\\"
position=\\"relative\\"
direction=\\"row\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[1]\\")}
>
<IconArrowForward
padding=\\"0px 0px 0px 0px\\"
overflow=\\"hidden\\"
color=\\"rgba(207.00000286102295,77.00001060962677,193.99995803833008,1)\\"
shrink=\\"0\\"
width=\\"24px\\"
fontSize=\\"24px\\"
position=\\"relative\\"
type=\\"arrow_forward\\"
height=\\"24px\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[1].IconArrowForward[0]\\"
)}
></IconArrowForward>
<Text
padding=\\"0px 0px 0px 0px\\"
grow=\\"1\\"
color=\\"rgba(0,0,0,1)\\"
textAlign=\\"left\\"
display=\\"flex\\"
basis=\\"672px\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
width=\\"672px\\"
fontSize=\\"16px\\"
lineHeight=\\"24px\\"
position=\\"relative\\"
fontWeight=\\"400\\"
direction=\\"column\\"
children=\\"AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[1].Text[0]\\"
)}
></Text>
</Flex>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignItems=\\"flex-start\\"
shrink=\\"0\\"
gap=\\"16px\\"
width=\\"165px\\"
position=\\"relative\\"
direction=\\"row\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[2]\\")}
>
<Text
padding=\\"0px 0px 0px 0px\\"
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
textAlign=\\"left\\"
shrink=\\"0\\"
display=\\"flex\\"
letterSpacing=\\"0.010000000000000009px\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
fontSize=\\"16px\\"
lineHeight=\\"24px\\"
position=\\"relative\\"
fontWeight=\\"400\\"
direction=\\"column\\"
children=\\"Share\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[2].Text[0]\\"
)}
></Text>
<IconBookmarkBorder
padding=\\"0px 0px 0px 0px\\"
overflow=\\"hidden\\"
color=\\"rgba(0,0,0,1)\\"
shrink=\\"0\\"
width=\\"24px\\"
fontSize=\\"24px\\"
position=\\"relative\\"
type=\\"bookmark_border\\"
height=\\"24px\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[2].IconBookmarkBorder[0]\\"
)}
></IconBookmarkBorder>
<IconShare
padding=\\"0px 0px 0px 0px\\"
overflow=\\"hidden\\"
color=\\"rgba(0,0,0,1)\\"
shrink=\\"0\\"
width=\\"24px\\"
fontSize=\\"24px\\"
position=\\"relative\\"
type=\\"share\\"
height=\\"24px\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[2].IconShare[0]\\"
)}
></IconShare>
<IconMoreVert
padding=\\"0px 0px 0px 0px\\"
overflow=\\"hidden\\"
color=\\"rgba(0,0,0,1)\\"
shrink=\\"0\\"
width=\\"24px\\"
fontSize=\\"24px\\"
position=\\"relative\\"
type=\\"more_vert\\"
height=\\"24px\\"
{...getOverrideProps(
overrides,
\\"Flex.Flex[0].Flex[0].Flex[2].IconMoreVert[0]\\"
)}
></IconMoreVert>
</Flex>
</Flex>
<Image
width=\\"160px\\"
padding=\\"0px 0px 0px 0px\\"
position=\\"relative\\"
borderRadius=\\"16px\\"
shrink=\\"0\\"
height=\\"160px\\"
{...getOverrideProps(overrides, \\"Flex.Flex[0].Image[0]\\")}
></Image>
</Flex>
<Flex
padding=\\"0px 0px 0px 0px\\"
alignSelf=\\"stretch\\"
alignItems=\\"flex-start\\"
shrink=\\"0\\"
gap=\\"16px\\"
position=\\"relative\\"
direction=\\"row\\"
{...getOverrideProps(overrides, \\"Flex.Flex[1]\\")}
>
<IconArrowForward
padding=\\"0px 0px 0px 0px\\"
overflow=\\"hidden\\"
color=\\"rgba(0,0,0,1)\\"
shrink=\\"0\\"
width=\\"24px\\"
fontSize=\\"24px\\"
position=\\"relative\\"
type=\\"arrow_forward\\"
height=\\"24px\\"
{...getOverrideProps(overrides, \\"Flex.Flex[1].IconArrowForward[0]\\")}
></IconArrowForward>
<Text
padding=\\"0px 0px 0px 0px\\"
grow=\\"1\\"
color=\\"rgba(0,0,0,1)\\"
textAlign=\\"left\\"
display=\\"flex\\"
letterSpacing=\\"0.010000000000000009px\\"
textDecoration=\\"underline\\"
basis=\\"872px\\"
justifyContent=\\"flex-start\\"
fontFamily=\\"Inter\\"
width=\\"872px\\"
fontSize=\\"16px\\"
lineHeight=\\"24px\\"
position=\\"relative\\"
fontWeight=\\"400\\"
direction=\\"column\\"
children=\\"Read more\\"
{...getOverrideProps(overrides, \\"Flex.Flex[1].Text[0]\\")}
></Text>
</Flex>
</Flex>
);
}
"
`;
exports[`amplify render tests primitives Built-in Iconset 1`] = `
"/* eslint-disable */
import React from \\"react\\";
Expand All @@ -2392,10 +2718,10 @@ export default function MyIcons(props: MyIconsProps): React.ReactElement {
/* @ts-ignore: TS2322 */
<View {...rest} {...getOverrideProps(overrides, \\"View\\")}>
<IconCloud
{...getOverrideProps(overrides, \\"View.IconCloud[-1]\\")}
{...getOverrideProps(overrides, \\"View.IconCloud[0]\\")}
></IconCloud>
<IconBrightness_1
{...getOverrideProps(overrides, \\"View.IconBrightness_1[-1]\\")}
{...getOverrideProps(overrides, \\"View.IconBrightness_1[0]\\")}
></IconBrightness_1>
</View>
);
Expand Down
6 changes: 6 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,4 +410,10 @@ describe('amplify render tests', () => {
expect(generateWithAmplifyRenderer('builtInIconset').componentText).toMatchSnapshot();
});
});

describe('icon-indices', () => {
it('does not return negative indices for icons', () => {
expect(generateWithAmplifyRenderer('iconBug').componentText).toMatchSnapshot();
});
});
});

0 comments on commit 04c3baa

Please sign in to comment.