Sebastian "Sebbie" Silbermann eps1lon

Component naming

public components

Pickers are named as <Wrapper><Type>Picker. When using the responsive wrapper we omit the wrapper type e.g. a ResponsiveTimePicker is named TimePicker. In other words: The responsive variant is the default variant people should use.

internal components

In internal components we do not omit the Responsive name.

Diff created running npx pixelmatch All-Icons-next.png AllIcons.pr.png AllIcons.diff.png 0

All-Icons-next.png was created using yarn; yarn test:regressions:run --grep AllIcons @ a448cc66674e8b7a297b462d357702aa934fa9ad

AllIcons.pr.png was created using yarn; yarn test:regressions:run --grep AllIcons @ mui/material-ui#25122

AllIcons.png diff

Chrome version Please confirm that the following version information is correct.

Chrome version: 87.0.4280.66 Operating system: Linux Version: Ubuntu 20.04 Channel:

envinfo for libraries

as github repository

npx github:eps1lon/testing-library-envinfo

prefer collocation

as `bin` script

npx --package @testing-library/react envinfo

TypeScript in React

Non-exhaustive list of issues with TypeScript in React that make components written in TypeScript less valueable.

Inference of generic props results in any for callbacks [MUI#13868]
Generics are lost with high-order functions [DT#37087], [TS#1213]
Refs need to be exact [TS#30748], [TS#21759]
union props are problematic with higher-order components TS issues with TextField in Material-UI

Not necessarily applicable to Material-UI:

ARIA spec to aria-query

Usage

Using Chrome

WAI-ARIA

goto ARIA stable editor's draft
Open devtools (e.g. via F12)

plugins

Wenn through all the plugins used when using preset-env with the following targets:

ie 11
edge >= 14
firefox >= 52
chrome >= 49
safari >= 10
node 8.0

	const fs = require('fs');
	const { snakeCase } = require('lodash');
	const fetch = require('cross-fetch');
	const path = require('path');
	const yargs = require('yargs');

	// https://stackoverflow.com/a/49428486/3406963
	function streamToString(stream) {
	const chunks = [];
	return new Promise((resolve, reject) => {

	/* eslint-disable no-restricted-syntax */
	const { Octokit } = require('@octokit/rest');

	const GITHUB_TOKEN = process.env.GITHUB_TOKEN;

	async function main() {
	const octokit = new Octokit({
	auth: GITHUB_TOKEN,
	});

	// Press ctrl+space for code completion
	export default function transformer(file, api, options = {}) {
	const j = api.jscodeshift;
	const root = j(file.source);

	const { layout = "AppFrame" } = options;

	let isDocsPage = false;
	root.find(j.ExportDefaultDeclaration).forEach((path) => {
	isDocsPage = path.node.declaration.params.length > 0;