carbon-design-system · kennylam · Oct 23, 2024 · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024
@@ -54,6 +54,6 @@
   },
   "devDependencies": {
     "babel-preset-carbon": "workspace:^",
-    "prettier": "^2.8.8"
+    "prettier": "^3.3.3"
   }
 }
@@ -35,11 +35,12 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.0",
+    "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.2.1",
     "stylelint-use-logical": "^2.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "stylelint": "^16.0.0"
   }
 }
@@ -150,8 +150,7 @@ update PR:
    `--modifiers`. All icons with `--modifiers` are listed as variants of the
    same icon.
 3. make desired edits on the icon's `aliases` list.
-4. commit changes, preferably with a commit message "[icon name] metadata
-   update".
+4. commit changes, preferably with a commit message "[icon name] metadata update".
 5. create a new branch, suggested branch name is `yourname-metadata-iconName`
 6. create the PR from your branch, or click on `Propose file change` if you are
    in browser.

@@ -40,8 +40,8 @@ started in case you get stuck.
 - “Could you share more about what you’ve already tried?”
 - “Can you share more about your usecase?”
 - “Can you add a repro (reproduction) using Stackblitz?”
-- “After searching through [FILL IN RESOURCE HERE], I was able to find this and
-  thought it might be helpful... Let me know if that works.”
+- “After searching through [FILL IN RESOURCE HERE], I was able to find this and thought
+  it might be helpful... Let me know if that works.”
 
 ### What does "ongoing support" mean regarding GitHub?
 

@@ -71,7 +71,7 @@
     "jest-junit": "^16.0.0",
     "lerna": "^8.0.0",
     "lint-staged": "^15.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",

@@ -47,7 +47,7 @@
     "klaw-sync": "^6.0.0",
     "lodash.template": "^4.5.0",
     "markdown-toc": "^1.2.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "prettier-config-carbon": "^0.11.0",
     "progress-estimator": "^0.3.0",
     "remark": "^10.0.1",

@@ -7,7 +7,7 @@
 
 'use strict';
 
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const sassdoc = require('sassdoc');
 const toc = require('markdown-toc');
 

@@ -9,7 +9,7 @@
 
 const fs = require('fs-extra');
 const path = require('path');
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const prettierConfig = require('prettier-config-carbon');
 const createRemark = require('remark');
 const monorepo = require('./remark/remark-monorepo');

@@ -136,7 +136,7 @@ async function build() {
   const MODULES_ENTRYPOINT = path.resolve(__dirname, '..', 'index.scss');
 
   await Promise.all([
-    fs.writeFile(MODULES_ENTRYPOINT, generate(sassModule).code),
+    fs.writeFile(MODULES_ENTRYPOINT, await generate(sassModule).code),
   ]);
 }
 

@@ -37,7 +37,10 @@ async function main() {
     '../scss/generated/feature-flags.scss'
   );
   await fs.ensureFile(generatedSassFilepath);
-  await fs.writeFile(generatedSassFilepath, buildSassModule(featureFlags));
+  await fs.writeFile(
+    generatedSassFilepath,
+    await buildSassModule(featureFlags)
+  );
 }
 
 const sassBanner = ` Code generated by @carbon/feature-flags. DO NOT EDIT.

@@ -144,8 +144,10 @@
   // Condensed
   .#{$prefix}--css-grid--condensed {
     --cds-grid-gutter: #{$grid-gutter-condensed};
-    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
-      math.div($grid-gutter-condensed, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
+        $grid-gutter-condensed,
+        2
+      )};
   }
 
   // -----------------------------------------------------------------------------
@@ -179,8 +181,10 @@
   .#{$prefix}--subgrid--condensed {
     --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
-    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
-      math.div($grid-gutter-condensed, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
+        $grid-gutter-condensed,
+        2
+      )};
   }
 
   // -----------------------------------------------------------------------------

@@ -41,7 +41,7 @@
     "js-yaml": "^3.12.1",
     "klaw-sync": "^6.0.0",
     "memfs": "^4.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "prop-types": "^15.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

@@ -57,9 +57,8 @@
   for (const m of modules) {
     files[m.filepath] = m.source;
     input[m.filepath] = m.filepath;
-    files[
-      'index.js'
-    ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
+    files['index.js'] +=
+      `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
   }
 
   const bundle = await rollup({

@@ -73,9 +73,8 @@
   for (const m of modules) {
     files[m.filepath] = m.source;
     input[m.filepath] = m.filepath;
-    files[
-      'index.js'
-    ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
+    files['index.js'] +=
+      `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
   }
 
   const bundle = await rollup({

@@ -37,7 +37,7 @@
     "@carbon/cli-reporter": "^10.7.0",
     "@carbon/icons": "^11.52.0",
     "fs-extra": "^11.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "vue": "^2.6.8"

@@ -101,7 +101,7 @@ async function build() {
   await fs.ensureDir(SCSS_DIR);
   for (const { filepath, builder } of files) {
     const { code } = generate(builder());
-    await fs.writeFile(filepath, code);
+    await fs.writeFile(filepath, await code);
   }
 
   reporter.success('Done! 🎉');

@@ -114,6 +114,7 @@
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
     "postcss-loader": "^8.0.0",
+    "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",

@@ -12,7 +12,7 @@ import { useId } from '../../internal/useId';
 import { ButtonBaseProps, ButtonProps } from './Button';
 
 const ButtonBase = React.forwardRef(function ButtonBase<
-  T extends React.ElementType
+  T extends React.ElementType,
 >(
   {
     as,

@@ -527,12 +527,12 @@
         typeahead
           ? autocompleteCustomFilter({ item: itemToString(item), inputValue })
           : shouldFilterItem
-          ? shouldFilterItem({
-              item,
-              itemToString,
-              inputValue,
-            })
-          : defaultShouldFilterItem()
+            ? shouldFilterItem({
+                item,
+                itemToString,
+                inputValue,
+              })
+            : defaultShouldFilterItem()
       );
 
     useEffect(() => {

@@ -23,7 +23,7 @@ type SectionProps<E extends ElementType> = PolymorphicProps<
 >;
 
 export const Section = React.forwardRef(function Section<
-  E extends ElementType = 'section'
+  E extends ElementType = 'section',
 >(
   {
     as: BaseComponent = 'section' as E,

@@ -12,79 +12,78 @@
 import { useMergedRefs } from '../../internal/useMergedRefs';
 
 /** @type any */
-const InlineCheckbox = React.forwardRef(function InlineCheckbox(
-  props,
-  forwardRef
-) {
-  const {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    checked = false,
-    disabled,
-    id,
-    indeterminate,
-    name,
-    onChange = () => {},
-    onClick,
-    onKeyDown,
-    title,
-  } = props;
-  const prefix = usePrefix();
-  const inputRef = useRef(null);
-  const ref = useMergedRefs([inputRef, forwardRef]);
-  const inputProps = {
-    checked,
-    className: `${prefix}--checkbox`,
-    disabled,
-    id,
-    name,
-    onClick: onClick ? onClickCheckBoxInput : onClick,
-    onChange: (evt) => {
-      onChange(evt.target.checked, id, evt);
-    },
-    onKeyDown,
-    ref,
-    type: 'checkbox',
-  };
-
-  if (indeterminate) {
-    inputProps.checked = false;
-  }
-
-  useEffect(() => {
-    if (inputRef?.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
+const InlineCheckbox = React.forwardRef(
+  function InlineCheckbox(props, forwardRef) {
+    const {
+      ['aria-label']: ariaLabel,
+      ariaLabel: deprecatedAriaLabel,
+      checked = false,
+      disabled,
+      id,
+      indeterminate,
+      name,
+      onChange = () => {},
+      onClick,
+      onKeyDown,
+      title,
+    } = props;
+    const prefix = usePrefix();
+    const inputRef = useRef(null);
+    const ref = useMergedRefs([inputRef, forwardRef]);
+    const inputProps = {
+      checked,
+      className: `${prefix}--checkbox`,
+      disabled,
+      id,
+      name,
+      onClick: onClick ? onClickCheckBoxInput : onClick,
+      onChange: (evt) => {
+        onChange(evt.target.checked, id, evt);
+      },
+      onKeyDown,
+      ref,
+      type: 'checkbox',
+    };
 
-  function onClickCheckBoxInput(evt) {
-    // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
     if (indeterminate) {
-      evt.target.checked = false;
+      inputProps.checked = false;
     }
-    onClick(evt);
-  }
 
-  return (
-    <div className={`${prefix}--checkbox--inline`}>
-      <input {...inputProps} />
-      {
-        /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-        <label
-          htmlFor={id}
-          className={`${prefix}--checkbox-label`}
-          title={title}
-          onClick={(evt) => {
-            evt.stopPropagation();
-          }}>
-          <span className={`${prefix}--visually-hidden`}>
-            {deprecatedAriaLabel || ariaLabel}
-          </span>
-        </label>
+    useEffect(() => {
+      if (inputRef?.current) {
+        inputRef.current.indeterminate = indeterminate;
       }
-    </div>
-  );
-});
+    }, [indeterminate]);
+
+    function onClickCheckBoxInput(evt) {
+      // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
+      if (indeterminate) {
+        evt.target.checked = false;
+      }
+      onClick(evt);
+    }
+
+    return (
+      <div className={`${prefix}--checkbox--inline`}>
+        <input {...inputProps} />
+        {
+          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+          <label
+            htmlFor={id}
+            className={`${prefix}--checkbox-label`}
+            title={title}
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}>
+            <span className={`${prefix}--visually-hidden`}>
+              {deprecatedAriaLabel || ariaLabel}
+            </span>
+          </label>
+        }
+      </div>
+    );
+  }
+);
 
 InlineCheckbox.propTypes = {
   /**

@@ -56,7 +56,7 @@ export interface LayerComponent {
 }
 
 const LayerRenderFunction = React.forwardRef(function Layer<
-  T extends React.ElementType
+  T extends React.ElementType,
 >(
   {
     as = 'div' as T,

@@ -312,7 +312,7 @@ export interface FilterableMultiSelectProps<ItemType>
 }
 
 const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
-  ItemType
+  ItemType,
 >(
   {
     autoAlign = false,

@@ -240,8 +240,8 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(function Search(
           onExpand && isExpanded
             ? true
             : onExpand && !isExpanded
-            ? false
-            : undefined
+              ? false
+              : undefined
         }
         aria-controls={onExpand ? uniqueId : undefined}>
         <CustomSearchIcon icon={renderIcon} />