Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use correct override index for built-in iconset components #266

Merged
merged 2 commits into from
Dec 2, 2021
Merged

fix: use correct override index for built-in iconset components #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5624888
fix: address issue in node index for icons
alharris-at Dec 1, 2021
a214ec4
fix: use correct override index for built-in iconset components
dpilch Dec 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
330 changes: 328 additions & 2 deletions packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Open in desktop
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
Open in desktop
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();
});
});
});
Loading