Skip to content

Commit 04c3baa

Browse files
Dane Pilcheralharris-at
Dane Pilcher
and
alharris-at
authored
fix: use correct override index for built-in iconset components (#266)
 Co-authored-by: Alexander Harris <[email protected]>
1 parent 792ed4b commit 04c3baa

File tree

4 files changed

+1093
-7
lines changed

4 files changed

+1093
-7
lines changed

‎packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap

Lines changed: 328 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2368,6 +2368,332 @@ export default function SimplePropertyBindingDefaultValue(
23682368
}
23692369
`;
23702370
2371+
exports[`amplify render tests icon-indices does not return negative indices for icons 1`] = `
2372+
"/* eslint-disable */
2373+
import React from \\"react\\";
2374+
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
2375+
import {
2376+
EscapeHatchProps,
2377+
Flex,
2378+
FlexProps,
2379+
IconArrowForward,
2380+
IconBookmarkBorder,
2381+
IconMoreVert,
2382+
IconShare,
2383+
Image,
2384+
Text,
2385+
} from \\"@aws-amplify/ui-react\\";
2386+
2387+
export type SocialAProps = React.PropsWithChildren<
2388+
Partial<FlexProps> & {
2389+
overrides?: EscapeHatchProps | undefined | null;
2390+
}
2391+
>;
2392+
export default function SocialA(props: SocialAProps): React.ReactElement {
2393+
const { overrides: overridesProp, ...rest } = props;
2394+
const overrides = { ...overridesProp };
2395+
return (
2396+
/* @ts-ignore: TS2322 */
2397+
<Flex
2398+
width=\\"960px\\"
2399+
padding=\\"24px 24px 24px 24px\\"
2400+
backgroundColor=\\"rgba(255,255,255,1)\\"
2401+
position=\\"relative\\"
2402+
gap=\\"16px\\"
2403+
direction=\\"column\\"
2404+
{...rest}
2405+
{...getOverrideProps(overrides, \\"Flex\\")}
2406+
>
2407+
<Flex
2408+
padding=\\"0px 0px 0px 0px\\"
2409+
alignSelf=\\"stretch\\"
2410+
alignItems=\\"flex-start\\"
2411+
shrink=\\"0\\"
2412+
gap=\\"40px\\"
2413+
position=\\"relative\\"
2414+
direction=\\"row\\"
2415+
{...getOverrideProps(overrides, \\"Flex.Flex[0]\\")}
2416+
>
2417+
<Flex
2418+
padding=\\"0px 0px 0px 0px\\"
2419+
grow=\\"1\\"
2420+
gap=\\"16px\\"
2421+
width=\\"712px\\"
2422+
position=\\"relative\\"
2423+
basis=\\"712px\\"
2424+
direction=\\"column\\"
2425+
height=\\"344px\\"
2426+
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0]\\")}
2427+
>
2428+
<Flex
2429+
padding=\\"0px 0px 0px 0px\\"
2430+
alignSelf=\\"stretch\\"
2431+
position=\\"relative\\"
2432+
shrink=\\"0\\"
2433+
gap=\\"16px\\"
2434+
direction=\\"column\\"
2435+
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[0]\\")}
2436+
>
2437+
<Text
2438+
padding=\\"0px 0px 0px 0px\\"
2439+
alignSelf=\\"stretch\\"
2440+
color=\\"rgba(0,0,0,1)\\"
2441+
textAlign=\\"left\\"
2442+
shrink=\\"0\\"
2443+
display=\\"flex\\"
2444+
justifyContent=\\"flex-start\\"
2445+
fontFamily=\\"Inter\\"
2446+
width=\\"712px\\"
2447+
fontSize=\\"32px\\"
2448+
lineHeight=\\"40px\\"
2449+
position=\\"relative\\"
2450+
fontWeight=\\"700\\"
2451+
direction=\\"column\\"
2452+
children=\\"New Amplify Studio gives designers the ability to export UI to React code\\"
2453+
{...getOverrideProps(
2454+
overrides,
2455+
\\"Flex.Flex[0].Flex[0].Flex[0].Text[0]\\"
2456+
)}
2457+
></Text>
2458+
<Flex
2459+
padding=\\"0px 0px 0px 0px\\"
2460+
alignSelf=\\"stretch\\"
2461+
alignItems=\\"flex-start\\"
2462+
shrink=\\"0\\"
2463+
gap=\\"16px\\"
2464+
position=\\"relative\\"
2465+
direction=\\"row\\"
2466+
{...getOverrideProps(
2467+
overrides,
2468+
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0]\\"
2469+
)}
2470+
>
2471+
<Text
2472+
padding=\\"0px 0px 0px 0px\\"
2473+
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
2474+
textAlign=\\"left\\"
2475+
shrink=\\"0\\"
2476+
display=\\"flex\\"
2477+
letterSpacing=\\"0.010000000000000009px\\"
2478+
justifyContent=\\"flex-start\\"
2479+
fontFamily=\\"Inter\\"
2480+
fontSize=\\"16px\\"
2481+
lineHeight=\\"24px\\"
2482+
position=\\"relative\\"
2483+
fontWeight=\\"400\\"
2484+
direction=\\"column\\"
2485+
children=\\"Nikhil S\\"
2486+
{...getOverrideProps(
2487+
overrides,
2488+
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[0]\\"
2489+
)}
2490+
></Text>
2491+
<Text
2492+
padding=\\"0px 0px 0px 0px\\"
2493+
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
2494+
textAlign=\\"left\\"
2495+
shrink=\\"0\\"
2496+
display=\\"flex\\"
2497+
letterSpacing=\\"0.010000000000000009px\\"
2498+
justifyContent=\\"flex-start\\"
2499+
fontFamily=\\"Inter\\"
2500+
width=\\"1396px\\"
2501+
fontSize=\\"16px\\"
2502+
lineHeight=\\"24px\\"
2503+
position=\\"relative\\"
2504+
fontWeight=\\"400\\"
2505+
direction=\\"column\\"
2506+
children=\\"2nd December 2021\\"
2507+
{...getOverrideProps(
2508+
overrides,
2509+
\\"Flex.Flex[0].Flex[0].Flex[0].Flex[0].Text[1]\\"
2510+
)}
2511+
></Text>
2512+
</Flex>
2513+
</Flex>
2514+
<Flex
2515+
padding=\\"0px 0px 0px 0px\\"
2516+
alignSelf=\\"stretch\\"
2517+
alignItems=\\"flex-start\\"
2518+
shrink=\\"0\\"
2519+
gap=\\"16px\\"
2520+
position=\\"relative\\"
2521+
direction=\\"row\\"
2522+
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[1]\\")}
2523+
>
2524+
<IconArrowForward
2525+
padding=\\"0px 0px 0px 0px\\"
2526+
overflow=\\"hidden\\"
2527+
color=\\"rgba(207.00000286102295,77.00001060962677,193.99995803833008,1)\\"
2528+
shrink=\\"0\\"
2529+
width=\\"24px\\"
2530+
fontSize=\\"24px\\"
2531+
position=\\"relative\\"
2532+
type=\\"arrow_forward\\"
2533+
height=\\"24px\\"
2534+
{...getOverrideProps(
2535+
overrides,
2536+
\\"Flex.Flex[0].Flex[0].Flex[1].IconArrowForward[0]\\"
2537+
)}
2538+
></IconArrowForward>
2539+
<Text
2540+
padding=\\"0px 0px 0px 0px\\"
2541+
grow=\\"1\\"
2542+
color=\\"rgba(0,0,0,1)\\"
2543+
textAlign=\\"left\\"
2544+
display=\\"flex\\"
2545+
basis=\\"672px\\"
2546+
justifyContent=\\"flex-start\\"
2547+
fontFamily=\\"Inter\\"
2548+
width=\\"672px\\"
2549+
fontSize=\\"16px\\"
2550+
lineHeight=\\"24px\\"
2551+
position=\\"relative\\"
2552+
fontWeight=\\"400\\"
2553+
direction=\\"column\\"
2554+
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.\\"
2555+
{...getOverrideProps(
2556+
overrides,
2557+
\\"Flex.Flex[0].Flex[0].Flex[1].Text[0]\\"
2558+
)}
2559+
></Text>
2560+
</Flex>
2561+
<Flex
2562+
padding=\\"0px 0px 0px 0px\\"
2563+
alignItems=\\"flex-start\\"
2564+
shrink=\\"0\\"
2565+
gap=\\"16px\\"
2566+
width=\\"165px\\"
2567+
position=\\"relative\\"
2568+
direction=\\"row\\"
2569+
{...getOverrideProps(overrides, \\"Flex.Flex[0].Flex[0].Flex[2]\\")}
2570+
>
2571+
<Text
2572+
padding=\\"0px 0px 0px 0px\\"
2573+
color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
2574+
textAlign=\\"left\\"
2575+
shrink=\\"0\\"
2576+
display=\\"flex\\"
2577+
letterSpacing=\\"0.010000000000000009px\\"
2578+
justifyContent=\\"flex-start\\"
2579+
fontFamily=\\"Inter\\"
2580+
fontSize=\\"16px\\"
2581+
lineHeight=\\"24px\\"
2582+
position=\\"relative\\"
2583+
fontWeight=\\"400\\"
2584+
direction=\\"column\\"
2585+
children=\\"Share\\"
2586+
{...getOverrideProps(
2587+
overrides,
2588+
\\"Flex.Flex[0].Flex[0].Flex[2].Text[0]\\"
2589+
)}
2590+
></Text>
2591+
<IconBookmarkBorder
2592+
padding=\\"0px 0px 0px 0px\\"
2593+
overflow=\\"hidden\\"
2594+
color=\\"rgba(0,0,0,1)\\"
2595+
shrink=\\"0\\"
2596+
width=\\"24px\\"
2597+
fontSize=\\"24px\\"
2598+
position=\\"relative\\"
2599+
type=\\"bookmark_border\\"
2600+
height=\\"24px\\"
2601+
{...getOverrideProps(
2602+
overrides,
2603+
\\"Flex.Flex[0].Flex[0].Flex[2].IconBookmarkBorder[0]\\"
2604+
)}
2605+
></IconBookmarkBorder>
2606+
<IconShare
2607+
padding=\\"0px 0px 0px 0px\\"
2608+
overflow=\\"hidden\\"
2609+
color=\\"rgba(0,0,0,1)\\"
2610+
shrink=\\"0\\"
2611+
width=\\"24px\\"
2612+
fontSize=\\"24px\\"
2613+
position=\\"relative\\"
2614+
type=\\"share\\"
2615+
height=\\"24px\\"
2616+
{...getOverrideProps(
2617+
overrides,
2618+
\\"Flex.Flex[0].Flex[0].Flex[2].IconShare[0]\\"
2619+
)}
2620+
></IconShare>
2621+
<IconMoreVert
2622+
padding=\\"0px 0px 0px 0px\\"
2623+
overflow=\\"hidden\\"
2624+
color=\\"rgba(0,0,0,1)\\"
2625+
shrink=\\"0\\"
2626+
width=\\"24px\\"
2627+
fontSize=\\"24px\\"
2628+
position=\\"relative\\"
2629+
type=\\"more_vert\\"
2630+
height=\\"24px\\"
2631+
{...getOverrideProps(
2632+
overrides,
2633+
\\"Flex.Flex[0].Flex[0].Flex[2].IconMoreVert[0]\\"
2634+
)}
2635+
></IconMoreVert>
2636+
</Flex>
2637+
</Flex>
2638+
<Image
2639+
width=\\"160px\\"
2640+
padding=\\"0px 0px 0px 0px\\"
2641+
position=\\"relative\\"
2642+
borderRadius=\\"16px\\"
2643+
shrink=\\"0\\"
2644+
height=\\"160px\\"
2645+
{...getOverrideProps(overrides, \\"Flex.Flex[0].Image[0]\\")}
2646+
></Image>
2647+
</Flex>
2648+
<Flex
2649+
padding=\\"0px 0px 0px 0px\\"
2650+
alignSelf=\\"stretch\\"
2651+
alignItems=\\"flex-start\\"
2652+
shrink=\\"0\\"
2653+
gap=\\"16px\\"
2654+
position=\\"relative\\"
2655+
direction=\\"row\\"
2656+
{...getOverrideProps(overrides, \\"Flex.Flex[1]\\")}
2657+
>
2658+
<IconArrowForward
2659+
padding=\\"0px 0px 0px 0px\\"
2660+
overflow=\\"hidden\\"
2661+
color=\\"rgba(0,0,0,1)\\"
2662+
shrink=\\"0\\"
2663+
width=\\"24px\\"
2664+
fontSize=\\"24px\\"
2665+
position=\\"relative\\"
2666+
type=\\"arrow_forward\\"
2667+
height=\\"24px\\"
2668+
{...getOverrideProps(overrides, \\"Flex.Flex[1].IconArrowForward[0]\\")}
2669+
></IconArrowForward>
2670+
<Text
2671+
padding=\\"0px 0px 0px 0px\\"
2672+
grow=\\"1\\"
2673+
color=\\"rgba(0,0,0,1)\\"
2674+
textAlign=\\"left\\"
2675+
display=\\"flex\\"
2676+
letterSpacing=\\"0.010000000000000009px\\"
2677+
textDecoration=\\"underline\\"
2678+
basis=\\"872px\\"
2679+
justifyContent=\\"flex-start\\"
2680+
fontFamily=\\"Inter\\"
2681+
width=\\"872px\\"
2682+
fontSize=\\"16px\\"
2683+
lineHeight=\\"24px\\"
2684+
position=\\"relative\\"
2685+
fontWeight=\\"400\\"
2686+
direction=\\"column\\"
2687+
children=\\"Read more\\"
2688+
{...getOverrideProps(overrides, \\"Flex.Flex[1].Text[0]\\")}
2689+
></Text>
2690+
</Flex>
2691+
</Flex>
2692+
);
2693+
}
2694+
"
2695+
`;
2696+
23712697
exports[`amplify render tests primitives Built-in Iconset 1`] = `
23722698
"/* eslint-disable */
23732699
import React from \\"react\\";
@@ -2392,10 +2718,10 @@ export default function MyIcons(props: MyIconsProps): React.ReactElement {
23922718
/* @ts-ignore: TS2322 */
23932719
<View {...rest} {...getOverrideProps(overrides, \\"View\\")}>
23942720
<IconCloud
2395-
{...getOverrideProps(overrides, \\"View.IconCloud[-1]\\")}
2721+
{...getOverrideProps(overrides, \\"View.IconCloud[0]\\")}
23962722
></IconCloud>
23972723
<IconBrightness_1
2398-
{...getOverrideProps(overrides, \\"View.IconBrightness_1[-1]\\")}
2724+
{...getOverrideProps(overrides, \\"View.IconBrightness_1[0]\\")}
23992725
></IconBrightness_1>
24002726
</View>
24012727
);

‎packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,4 +410,10 @@ describe('amplify render tests', () => {
410410
expect(generateWithAmplifyRenderer('builtInIconset').componentText).toMatchSnapshot();
411411
});
412412
});
413+
414+
describe('icon-indices', () => {
415+
it('does not return negative indices for icons', () => {
416+
expect(generateWithAmplifyRenderer('iconBug').componentText).toMatchSnapshot();
417+
});
418+
});
413419
});

0 commit comments

Comments
 (0)