[@mantine/core] PasswordInput: Fix incorrect styles when the componen…

…t is wrapper with element with `data-disabled` attribute (#5149)

docs/pages/core/password-input.mdx

@@ -63,6 +63,12 @@ Note that when `rightSection` prop is used, visibility toggle button is not rend
 
 <Demo data={PasswordInputDemos.error} />
 
+## Disabled
+
+When `disabled` prop is set, visibility toggle button is hidden:
+
+<Demo data={PasswordInputDemos.disabled} />
+
 <StylesApiSelectors component="PasswordInput" />
 
 <Demo data={PasswordInputDemos.stylesApi} />

src/mantine-core/src/components/PasswordInput/PasswordInput.module.css

@@ -35,7 +35,7 @@
   width: 100%;
   color: inherit;
 
-  [data-disabled] &,
+  .input[data-disabled] &,
   &:disabled {
     cursor: not-allowed;
   }
@@ -51,4 +51,8 @@
   height: var(--psi-button-size);
   min-width: var(--psi-button-size);
   min-height: var(--psi-button-size);
+
+  &:disabled {
+    display: none;
+  }
 }

src/mantine-core/src/components/PasswordInput/PasswordInput.story.tsx

@@ -4,7 +4,11 @@ import { PasswordInput } from './PasswordInput';
 export default { title: 'PasswordInput' };
 
 export function Usage() {
-  return <PasswordInput placeholder="Your password" label="Your password" />;
+  return (
+    <div data-disabled>
+      <PasswordInput placeholder="Your password" label="Your password" />
+    </div>
+  );
 }
 
 export function Unstyled() {

src/mantine-core/src/components/PasswordInput/PasswordInput.tsx

@@ -146,6 +146,7 @@ export const PasswordInput = factory<PasswordInputFactory>((_props, ref) => {
   const visibilityToggleButton = (
     <ActionIcon<'button'>
       {...getStyles('visibilityToggle')}
+      disabled={disabled}
       radius={radius}
       aria-hidden={!visibilityToggleButtonProps}
       tabIndex={-1}

src/mantine-demos/src/demos/core/PasswordInput/PasswordInput.demo.disabled.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { PasswordInput } from '@mantine/core';
+
+const code = `
+import { PasswordInput } from '@mantine/core';
+
+function Demo() {
+  return (
+    <PasswordInput disabled label="Disabled password input" placeholder="Disabled password input" />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <PasswordInput disabled label="Disabled password input" placeholder="Disabled password input" />
+  );
+}
+
+export const disabled: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+  maxWidth: 340,
+};

src/mantine-demos/src/demos/core/PasswordInput/PasswordInput.demos.story.tsx

@@ -37,3 +37,8 @@ export const DemoSections = {
   name: '⭐ Demo: sections',
   render: renderDemo(demos.sections),
 };
+
+export const DemoDisabled = {
+  name: '⭐ Demo: disabled',
+  render: renderDemo(demos.disabled),
+};

src/mantine-demos/src/demos/core/PasswordInput/index.ts

@@ -5,3 +5,4 @@ export { visibilityIcon } from './PasswordInput.demo.visibilityIcon';
 export { controlledVisibility } from './PasswordInput.demo.controlledVisibility';
 export { stylesApi } from './PasswordInput.demo.stylesApi';
 export { sections } from './PasswordInput.demo.sections';
+export { disabled } from './PasswordInput.demo.disabled';