search

telerik / kendo-react

Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
https://kendo-react-teal.vercel.app
Other
211 stars 37 forks source link

`Button.fillMode = "clear"` fails with a the error Failed prop type: Invalid prop `fillMode` of value `clear` supplied to `n`, expected one of [null,"flat","link","outline","solid"]. #2284

Closed gregbrant2 closed 4 months ago

gregbrant2 commented 4 months ago

I'm submitting a...

Current behavior

Button.fillMode = "clear" fails with a the error:

console.error
      Warning: Failed prop type: Invalid prop `fillMode` of value `clear` supplied to `n`, expected one of [null,"flat","link","outline","solid"].
          at n (/home/greg/work/service-charge-pro/sc_frontend/node_modules/@progress/kendo-react-buttons/Button.js:8:880)
          at onEditClick (/home/greg/work/service-charge-pro/sc_frontend/src/app/properties/details/recharge/exclusionPanel/FullExclusions.tsx:45:13)
          at cell
          at tr
          at d (/home/greg/work/service-charge-pro/sc_frontend/node_modules/@progress/kendo-react-grid/rows/GridRow.js:8:478)
          at tbody
          at table
          at $ (/home/greg/work/service-charge-pro/sc_frontend/node_modules/@progress/kendo-react-data-tools/selection/TableSelection.js:8:525)
          at div
          at div
          at div
          at div
          at div
          at T (/home/greg/work/service-charge-pro/sc_frontend/node_modules/@progress/kendo-react-grid/Grid.js:8:1573)
          at /home/greg/work/service-charge-pro/sc_frontend/node_modules/@progress/kendo-react-common/hocs/use-id-hoc.js:8:477
          at data (/home/greg/work/service-charge-pro/sc_frontend/src/app/properties/details/recharge/exclusionPanel/FullExclusions.tsx:15:3)

Checking the source in ./node_modules/@progress/kendo-react-buttons/Button.js I can see

fillMode: s.oneOf([null, "flat", "link", "outline", "solid"]),

package version 8.0.0. package.json:

{
  "name": "@progress/kendo-react-buttons",
  "version": "8.0.0",

Expected behavior

fillMode = "clear" should work, as per the docs https://www.telerik.com/kendo-react-ui/components/buttons/api/ButtonProps/#toc-fillmode/

Minimal reproduction of the problem with instructions

Run npm test in the root of this stackblitz https://stackblitz.com/edit/stackblitz-starters-v4hx7z?file=app%2F__tests__%2Ftests.tsx

Observe the output

> nextjs@0.1.0 test
> jest

 ⚠ Attempted to load @next/swc-linux-x64-gnu, but an error occurred: Cannot load native addon because loading addons is disabled: /home/projects/stackblitz-starters-v4hx7z/node_modules/@next/swc-linux-x64-gnu/next-swc.linux-x64-gnu.node
 ⚠ Attempted to load @next/swc-linux-x64-musl, but an error occurred: Cannot load native addon because loading addons is disabled: /home/projects/stackblitz-starters-v4hx7z/node_modules/@next/swc-linux-x64-musl/next-swc.linux-x64-musl.node
✔ Tests (0.685001ms)
  console.error
    Warning: Failed prop type: Invalid prop `fillMode` of value `clear` supplied to `n`, expected one of [null,"flat","link","outline","solid"].
        at n (/home/projects/stackblitz-starters-v4hx7z/node_modules/@progress/kendo-react-buttons/Button.js:8:880)
        at Home

       9 |           Get started by editing 
      10 |           <code className="font-mono font-bold">app/page.tsx</code>
    > 11 |           <Button title="Edit" fillMode="clear">
         |           ^
      12 |             Fish!
      13 |           </Button>
      14 |         </p>

      at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:87:30)
      at error (node_modules/react/cjs/react-jsx-runtime.development.js:61:7)
      at checkPropTypes (node_modules/react/cjs/react-jsx-runtime.development.js:631:11)
      at validatePropTypes (node_modules/react/cjs/react-jsx-runtime.development.js:1164:7)
      at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1303:7)
      at jsxWithValidationDynamic (node_modules/react/cjs/react-jsx-runtime.development.js:1320:12)
      at Home (app/page.tsx:11:11)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25738:74)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at eval (node_modules/@testing-library/react/dist/act-compat.js:47:25)
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (node_modules/@testing-library/react/dist/pure.js:271:10)
      at Object.eval (app/__tests__/tests.tsx:9:36)

  console.group
      Progress KendoReact

      at Module._0x53e4a2 [as validatePackage] (node_modules/@progress/kendo-licensing/dist/index.js:1:9995)

What is the motivation or use case for changing the behavior?

It doesn't work as advertised.

Environment

Package versions:

├── @playwright/test@1.44.1
├── @progress/kendo-data-query@1.7.0
├── @progress/kendo-licensing@1.3.5
├── @progress/kendo-react-dateinputs@8.0.0
├── @progress/kendo-react-dialogs@8.0.0
├── @progress/kendo-react-dropdowns@8.0.0
├── @progress/kendo-react-form@8.0.0
├── @progress/kendo-react-grid@8.0.0
├── @progress/kendo-react-indicators@8.0.0
├── @progress/kendo-react-inputs@8.0.0
├── @progress/kendo-react-intl@8.0.0
├── @progress/kendo-react-labels@8.0.0
├── @progress/kendo-react-layout@8.0.0
├── @progress/kendo-react-tooltip@8.0.0
├── @progress/kendo-react-upload@8.0.0
├── @progress/kendo-theme-default@8.0.1
├── @testing-library/jest-dom@6.4.5
├── @testing-library/react@15.0.7
├── @testing-library/user-event@14.5.2
├── @types/node@20.12.12
├── axios@1.7.2
├── date-fns-tz@2.0.1
├── decimal.js@10.4.3
├── eslint-config-next@14.2.3
├── eslint@8.57.0
├── jest-environment-jsdom@29.7.0
├── jest-junit-reporter@1.1.0
├── jest-junit@16.0.0
├── jest@29.7.0
├── js-cookie@3.0.5
├── next-query-params@5.0.0
├── next@14.2.3
├── query-string@9.0.0
├── react-cookie@7.1.4
├── react-dom@18.3.1
├── react-router-dom@6.23.1
├── react-test-renderer@18.3.1
├── react@18.3.1
├── sass@1.77.2
├── swr@2.2.5
└── use-query-params@2.2.1

Browser:

System:

zdravkov commented 4 months ago

This is bug indeed - thank you for reporting it. We will do our best to fix it as soon as possible.

zdravkov commented 4 months ago

It is fixed in the latest 'dev' version of KendoReact . The fix will be available in the next official versions of the package.

gregbrant2 commented 4 months ago

@zdravkov This has broke my build meaning I have to remove my frontend tests from my CI pipeline. I would question the Medium severity of this based on the effect it has had and request that get a hotfix out ASAP so I can reinstate my frontend tests.