[pickers] POC: `PickersTextField` styling - outlined variant #10778

noraleonte · 2023-10-23T14:45:56Z

I have followed (at least) the PR section of the contributing guide.

This PR is still work in progress

Part of #6384

Preview:

https://deploy-preview-10778--material-ui-x.netlify.app/x/react-date-pickers/date-field/

To do in scope of this PR

…e-textfield-styling

mui-bot · 2023-10-23T14:51:08Z

Deploy preview: https://deploy-preview-10778--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 05b6540

github-actions · 2023-10-23T15:16:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…e-textfield-styling

noraleonte · 2023-11-02T14:40:46Z

Opening this one up for review to start the conversation. I still have to remove the demo, comments and some simulated behavior, but I will still leave them hanging for a little while to make the review/testing easier.
I's also love a double check from @mui/design to make sure I didn't miss something and the new component is consistent with the material ui TextField.

…e-textfield-styling

packages/x-date-pickers/src/internals/components/FakeTextField/FakeInput.tsx

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.types.ts

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx

…textfield-styling

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx

Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com> Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com>

…e/mui-x into fake-textfield-styling

packages/x-date-pickers/src/internals/components/FakeTextField/fakeTextFieldClasses.ts

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx

packages/x-date-pickers/src/internals/components/FakeTextField/FakeInput.tsx

packages/x-date-pickers/src/internals/components/FakeTextField/FakeInput.types.ts

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.types.ts

packages/x-date-pickers/src/internals/components/FakeTextField/fakeTextFieldClasses.ts

flaviendelangle

That's an awesome first step

Can I let you update your branch where you have my code to use the new FakeTextField and push it to Github so that I can take it from here on my PR?

noraleonte · 2023-11-27T13:11:14Z

@flaviendelangle Thanks! Sure, I'll let you know when it's updated.

LukasTy

This looks great!
Thank you for the effort! 🙏

LukasTy · 2023-12-01T15:36:46Z

packages/x-date-pickers/src/internals/components/PickersTextField/Outline.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+


Nitpick: This looks like a copy of https://github.com/mui/material-ui/blob/master/packages/mui-material/src/OutlinedInput/NotchedOutline.js
If that's the case, maybe we could mention it? 🤔

LukasTy · 2023-12-01T15:53:53Z

packages/x-date-pickers/src/internals/components/PickersTextField/pickersTextFieldClasses.ts

+  notchedOutline: string;
+  /** Styles applied to the fake input element. */
+  input: string;
+  /** Styles applied to the section of the picker. */


Nitpick: Isn't there something missing from this description? 🤔

LukasTy · 2023-12-01T15:56:26Z

packages/x-date-pickers/src/internals/components/PickersTextField/pickersTextFieldClasses.ts

+  error: string;
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the fake input element. */


It could make sense to avoid the fake work here as well. 🤔
Maybe call it input sections container instead of fake input? 🤔

Discussed in #11258 where I'm renaming this class

LukasTy · 2023-12-04T08:28:40Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersTextField.tsx

+        firstInput.focus();
+      }
+
+      inputRef.current?.focus();


Nitpick: Is it the correct location to call it?
If we need/should focus both the root element as well as optionally the first section, then maybe the order should be inverted? 🤔

Removed in #11258

noraleonte added 4 commits October 13, 2023 14:07

wip

ec13e1a

Merge branch 'master' of https://github.com/noraleonte/mui-x into fak…

0201c2d

…e-textfield-styling

outlined input wip

349ed30

WIP 1

23c017a

noraleonte added the component: pickers This is the name of the generic UI component, not the React module! label Oct 23, 2023

noraleonte requested a review from flaviendelangle October 23, 2023 14:45

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 23, 2023

noraleonte added 4 commits October 24, 2023 15:44

fix conflicts

a3d6637

adjustments

e82202e

fix todos

a8b624e

scripts

1052aca

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 24, 2023

noraleonte added 4 commits October 31, 2023 01:11

adornments wip

1e938c7

Iteration 1 outlined FakeTextField

f3a63a2

Merge branch 'master' of https://github.com/noraleonte/mui-x into fak…

55164af

…e-textfield-styling

scripts

e4047b2

noraleonte self-assigned this Nov 2, 2023

noraleonte marked this pull request as ready for review November 2, 2023 14:40

noraleonte requested a review from LukasTy November 2, 2023 14:40

michelengelen changed the base branch from master to next November 6, 2023 14:20

Merge branch 'master' of https://github.com/noraleonte/mui-x into fak…

1b130ca

…e-textfield-styling

flaviendelangle reviewed Nov 9, 2023

View reviewed changes

noraleonte added 4 commits November 9, 2023 17:17

adjustments

babb6e7

update fakeInput

c425072

Merge branch 'next' of https://github.com/noraleonte/mui-x into fake-…

595007d

…textfield-styling

wip

25f711c

flaviendelangle reviewed Nov 22, 2023

View reviewed changes

packages/x-date-pickers/src/internals/components/FakeTextField/FakeTextField.tsx Outdated Show resolved Hide resolved

noraleonte and others added 5 commits November 22, 2023 14:03

Apply suggestions from code review - Flavien

68fe9f1

Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com> Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com>

wip

66db521

Merge branch 'fake-textfield-styling' of https://github.com/noraleont…

9763632

…e/mui-x into fake-textfield-styling

remove demo

5881456

make ts happy

2aa1414

noraleonte force-pushed the fake-textfield-styling branch from ca3781d to 2aa1414 Compare November 22, 2023 14:07

noraleonte added 2 commits November 22, 2023 16:11

ts

9a76cd0

ts

fb1acd7

noraleonte requested a review from flaviendelangle November 22, 2023 14:35

flaviendelangle reviewed Nov 22, 2023

View reviewed changes

fix

3969f89

flaviendelangle mentioned this pull request Nov 23, 2023

[fields] Use the PickersTextField component in the fields #10649

Merged

flaviendelangle reviewed Nov 23, 2023

View reviewed changes

noraleonte added 3 commits November 24, 2023 13:06

Cleanup

7a21081

Apply styles to separators

15bed58

rename fake TextField

05b6540

noraleonte changed the title ~~[pickers] POC: Fake textfield styling - outlined~~ [pickers] POC: PickersTextField styling - outlined variant Nov 24, 2023

noraleonte requested a review from flaviendelangle November 27, 2023 09:58

flaviendelangle approved these changes Nov 27, 2023

View reviewed changes

noraleonte merged commit 7259384 into mui:next Nov 27, 2023
17 checks passed

noraleonte deleted the fake-textfield-styling branch November 27, 2023 13:11

LukasTy reviewed Dec 4, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] POC: `PickersTextField` styling - outlined variant #10778

[pickers] POC: `PickersTextField` styling - outlined variant #10778

noraleonte commented Oct 23, 2023 •

edited

mui-bot commented Oct 23, 2023 •

edited

github-actions bot commented Oct 23, 2023

noraleonte commented Nov 2, 2023

flaviendelangle left a comment

noraleonte commented Nov 27, 2023

LukasTy left a comment

LukasTy Dec 1, 2023

LukasTy Dec 1, 2023

LukasTy Dec 1, 2023

flaviendelangle Dec 4, 2023

LukasTy Dec 4, 2023

flaviendelangle Dec 4, 2023

		@@ -0,0 +1,84 @@
		import * as React from 'react';
		import { styled } from '@mui/material/styles';

[pickers] POC: PickersTextField styling - outlined variant #10778

[pickers] POC: PickersTextField styling - outlined variant #10778

Conversation

noraleonte commented Oct 23, 2023 • edited

Preview:

To do in scope of this PR

mui-bot commented Oct 23, 2023 • edited

github-actions bot commented Oct 23, 2023

noraleonte commented Nov 2, 2023

flaviendelangle left a comment

Choose a reason for hiding this comment

noraleonte commented Nov 27, 2023

LukasTy left a comment

Choose a reason for hiding this comment

LukasTy Dec 1, 2023

Choose a reason for hiding this comment

LukasTy Dec 1, 2023

Choose a reason for hiding this comment

LukasTy Dec 1, 2023

Choose a reason for hiding this comment

flaviendelangle Dec 4, 2023

Choose a reason for hiding this comment

LukasTy Dec 4, 2023

Choose a reason for hiding this comment

flaviendelangle Dec 4, 2023

Choose a reason for hiding this comment

[pickers] POC: `PickersTextField` styling - outlined variant #10778

[pickers] POC: `PickersTextField` styling - outlined variant #10778

noraleonte commented Oct 23, 2023 •

edited

mui-bot commented Oct 23, 2023 •

edited