[Tech debt] Remove Prettier jsxBracketSameLine rule (#5049)

* Update prettier rules - Remove jsxBracketSameLine: true (defaults to false) to be more consistent with Kibana - Remove jsxSingleQuote: false rule (which is already the default) - Remove trailing comma in JSON file, prettier was yelling about this * Run prettier --write on src/ components * Run prettier --write on src-docs/
elastic · Aug 21, 2021 · e8407ff · e8407ff
1 parent ad0acde
commit e8407ff
Show file tree

Hide file tree

Showing 907 changed files with 3,664 additions and 1,837 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,9 +1,7 @@
 {
-  "jsxBracketSameLine": true,
-  "jsxSingleQuote": false,
   "parser": "typescript",
   "printWidth": 80,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "es5"
 }
diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
@@ -181,7 +181,8 @@ ${exampleClose}
       action="https://codesandbox.io/api/v1/sandboxes/define"
       method="POST"
       target="_blank"
-      className={className}>
+      className={className}
+    >
       {/* 6 */}
       <input type="hidden" name="parameters" value={params} />
       {childWithSubmit}

diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -24,7 +24,8 @@ export const GuideMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
       processingPluginList={processingPlugins}
       className="guideMarkdownFormat"
       textSize="m"
-      {...rest}>
+      {...rest}
+    >
       {children}
     </EuiMarkdownFormat>
   );

diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
@@ -87,7 +87,8 @@ const GuidePageComponent = ({
             {title} {betaBadge}
           </>
         }
-        tabs={renderTabs()}>
+        tabs={renderTabs()}
+      >
         {intro}
       </EuiPageHeader>
 
@@ -97,7 +98,8 @@ const GuidePageComponent = ({
         paddingSize="none"
         color="transparent"
         hasBorder={false}
-        borderRadius="none">
+        borderRadius="none"
+      >
         <EuiPageContentBody restrictWidth>
           <Switch>
             {playground && (

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -110,7 +110,8 @@ export class GuidePageChrome extends Component {
         name = (
           <EuiHighlight
             className="guideSideNav__item--inSearch"
-            search={searchTerm}>
+            search={searchTerm}
+          >
             {title}
           </EuiHighlight>
         );
@@ -170,7 +171,8 @@ export class GuidePageChrome extends Component {
           visibleName = (
             <EuiHighlight
               className="guideSideNav__item--inSearch"
-              search={searchTerm}>
+              search={searchTerm}
+            >
               {name}
             </EuiHighlight>
           );
@@ -231,11 +233,13 @@ export class GuidePageChrome extends Component {
           style={{ height: '100%' }}
           direction="column"
           responsive={false}
-          gutterSize="none">
+          gutterSize="none"
+        >
           <EuiFlexItem
             role="search"
             grow={false}
-            className="guideSideNav__search">
+            className="guideSideNav__search"
+          >
             <EuiFieldSearch
               fullWidth
               placeholder="Search"

diff --git a/src-docs/src/components/guide_page/guide_page_header.tsx b/src-docs/src/components/guide_page/guide_page_header.tsx
@@ -49,7 +49,8 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
       <EuiBadge
         href="#/package/changelog"
         aria-label={`Version ${pkg.version}, View changelog`}
-        color={isLocalDev ? 'accent' : 'default'}>
+        color={isLocalDev ? 'accent' : 'default'}
+      >
         {isLocalDev ? 'Local' : `v.${pkg.version}`}
       </EuiBadge>
     );
@@ -67,7 +68,8 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
         <EuiHeaderSectionItemButton
           aria-label={label}
           // @ts-ignore TODO: FIX
-          href={href}>
+          href={href}
+        >
           <EuiIcon type="logoGithub" aria-hidden="true" />
         </EuiHeaderSectionItemButton>
       </EuiToolTip>
@@ -99,7 +101,8 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     const button = (
       <EuiHeaderSectionItemButton
         aria-label="Open EUI options menu"
-        onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)}>
+        onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)}
+      >
         <EuiIcon type="apps" aria-hidden="true" />
       </EuiHeaderSectionItemButton>
     );
@@ -109,7 +112,8 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
         id="guidePageChromeThemePopover"
         button={button}
         isOpen={mobilePopoverIsOpen}
-        closePopover={() => setMobilePopoverIsOpen(false)}>
+        closePopover={() => setMobilePopoverIsOpen(false)}
+      >
         {renderGithub()}
         <GuideSketchLink />
         <GuideFigmaLink />

diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js
@@ -53,15 +53,17 @@ export const GuideRuleExample = ({
         borderRadius="none"
         color="transparent"
         hasBorder={false}
-        {...rest}>
+        {...rest}
+      >
         <figure>
           <EuiSplitPanel.Inner
             className={classNames('guideRule__example__panel', {
               'guideRule__example__panel--flex': panelDisplay === 'flex',
             })}
             style={panelStyles}
             color={panelColor}
-            {...panelProps}>
+            {...panelProps}
+          >
             {children}
           </EuiSplitPanel.Inner>
           <EuiSplitPanel.Inner color="transparent">

diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx
@@ -187,7 +187,8 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
                 <EuiButton
                   fill
                   iconType="fullScreen"
-                  href={`#${path}/${fullScreen.slug}`}>
+                  href={`#${path}/${fullScreen.slug}`}
+                >
                   Full screen demo
                 </EuiButton>
               ) : (

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
@@ -25,7 +25,8 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
   const codeSandboxLink = (
     <CodeSandboxLink
       className="guideSectionExampleCode__link"
-      content={code.default}>
+      content={code.default}
+    >
       <EuiButtonEmpty size="xs" iconType="logoCodesandbox">
         Try out this demo on Code Sandbox
       </EuiButtonEmpty>

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx
@@ -28,7 +28,8 @@ export const GuideSectionExample: FunctionComponent<GuideSectionExample> = ({
       <EuiSplitPanel.Inner
         color="plain"
         {...demoPanelProps}
-        className={classes}>
+        className={classes}
+      >
         {example}
       </EuiSplitPanel.Inner>
       {(tabs || tabContent) && (

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx
@@ -68,7 +68,8 @@ export const GuideSectionExampleTabs: FunctionComponent<GuideSectionExampleTabsP
               name={name}
               onClick={() => onSelectedTabChanged(name)}
               isSelected={name === selectedTabId}
-              key={index}>
+              key={index}
+            >
               {tab.displayName}
             </EuiTab>
           );
@@ -121,7 +122,8 @@ export const GuideSectionExampleTabs: FunctionComponent<GuideSectionExampleTabsP
         responsive={false}
         wrap
         gutterSize="none"
-        alignItems="center">
+        alignItems="center"
+      >
         <EuiFlexItem>{renderTabs()}</EuiFlexItem>
         <EuiFlexItem grow={false}>{rightSideControl}</EuiFlexItem>
       </EuiFlexGroup>

diff --git a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx
@@ -44,12 +44,14 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
   ) : (
     <EuiToolTip
       title={label}
-      content="The Figma Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics.">
+      content="The Figma Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics."
+    >
       <EuiHeaderSectionItemButton
         notificationColor="subdued"
         aria-label={label}
         // @ts-ignore TODO: FIX
-        href={href}>
+        href={href}
+      >
         <EuiIcon type={logoFigma} aria-hidden="true" />
       </EuiHeaderSectionItemButton>
     </EuiToolTip>

diff --git a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx
@@ -44,11 +44,13 @@ const GuideSketchLinkComponent: React.FunctionComponent<GuideSketchLinkProps> =
       title="(Outdated) Download Sketch zip"
       content="Import these sketch files into a new project as libraries.
         This will provide symbols that match against their EUI component
-        counterparts.">
+        counterparts."
+    >
       <EuiHeaderSectionItemButton
         aria-label={label}
         // @ts-ignore TODO: FIX
-        href={href}>
+        href={href}
+      >
         <EuiIcon type="logoSketch" aria-hidden="true" />
       </EuiHeaderSectionItemButton>
     </EuiToolTip>

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
@@ -63,7 +63,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
         onClick={() => {
           closePopover();
           context.changeTheme(theme.value);
-        }}>
+        }}
+      >
         {theme.text}
       </EuiContextMenuItem>
     );
@@ -76,7 +77,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
       iconSide="right"
       color="ghost"
       minWidth={0}
-      onClick={onButtonClick}>
+      onClick={onButtonClick}
+    >
       {isMobileSize ? 'Theme' : currentTheme.text}
     </EuiButton>
   );
@@ -89,7 +91,8 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       panelPaddingSize="none"
-      anchorPosition="downRight">
+      anchorPosition="downRight"
+    >
       <EuiContextMenuPanel size="s" items={items} />
       {location.host.includes('803') && (
         <>

diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx
@@ -46,7 +46,8 @@ export class ThemeProvider extends React.Component<object, State> {
         value={{
           theme,
           changeTheme: this.changeTheme,
-        }}>
+        }}
+      >
         {children}
       </ThemeContext.Provider>
     );

diff --git a/src-docs/src/index.js b/src-docs/src/index.js
@@ -66,7 +66,8 @@ ReactDOM.render(
                       return (
                         <LinkWrapper>
                           <AppContainer
-                            currentRoute={{ name, path, sections, isNew }}>
+                            currentRoute={{ name, path, sections, isNew }}
+                          >
                             {createElement(component, {})}
                           </AppContainer>
                         </LinkWrapper>
@@ -86,7 +87,8 @@ ReactDOM.render(
                       path={`/${path}/${slug}`}
                       render={() => (
                         <ExampleContext.Provider
-                          value={{ parentPath: `/${path}#${id}` }}>
+                          value={{ parentPath: `/${path}#${id}` }}
+                        >
                           {demo}
                         </ExampleContext.Provider>
                       )}

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -280,7 +280,8 @@ const createExample = (example, customTitle) => {
         intro={intro}
         isBeta={beta}
         playground={playgroundComponent}
-        guidelines={guidelines}>
+        guidelines={guidelines}
+      >
         {renderedSections}
       </GuidePage>
     </EuiErrorBoundary>

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
@@ -154,7 +154,8 @@ const Knob = ({
             style={{
               fontSize: '14px',
               display: 'block',
-            }}>
+            }}
+          >
             React Ref documentation
           </a>
           {error && <div>error {error}</div>}
@@ -167,7 +168,8 @@ const Knob = ({
           isInvalid={error && error.length > 0}
           error={error}
           helpText={helpText}
-          fullWidth>
+          fullWidth
+        >
           <EuiFieldNumber
             placeholder={placeholder}
             value={val ? val : undefined}
@@ -220,7 +222,8 @@ const Knob = ({
                 </>
               )}
             </>
-          }>
+          }
+        >
           <EuiFieldText
             aria-label={name}
             placeholder={placeholder}
@@ -238,7 +241,8 @@ const Knob = ({
           fullWidth
           helpText={helpText}
           isInvalid={error && error.length > 0}
-          error={error}>
+          error={error}
+        >
           <EuiSwitch
             aria-label={name}
             id={name}
@@ -294,7 +298,8 @@ const Knob = ({
             isInvalid={error && error.length > 0}
             helpText={helpText}
             error={error}
-            fullWidth>
+            fullWidth
+          >
             <EuiSelect
               id={name}
               options={flattenedOptions}
@@ -463,7 +468,8 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
           mobileOptions={{
             header: false,
             fullWidth: true,
-          }}>
+          }}
+        >
           <div>
             <EuiTitle size="xxs">
               <span>{humanizedName}</span>
@@ -481,14 +487,16 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
         <EuiTableRowCell
           key={`type__${name}-${idx}`}
           header="Type"
-          textOnly={false}>
+          textOnly={false}
+        >
           <div>{typeMarkup}</div>
         </EuiTableRowCell>
         <EuiTableRowCell
           key={`modify__${name}-${idx}`}
           header={isPlayground ? 'Modify' : 'Default value'}
           textOnly={false}
-          className={isPlayground ? 'playgroundKnobs__rowCell' : undefined}>
+          className={isPlayground ? 'playgroundKnobs__rowCell' : undefined}
+        >
           {isPlayground ? (
             <Knob
               key={name}
@@ -543,7 +551,8 @@ const Knobs = ({ state, set, error, isPlayground = true }) => {
       color="transparent"
       paddingSize={isMobile ? 's' : 'none'}
       hasBorder={false}
-      hasShadow={false}>
+      hasShadow={false}
+    >
       <EuiTable style={{ background: 'transparent' }}>
         <EuiTableHeader>
           {columns.map(({ name, width }, id) => {