WIP(many): add question marks

instructure · Jul 30, 2024 · b033ff4 · b033ff4
1 parent 45886b8
commit b033ff4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/packages/ui-codemods/__testfixtures__/updateV10Breaking/colors.output.js b/packages/ui-codemods/__testfixtures__/updateV10Breaking/colors.output.js
@@ -11,7 +11,7 @@ export const generateStyle = () => {
       label: 'optionWrapper',
       margin: '-0.5rem -0.75rem',
       padding: '0.5rem 0.75rem',
-      border: '0 solid ' + canvas.colors.contrasts.grey1214,
+      border: '0 solid ' + canvas.colors?.contrasts?.grey1214,
       borderBottomWidth: '1px',
       display: 'flex',
       maxWidth: '100%',
@@ -22,7 +22,7 @@ export const generateStyle = () => {
       label: 'optionIcon',
       width: '36px',
       height: '36px',
-      backgroundColor: canvasHighContrast.colors.contrasts.grey100100,
+      backgroundColor: canvasHighContrast.colors?.contrasts?.grey100100,
       borderRadius: 100,
       flexShrink: 0,
       display: 'flex',

diff --git a/packages/ui-codemods/__testfixtures__/updateV10Breaking/colors2.output.tsx b/packages/ui-codemods/__testfixtures__/updateV10Breaking/colors2.output.tsx
@@ -161,14 +161,14 @@ const Header: React.FC<HeaderProps> = ({
       <View
         background="primary"
         themeOverride={{
-          backgroundPrimary: canvas.colors.contrasts.grey100100
+          backgroundPrimary: canvas.colors?.contrasts?.grey100100
         }}
         as="div"
       >
         <View
           background="primary"
           themeOverride={{
-            backgroundPrimary: canvas.colors.contrasts.grey125125
+            backgroundPrimary: canvas.colors?.contrasts?.grey125125
           }}
           as="div"
         >
@@ -193,7 +193,7 @@ const Header: React.FC<HeaderProps> = ({
                         size="small"
                         color="primary"
                         themeOverride={{
-                          primaryColor: canvas.colors.contrasts.grey1214
+                          primaryColor: canvas.colors?.contrasts?.grey1214
                         }}
                       >
                         {currentClient?.name}
@@ -255,7 +255,7 @@ const Header: React.FC<HeaderProps> = ({
                         size="x-small"
                         color="primary"
                         themeOverride={{
-                          primaryColor: canvas.colors.contrasts.grey1214
+                          primaryColor: canvas.colors?.contrasts?.grey1214
                         }}
                       >
                         By Instructure
@@ -312,7 +312,7 @@ const Header: React.FC<HeaderProps> = ({
                                     primaryColor:
                                       variant === 'highlighted'
                                         ? 'white'
-                                        : canvas.colors.contrasts.grey4570
+                                        : canvas.colors?.contrasts?.grey4570
                                   }}
                                 >
                                   {bank.item_count}
@@ -554,19 +554,21 @@ const Header: React.FC<HeaderProps> = ({
             padding="small"
             display="flex"
             themeOverride={{
-              backgroundPrimary: canvas.colors.contrasts.grey1111
+              backgroundPrimary: canvas.colors?.contrasts?.grey1111
             }}
           >
             <IconInfoLine
               size="x-small"
               color="primary"
-              themeOverride={{ primaryColor: canvas.colors.contrasts.grey4570 }}
+              themeOverride={{
+                primaryColor: canvas.colors?.contrasts?.grey4570
+              }}
             />
             <View margin="0 0 0 small" as="span">
               <Text
                 color="primary"
                 themeOverride={{
-                  primaryColor: canvas.colors.contrasts.grey100100
+                  primaryColor: canvas.colors?.contrasts?.grey100100
                 }}
               >
                 The active context is visible in the header.
@@ -658,7 +660,7 @@ const HeaderSearchItem = React.memo<HeaderSearchItemProps>(
               color="primary"
               themeOverride={{
                 primaryColor: isHighlighted
-                  ? canvas.colors.contrasts.blue4570
+                  ? canvas.colors?.contrasts?.blue4570
                   : 'white'
               }}
             />
@@ -667,7 +669,7 @@ const HeaderSearchItem = React.memo<HeaderSearchItemProps>(
               color="primary"
               themeOverride={{
                 primaryColor: isHighlighted
-                  ? canvas.colors.contrasts.blue4570
+                  ? canvas.colors?.contrasts?.blue4570
                   : 'white'
               }}
             />
@@ -689,7 +691,7 @@ const HeaderSearchItem = React.memo<HeaderSearchItemProps>(
               themeOverride={{
                 primaryColor: isHighlighted
                   ? 'white'
-                  : canvas.colors.contrasts.green4570
+                  : canvas.colors?.contrasts?.green4570
               }}
             >
               {option.Bank.title}
@@ -701,7 +703,7 @@ const HeaderSearchItem = React.memo<HeaderSearchItemProps>(
               themeOverride={{
                 primaryColor: isHighlighted
                   ? 'white'
-                  : canvas.colors.contrasts.grey4570
+                  : canvas.colors?.contrasts?.grey4570
               }}
             >
               {' '}
@@ -714,7 +716,7 @@ const HeaderSearchItem = React.memo<HeaderSearchItemProps>(
               themeOverride={{
                 primaryColor: isHighlighted
                   ? 'white'
-                  : canvas.colors.contrasts.grey4570
+                  : canvas.colors?.contrasts?.grey4570
               }}
             >
               {option.type === 'ITEM'

diff --git a/packages/ui-codemods/lib/utils/updateToV10Colors.ts b/packages/ui-codemods/lib/utils/updateToV10Colors.ts
@@ -71,7 +71,7 @@ export function updateToV10Colors(
         astNode.property.name in colorMapping
       ) {
         hasModifications = true
-        astNode.object.property.name = 'colors.contrasts'
+        astNode.object.property.name = 'colors?.contrasts?'
         astNode.property.name = colorMapping[astNode.property.name]
       }
       hasModifications = true