Improve issue templates (#10038)

* Make issue templates fancier

* should be valid yml now

* remove title field

* remove reproducable sample for docs

* add example back to docs, change link for plugin and add TS link for TS issues

* wrong labels, forgot type: in front of it

* implement feedback

* gramar, missing word

.github/ISSUE_TEMPLATE/BUG.md

@@ -1,50 +0,0 @@
----
-name: Bug Report
-about: Something went awry
-labels: 'type: bug'
----
-
-<!--
-  Need help or support? Please don't open an issue!
-  Head to https://stackoverflow.com/questions/tagged/chart.js
-
-  Bug reports MUST be submitted with an interactive example:
-  https://codepen.io/pen?template=BapRepQ
-
-  Chart.js versions lower then 3.x are NOT supported anymore, new issues will be disregarded.
--->
-
-## Expected Behavior
-<!-- Tell us what should happen -->
-
-## Current Behavior
-<!-- Tell us what happens instead of the expected behavior -->
-
-## Possible Solution
-<!--
-  Not obligatory, but suggest a fix/reason for the bug,
-  or ideas how to implement the addition or change
--->
-
-## Steps to Reproduce
-<!--
-  Provide a link to a live example. Bug reports MUST be submitted with an
-  interactive example (https://codepen.io/pen/?template=BapRepQ).
-
-  If filing a bug against `master`, you may reference the latest code via
-  https://www.chartjs.org/dist/master/chart.min.js (changing the filename to
-  point at the file you need as appropriate). Do not rely on these files for
-  production purposes as they may be removed at any time.
--->
-
-## Context
-<!--
-  How has this issue affected you? What are you trying to accomplish? Providing
-  context helps us come up with a solution that is most useful in the real world
--->
-
-## Environment
-<!-- Include as many relevant details about the environment you experienced the bug in -->
-* Chart.js version:
-* Browser name and version:
-* Link to your project:

.github/ISSUE_TEMPLATE/DOCS.md

@@ -1,25 +0,0 @@
----
-name: Documentation
-about: Are the docs lacking or missing something?
-labels: 'type: documentation'
----
-
-Documentation Is:
-
-<!-- Please place an x (no spaces!) in all [ ] that apply -->
-
-- [ ] Missing or needed
-- [ ] Confusing
-- [ ] Not Sure?
-
-### Please Explain in Detail...
-
-
-### Your Proposal for Changes
-
-
-### Example
-<!--
-  Provide a link to a live example demonstrating the issue or feature to be documented:
-  https://codepen.io/pen?template=wvezeOq
--->

.github/ISSUE_TEMPLATE/FEATURE.md

@@ -1,25 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea
-labels: 'type: enhancement'
----
-
-<!--
-  Most features should start as plugins outside of Chart.js
-  (https://www.chartjs.org/docs/#advanced-usage-creating-plugins).
-  Please consider whether your changes are useful for all users, or if this is
-  specific to your usecase and a Chart.js plugin would be more appropriate.
-
-  Need help or tech support? Please don't open an issue!
-  Head to https://stackoverflow.com/questions/tagged/chart.js
--->
-
-### Feature Proposal
-<!-- Tell us how it should work -->
-
-### Feature Use Case
-<!-- What are you trying to accomplish? -->
-<!-- Providing context helps us come up with a solution that is most useful in the real world -->
-
-## Possible Implementation
-<!-- Not obligatory, but suggest ideas for how to implement the addition or change -->

.github/ISSUE_TEMPLATE/SUPPORT.md

@@ -1,27 +0,0 @@
----
-name: Support, Help, and Advice
-about: Need help or support? Head to https://stackoverflow.com/questions/tagged/chart.js
-labels: 'type: support'
----
-
-<!--
-  Hey there! 
-
-  If you need help or tech support then this is not the place to ask. Please post
-  a question to https://stackoverflow.com/questions/tagged/chart.js or head over
-  to our Slack workspace at https://chartjs-slack.herokuapp.com/.
-
-  You maximize your chances of having your question answered if you follow
-  StackOverflow's guidelines: https://stackoverflow.com/help/how-to-ask.
-  If your question was not answered on StackOverflow, that does not mean you 
-  should post it here. If you do, it will be immediately closed.
-
-  Chart.js users vastly outnumber our small number of volunteer maintainers and 
-  we try to help as many users as we can, but we may not get to every question. 
-  Chart.js is a community project. You can contribute towards the goal of helping
-  every user by asking good questions, answering questions on StackOverflow
-  or Slack, creating an issue or pull request for the documentation, or otherwise
-  contributing to the project:
-
-  https://www.chartjs.org/docs/latest/developers/contributing.html
--->

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,84 @@
+name: Bug Report
+description: Something went awry
+labels: ["type: bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Need help or support?
+        Please don't open an issue! Head to https://stackoverflow.com/questions/tagged/chart.js.
+  
+  - type: markdown
+    attributes:
+      value: "Bug reports MUST be submitted with an interactive example: https://codepen.io/pen?template=BapRepQ."
+
+  - type: markdown
+    attributes:
+      value: Chart.js versions lower then 3.x are NOT supported anymore, new issues will be disregarded.
+
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: Tell us what should happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Current behavior
+      description: Tell us what happens instead of the expected behavior.
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Reproducible sample
+      description: |
+        Please provide issue reproduction.
+        You can use [this codepen](https://codepen.io/pen?template=BapRepQ) to make a reproducible sample.
+
+        Major framework wrappers for chart.js templates:
+        [vue-chart-3 sandbox (Vue)](https://codesandbox.io/s/vue-chart-3-chart-js-issue-template-bpg7k?file=/src/App.vue)
+        [ng2-charts sandbox (Angular)](https://codesandbox.io/s/ng2charts-chart-js-issue-template-fhezt?file=/src/app/app.component.ts)
+        [react-chartjs-2 sandbox (React)](https://codesandbox.io/s/react-chartjs-2-chart-js-issue-template-cg7b5?file=/src/App.tsx)
+
+        For typescript issues you can make use of [this TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIA) to make a reproducible sample.
+
+        If filing a bug against `master`, you may reference the latest code via
+        https://www.chartjs.org/dist/master/chart.min.js (changing the filename to
+        point at the file you need as appropriate). Do not rely on these files for
+        production purposes as they may be removed at any time.
+    validations:
+      required: true
+  
+  - type: textarea
+    attributes:
+      label: Optional extra steps/info to reproduce
+
+  - type: textarea
+    attributes:
+      label: Possible solution
+      description: If you have suggestions on a fix for the bug.
+
+  - type: textarea
+    attributes:
+      label: Context
+      description: |
+        How has this issue affected you? What are you trying to accomplish?
+        Providing context helps us come up with a solution that is most useful in the real world.
+
+  - type: input
+    attributes:
+      label: chart.js version
+      description: Which version of `chart.js` are you using?
+      placeholder: "v0.0.0"
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Browser name and version
+
+  - type: input
+    attributes:
+      label: Link to your project

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Support, Help, and Advice
+    url: https://stackoverflow.com/questions/tagged/chart.js
+    about: Need help or support? Head to https://stackoverflow.com/questions/tagged/chart.js

.github/ISSUE_TEMPLATE/docs.yml

@@ -0,0 +1,31 @@
+name: Documentation
+description: Are the docs lacking or missing something?
+labels: ["type: documentation"]
+body:
+  - type: checkboxes
+    attributes:
+      label: "Documentation Is:"
+      options:
+        - label: Missing or needed?
+        - label: Confusing
+        - label: Not sure?
+
+  - type: textarea
+    attributes:
+      label: Please Explain in Detail...
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Your Proposal for Changes
+    validations:
+      required: true
+  
+  - type: input
+    attributes:
+      label: Example
+      description: |
+        Provide a link to a live example demonstrating the issue or feature to be documented:
+        Normal: https://codepen.io/pen?template=BapRepQ
+        TS: [TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIA)

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,28 @@
+name: Feature Request
+description: Suggest an idea
+labels: ["type: enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Most features should start as plugins outside of Chart.js
+        (https://www.chartjs.org/docs/latest/developers/plugins.html).
+        Please consider whether your changes are useful for all users, or if this is
+        specific to your usecase and a Chart.js plugin would be more appropriate.
+
+        Need help or tech support? Please don't open an issue!
+        Head to https://stackoverflow.com/questions/tagged/chart.js
+
+  - type: textarea
+    attributes:
+      label: Feature Proposal
+      description: |
+        What are you trying to accomplish?
+        Providing context helps us come up with a solution that is most useful in the real world
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Possible Implementation
+      description: Not obligatory, but suggest ideas for how to implement the addition or change