chore(lint): turn on dynamic css rule, move more styles to constants (#7421)

Author: Anemy

configs/eslint-config-compass/index.js

@@ -98,7 +98,7 @@ module.exports = {
   plugins: [...shared.plugins, '@mongodb-js/compass', 'chai-friendly'],
   rules: {
     ...shared.rules,
-    '@mongodb-js/compass/no-inline-emotion-css': 'warn',
+    '@mongodb-js/compass/no-inline-emotion-css': 'error',
     '@mongodb-js/compass/no-leafygreen-outside-compass-components': 'error',
     '@mongodb-js/compass/unique-mongodb-log-id': [
       'error',

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx

@@ -131,6 +131,10 @@ const groupHeaderStyles = css({
   gap: spacing[400],
 });
 
+const nestedGroupButtonContainerStyles = css({
+  display: 'inherit',
+});
+
 const MatchGroupForm = ({
   fields,
   group,
@@ -259,7 +263,7 @@ const MatchGroupForm = ({
           justify="middle"
           enabled={disableAddNestedGroupBtn}
           trigger={
-            <div style={{ display: 'inherit' }}>
+            <div className={nestedGroupButtonContainerStyles}>
               <Button
                 size="xsmall"
                 disabled={disableAddNestedGroupBtn}

packages/compass-assistant/src/components/assistant-chat.tsx

@@ -130,6 +130,11 @@ const assistantChatFixesLightStyles = css({
   },
 });
 
+const chatContainerOverrideStyle = {
+  height: '100%',
+  width: '100%',
+};
+
 const messageFeedFixesStyles = css({
   display: 'flex',
   flexDirection: 'column-reverse',
@@ -205,6 +210,14 @@ const welcomeTextStyles = css({
   margin: `${spacing[100]}px 0 0 0`,
 });
 
+const sparkleIconOverrideStyle = {
+  color: palette.green.dark1,
+};
+
+const inputBarTextareaProps = {
+  placeholder: 'Ask a question',
+};
+
 export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   chat,
   hasNonGenuineConnections,
@@ -369,7 +382,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
         assistantChatFixesStyles,
         darkMode ? assistantChatFixesDarkStyles : assistantChatFixesLightStyles
       )}
-      style={{ height: '100%', width: '100%' }}
+      style={chatContainerOverrideStyle}
     >
       <LeafyGreenChatProvider variant={Variant.Compact}>
         <ChatWindow title="MongoDB Assistant" className={chatWindowFixesStyles}>
@@ -469,7 +482,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                 <Icon
                   glyph="Sparkle"
                   size="large"
-                  style={{ color: palette.green.dark1 }}
+                  style={sparkleIconOverrideStyle}
                 />
                 <span>MongoDB Assistant</span>
               </h4>
@@ -488,9 +501,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                 void handleMessageSend(messageBody)
               }
               state={status === 'submitted' ? 'loading' : undefined}
-              textareaProps={{
-                placeholder: 'Ask a question',
-              }}
+              textareaProps={inputBarTextareaProps}
             />
           </div>
           <DisclaimerText className={disclaimerTextStyles}>

packages/compass-assistant/src/components/confirmation-message.tsx

@@ -6,6 +6,7 @@ import {
   ButtonVariant,
   spacing,
   css,
+  cx,
   palette,
   useDarkMode,
 } from '@mongodb-js/compass-components';
@@ -42,6 +43,11 @@ const buttonGroupStyles = css({
   },
 });
 
+const confirmationMessageDarkModeStyles = css({
+  backgroundColor: palette.gray.dark3,
+  borderColor: palette.gray.dark2,
+});
+
 interface ConfirmationMessageProps {
   state: 'confirmed' | 'rejected' | 'pending';
   title: string;
@@ -57,11 +63,10 @@ export const ConfirmationMessage: React.FunctionComponent<
 
   return (
     <div
-      className={confirmationMessageStyles}
-      style={{
-        backgroundColor: darkMode ? palette.gray.dark3 : palette.gray.light3,
-        borderColor: darkMode ? palette.gray.dark2 : palette.gray.light2,
-      }}
+      className={cx(
+        confirmationMessageStyles,
+        darkMode && confirmationMessageDarkModeStyles
+      )}
     >
       <Body className={confirmationTitleStyles}>{title}</Body>
 

packages/compass-components/src/components/actions/item-action-group.tsx

@@ -21,6 +21,10 @@ const containerStyle = css({
   gap: spacing[100],
 });
 
+const itemActionGroupContainerStyles = css({
+  display: 'inherit',
+});
+
 export type ItemActionGroupProps<Action extends string> = {
   actions: (GroupedItemAction<Action> | ItemSeparator)[];
   onAction(actionName: Action): void;
@@ -98,7 +102,9 @@ export function ItemActionGroup<Action extends string>({
               {...tooltipProps}
               // Wrapping the item in a div, because the `trigger` must accept and render `children`
               // See docs for the prop for more information
-              trigger={<div style={{ display: 'inherit' }}>{item}</div>}
+              trigger={
+                <div className={itemActionGroupContainerStyles}>{item}</div>
+              }
             >
               {tooltip}
             </Tooltip>

packages/compass-components/src/components/bson-value.tsx

@@ -68,13 +68,16 @@ export const BSONValueContainer: React.FunctionComponent<
   }
 > = ({ type, children, className, ...props }) => {
   const darkMode = useDarkMode();
-  const color = useMemo(() => {
+  const colorStyle = useMemo(() => {
     if (!type) {
       return;
     }
-    return VALUE_COLOR_BY_THEME_AND_TYPE[darkMode ? Theme.Dark : Theme.Light][
-      type
-    ];
+    return {
+      color:
+        VALUE_COLOR_BY_THEME_AND_TYPE[darkMode ? Theme.Dark : Theme.Light][
+          type
+        ],
+    };
   }, [type, darkMode]);
 
   return (
@@ -88,7 +91,7 @@ export const BSONValueContainer: React.FunctionComponent<
           type ? type.toLowerCase() : 'unknown'
         }`
       )}
-      style={{ color }}
+      style={colorStyle}
     >
       {children}
     </div>

packages/compass-components/src/components/document-list/element.tsx

@@ -550,30 +550,37 @@ export const HadronElement: React.FunctionComponent<{
     }
   };
 
-  const lineNumberMinWidth = useMemo(() => {
+  const lineNumberMinWidthStyle = useMemo(() => {
     // Only account for ~ line count length if we are in editing mode
     if (editingEnabled) {
       const charCount = String(lineNumberSize).length;
-      return charCount > 2 ? `${charCount}.5ch` : spacing[400];
+      return {
+        minWidth: charCount > 2 ? `${charCount}.5ch` : spacing[400],
+      };
     }
-    return spacing[400];
+    return {
+      minWidth: spacing[400],
+    };
   }, [lineNumberSize, editingEnabled]);
 
-  const elementSpacerWidth = useMemo(
-    () => calculateElementSpacerWidth(editable, level, extraGutterWidth),
+  const elementSpacerWidthStyle = useMemo(
+    () => ({
+      width: calculateElementSpacerWidth(editable, level, extraGutterWidth),
+    }),
     [editable, level, extraGutterWidth]
   );
 
   // To render the "Show more" toggle for the nested expandable elements we need
   // to calculate a proper offset so that it aligns with the nesting level
-  const nestedElementsVisibilityToggleOffset = useMemo(
-    () =>
-      calculateShowMoreToggleOffset({
+  const nestedElementsVisibilityToggleOffsetStyle = useMemo(
+    () => ({
+      paddingLeft: calculateShowMoreToggleOffset({
         editable,
         level,
         alignWithNestedExpandIcon: true,
         extraGutterWidth,
       }),
+    }),
     [editable, level, extraGutterWidth]
   );
 
@@ -649,7 +656,7 @@ export const HadronElement: React.FunctionComponent<{
                 ? lineNumberRemoved
                 : editingEnabled && !isValid && lineNumberInvalid
             )}
-            style={{ minWidth: lineNumberMinWidth }}
+            style={lineNumberMinWidthStyle}
           >
             <div
               className={cx(
@@ -684,7 +691,7 @@ export const HadronElement: React.FunctionComponent<{
             </div>
           </div>
         )}
-        <div className={elementSpacer} style={{ width: elementSpacerWidth }}>
+        <div className={elementSpacer} style={elementSpacerWidthStyle}>
           {/* spacer for nested documents */}
         </div>
         <div className={elementExpand}>
@@ -849,9 +856,7 @@ export const HadronElement: React.FunctionComponent<{
             // this for "performance" reasons
             step={editingEnabled ? DEFAULT_VISIBLE_ELEMENTS : 1000}
             onSizeChange={handleVisibleElementsChanged}
-            style={{
-              paddingLeft: nestedElementsVisibilityToggleOffset,
-            }}
+            style={nestedElementsVisibilityToggleOffsetStyle}
           ></VisibleFieldsToggle>
         </>
       )}

packages/compass-components/src/components/file-picker-dialog.tsx

@@ -132,6 +132,10 @@ const disabledDescriptionDarkStyles = css({
   color: palette.gray.light1,
 });
 
+const displayNoneStyles = css({
+  display: 'none',
+});
+
 type FileInputVariant = 'default' | 'small' | 'vertical';
 
 // Matches Electron's file dialog options.
@@ -502,13 +506,13 @@ function FilePickerDialog({
         </div>
         <input
           data-testid={dataTestId ?? 'file-input'}
+          className={displayNoneStyles}
           ref={inputRef}
           id={`${id}_file_input`}
           name={id}
           type="file"
           multiple={multi}
           onChange={onFilesChanged}
-          style={{ display: 'none' }}
           // Force a re-render when the values change so
           // the component is controlled by the prop.
           // This is also useful for testing.

packages/compass-components/src/components/file-selector.tsx

@@ -1,4 +1,9 @@
 import React, { type InputHTMLAttributes, useRef } from 'react';
+import { css } from '@leafygreen-ui/emotion';
+
+const displayNoneStyles = css({
+  display: 'none',
+});
 
 type FileSelectorTriggerProps = {
   onClick: () => void;
@@ -33,7 +38,7 @@ export function FileSelector({
         ref={inputRef}
         type="file"
         onChange={onFilesChanged}
-        style={{ display: 'none' }}
+        className={displayNoneStyles}
       />
       {trigger({
         onClick: () => inputRef.current?.click(),

packages/compass-components/src/components/icons/logo-icon.tsx

@@ -22,7 +22,7 @@ const LogoIcon = ({
   const fill = color || (darkMode ? palette.white : palette.black);
   return (
     <svg
-      className={cx(iconStyles, className, css(`height: ${height}px`))}
+      className={cx(iconStyles, className)}
       height={height}
       viewBox="0 0 15 32"
       fill="none"