chore: migration lint #1545

davidnixon · 2023-10-18T15:19:30Z

What did you do?

enable very strict eslint linting:

 "extends": [
   "eslint:recommended",
   "plugin:vue/vue3-recommended",
   "plugin:prettier-vue/recommended"
 ],

automatically fix eslint issue with eslint --fix src/**/*.{js,vue}

fix remaining lint issues. Mostly this is about assigning default values to properties:

 sampleString: { type: String, default: undefined },
 sampleArray: { type: Array, default: () => [] }, // mostly but sometimes undefined
 sampleObject: { type: Object, default: undefined } // mostly but sometimes Object()

suppress warning in test like [Vue warn]: injection "selectable" not found.
When using Vue compatibility mode to migrate a Vue 2 app to Vue 3 with Vue 3 Carbon Components. Some warnings are shown in the console like [Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute "aria-invalid" .... To resolve many templates are updated like this:
```
-        :data-invalid="data.isInvalid"
+        :data-invalid="data.isInvalid || null"
```
See BREAKING: No longer removes attribute if ...

Why did you do it?

very strict linting had been on hold until after component migration was complete.
working on migration Vue 2 apps now through the end of the year so there may be more warning uncovered by the compatibility compiler.

How have you tested it?

With local app and the jest tests

Were docs updated if needed?

N/A

davidnixon · 2023-10-19T21:51:59Z

@OlkaB could you review this one? It's a lot of changes but most are related to the strict linting.
Could you run this branch locally and just make sure it looks OK?

OlkaB · 2023-10-20T17:34:48Z

src/components/CvButton/CvIconButton.vue

@@ -30,8 +30,7 @@ const { disabled, icon, kind, size } = commonCvButtonProps;

 export default {
  name: 'CvIconButton',
-  components: { CvSvg },
-  emits: ['click'], // emitted to allow testing of click
+  components: { CvSvg }, // emitted to allow testing of click


the comment probably should go with moved 'emits' (to line 73)

OlkaB · 2023-10-20T17:44:15Z

src/components/CvDataTable/CvDataTable.vue

@@ -44,7 +44,7 @@
              <span data-items-selected>
                <slot
                  name="items-selected"
-                  v-bind:scope="{ count: dataRowsSelected.length }"
+                  :scope="{ count: dataRowsSelected.length }"
                  >{{ dataRowsSelected.length }} items selected</slot


side note/question: shouldn't user facing strings be passed as some props or be slotted (for potential language localization purposes)?

OlkaB · 2023-10-20T18:10:01Z

src/components/CvSearch/CvSearch.vue

        :placeholder="placeholder"
        :aria-labelledby="uid"
+        :disabled="disabled ? 'true' : undefined"


following compatibility mode comment, might be that also here it should be changed to :disabled="disabled || null" ?

OlkaB · 2023-10-20T18:14:43Z

src/components/CvTextArea/CvTextArea.vue

        :id="cvId"
+        :aria-invalid="isInvalid || null"
+        :aria-describedby="isInvalid ? errorId : undefined"


shouldn't there be null instead of undefined?

OlkaB · 2023-10-20T18:29:28Z

src/components/CvButton/CvIconButton.vue

@@ -30,8 +30,7 @@ const { disabled, icon, kind, size } = commonCvButtonProps;



I'm getting this warning CvIconButton story Field. Didn't got that when I run main branch.

The value received is an empty string, but alsp seems this prop/attribute is not used in the story at all

Updated story

Get tip alignments fom '../CvTooltip/consts.js';

Fix warnings from story book about deprecated format.

Add control for tipAlignment

OlkaB · 2023-10-20T18:34:45Z

src/components/CvGrid/CvColumn.vue

@@ -13,22 +13,27 @@ const props = defineProps({
  sm: {


side note for this component story: it's not working (CvGrid). Interesingly I could run it on main branch without issues.

This one is definitely related to the lint changes. For the lint errors I added default: undefined for the break-point size and this is causing the error. Updated to default: false

OlkaB · 2023-10-20T18:36:13Z

src/components/CvPagination/CvPagination.vue

@@ -2,12 +2,12 @@
  <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>


side note: pagination styling seem to fail

This is unrelated to this PR but I "fixed" it.
@felipebritor looks like you added this to .storybook/styles.scss

// set space between form items .bx--form-item { margin-bottom: 2rem; }

I'm sure I broke something by removing it so maybe have a look and add it to a story instead of to the style?

OlkaB · 2023-10-20T18:45:51Z

@davidnixon Review finished. I've caught some additional issues but they might be better candidates to separate issue tickets.

davidnixon added 6 commits October 18, 2023 20:50

chore: resolved ATTR_FALSE_VALUE warnings seen in migration build

aa4612d

fix: suppres [Vue warn]: injection

c092974

chore: add very strict linting and auto fix with eslint --fix

4988bb1

chore: fix remaining very strict eslint issues

9ca0b4a

chore: update test snapshots based on eslint changes

c5b36c9

chore: enable very strict linting by default

ee4406c

davidnixon force-pushed the chore-migration-lint branch from d1ca992 to ee4406c Compare October 19, 2023 00:57

davidnixon marked this pull request as ready for review October 19, 2023 01:01

chore: add web-types for JetBrains (WebStorm) IDE support

c2ba07c

OlkaB reviewed Oct 20, 2023

View reviewed changes

davidnixon added 4 commits October 21, 2023 12:13

fix: review comment for CvIconButton story

00df52f

fix: review comment for CvGrid story

79a742a

fix: review comment for CvPagination story

315618b

fix: resolve other console warning from storybook

6f53d83

davidnixon merged commit c8961f4 into carbon-design-system:main Oct 22, 2023
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migration lint #1545

chore: migration lint #1545

davidnixon commented Oct 18, 2023 •

edited

davidnixon commented Oct 19, 2023

OlkaB Oct 20, 2023

OlkaB Oct 20, 2023

OlkaB Oct 20, 2023

OlkaB Oct 20, 2023

OlkaB Oct 20, 2023 •

edited

davidnixon Oct 21, 2023

OlkaB Oct 20, 2023 •

edited

davidnixon Oct 21, 2023

OlkaB Oct 20, 2023

davidnixon Oct 21, 2023

OlkaB commented Oct 20, 2023

		@@ -30,8 +30,7 @@ const { disabled, icon, kind, size } = commonCvButtonProps;

		@@ -2,12 +2,12 @@
		<div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>

chore: migration lint #1545

chore: migration lint #1545

Conversation

davidnixon commented Oct 18, 2023 • edited

What did you do?

Why did you do it?

How have you tested it?

Were docs updated if needed?

davidnixon commented Oct 19, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OlkaB Oct 20, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OlkaB Oct 20, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OlkaB commented Oct 20, 2023

davidnixon commented Oct 18, 2023 •

edited

OlkaB Oct 20, 2023 •

edited

OlkaB Oct 20, 2023 •

edited