From b5eb8324abd5122709279522c675853c05470d6a Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 21 Mar 2024 09:21:50 +0100
Subject: [PATCH] [docs] Add example to add a second icon next to the field's
 opening button

---
 .../SecondIconNextToOpeningButton.js          | 42 +++++++++++++++++++
 .../SecondIconNextToOpeningButton.tsx         | 42 +++++++++++++++++++
 .../SecondIconNextToOpeningButton.tsx.preview | 10 +++++
 .../custom-opening-button.md                  |  7 ++++
 4 files changed, 101 insertions(+)
 create mode 100644 docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.js
 create mode 100644 docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx
 create mode 100644 docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx.preview

diff --git a/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.js b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.js
new file mode 100644
index 000000000000..882c22d12551
--- /dev/null
+++ b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import InputAdornment from '@mui/material/InputAdornment';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+function CustomInputAdornment(props) {
+  const { hasError, children, sx, ...other } = props;
+  return (
+    <InputAdornment {...other}>
+      <PriorityHighIcon
+        color="error"
+        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+      />
+      {children}
+    </InputAdornment>
+  );
+}
+
+export default function SecondIconNextToOpeningButton() {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Picker with error icon"
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+          onError={(error) => setHasError(!!error)}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{
+            inputAdornment: { hasError },
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx
new file mode 100644
index 000000000000..716944608d49
--- /dev/null
+++ b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
+  const { hasError, children, sx, ...other } = props;
+  return (
+    <InputAdornment {...other}>
+      <PriorityHighIcon
+        color="error"
+        sx={{ marginLeft: 1, opacity: hasError ? 1 : 0 }}
+      />
+      {children}
+    </InputAdornment>
+  );
+}
+
+export default function SecondIconNextToOpeningButton() {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Picker with error icon"
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+          onError={(error) => setHasError(!!error)}
+          slots={{ inputAdornment: CustomInputAdornment }}
+          slotProps={{
+            inputAdornment: { hasError } as any,
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx.preview b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx.preview
new file mode 100644
index 000000000000..88d49b818dce
--- /dev/null
+++ b/docs/data/date-pickers/custom-opening-button/SecondIconNextToOpeningButton.tsx.preview
@@ -0,0 +1,10 @@
+<DatePicker
+  label="Picker with error icon"
+  maxDate={dayjs('2022-04-17')}
+  defaultValue={dayjs('2022-04-18')}
+  onError={(error) => setHasError(!!error)}
+  slots={{ inputAdornment: CustomInputAdornment }}
+  slotProps={{
+    inputAdornment: { hasError } as any,
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/custom-opening-button/custom-opening-button.md b/docs/data/date-pickers/custom-opening-button/custom-opening-button.md
index 08a8d486a5c7..6a10e1298854 100644
--- a/docs/data/date-pickers/custom-opening-button/custom-opening-button.md
+++ b/docs/data/date-pickers/custom-opening-button/custom-opening-button.md
@@ -34,3 +34,10 @@ If you want to track the opening of the picker, you should use the `onOpen` / `o
 ```
 
 :::
+
+## Add a second icon next to the opening button
+
+If you want to add a second icon next to the opening button, you can use the `inputAdornment` slot.
+In the example below, the warning icon will be visible anytime the current value is invalid:
+
+{{"demo": "SecondIconNextToOpeningButton.js"}}