Upgrade emotion to v11

[thomaschaaf]

Hello!

I am currently building a flex ui 2.0 plugin and experiencing some typescript errors. I think this could be due to flex ui using emotion v11 but styling-library only using v10.

e.g.

import { Box } from '@twilio-paste/core';
export const Container = ({ children }: any) => {
  return <Box> {children}</Box>;
};

results in

TS2741: Property 'css' is missing in type '{ children: string; }' but required in type 'Pick '.

Thomas

[TheSisb]

Hi @thomaschaaf,

We're currently planning work to upgrade Emotion but don't have a concrete timeline for when it will land as the upgrade will need to be rolled out carefully. Seeing as your error is around typings, I wonder if setting your project's csstype package resolution to the one we use will fix your issue. Something like:

"resolutions": {
    "csstype": "2.6.10",
},

If you add that to your package.json, reinstall deps (npm i or yarn), and rebuild does it work?

[thomaschaaf]

sadly it did not work: thomaschaaf/twilio-flex-ui-v2-plugin@a0595b7#diff-06dfb421cc8d0e2853764c4769af2e9052732590094fbc89cc91f4c2a9d8c038R28 I created git repo to show it. I would be very thankful if you would be able to find a way to get typings to work because now our plugin is just full of ts-ignores..

[gloriliale]

Hi @thomaschaaf! We're working on figuring out a mitigation strategy for this. Thanks for bringing it to our attention: we'll keep you updated.

[andioneto]

Hello @thomaschaaf 👋 Our major update that included an update to Emotion v11 was just released at the end of last week. Could you please update your dependencies and let us know if you still see type errors?

[thomaschaaf]

Awesome! It works now and I can remove a bunch of ts-ignores.

Sorry to hijack the thread but I still have some specific issues with the types for flex. Maybe you are able to forward them to the correct place.

addReducer is not typed

error TS2339: Property 'addReducer' does not exist on type 'Store<FlexState, AnyAction>'.

68     if (!manager.store.addReducer) {

Worker Attributes

 error TS2339: Property 'tealToolsLanguage' does not exist on type 'Object'.

32     const locale: string = manager.workerClient!.attributes.tealToolsLanguage;

Task Attributes

error TS2339: Property 'direction' does not exist on type 'Object'.

26         const direction = reservation.task.attributes.direction;

Custom state

error TS7053: Element implicitly has an 'any' type because expression of type '"cortex-flex-plugin"' can't be used to index type 'FlexState'.
  Property 'cortex-flex-plugin' does not exist on type 'FlexState'.

5   return Flex.Manager.getInstance().store.getState()['cortex-flex-plugin'];

Many of flex components are not typed e.g. Flex.IconButton

error TS2322: Type '{ icon: string; className: string; onClick: () => Promise<void>; title: string; themeOverride: CSSObject; }' is not assignable to type 'IntrinsicAttributes & PropsWithChildren<(Pick<Pick<Pick<IconButtonProps, "size" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 280 more ... | "edge"> & RefAttributes<...>, "size" | ... 283 more ... | keyof RefAttributes<...>> & StyledComponentProps<...>, "size" | ... 282 more ...'.
  Property 'css' is missing in type '{ icon: string; className: string; onClick: () => Promise<void>; title: string; themeOverride: CSSObject; }' but required in type 'Pick<Pick<Pick<IconButtonProps, "size" | "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 278 more ... | "edge"> & RefAttributes<...>, "size" | ... 283 more ... | keyof RefAttributes<...>> & StyledComponentProps<...> & { ...; }, "size" | ...'.

99       <Flex.IconButton

If you'd like to stay in contact: [email protected]

[nkrantz]

Hey @thomaschaaf - sorry for the delay. I shared these errors with the Flex team and have been waiting for a response but haven't heard back yet. I'd recommend opening a customer support ticket with these questions if you're still experiencing the same issues. That way the Flex team can get back to you directly.

[kate-porter]

Hey @thomaschaaf - just wanted to check in here to make sure you were able to get in touch with our support team regarding the errors you were seeing in Flex.

[thomaschaaf]

I will try to get in contact with them directly. Thanks :) Some of the things were resolved in the latest version already.