Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Input): fixed Ant props for Ant Design Input #776

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(Input): fixed Ant props for Ant Design Input #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
74ba820
fix: fixed Ant props for Input
Dec 18, 2024
a1840af
Merge branch 'main' of https://github.com/mia-platform/design-system …
Dec 19, 2024
8607248
fix: fixed snapshots
Dec 19, 2024
bd9ea88
fix: added scoped ant theme to Input
Dec 20, 2024
b21b71f
fix: fixed snapshots
Dec 20, 2024
69363c9
fix: reverted omit
Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/components/BaseInput/BaseInput.theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ import Theme from '../../themes/schema'
* @param {Partial<Theme>} theme - theme configuration.
* @returns {Partial<ComponentsTheme>} The generated Input Ant theme configuration.
*/
export default ({ palette, spacing, shape }: Partial<Theme>): ComponentsTheme['Input'] => ({
// sizing
paddingBlock: Number(spacing?.padding.sm),
paddingInline: Number(spacing?.padding.sm),
export default ({ palette, shape }: Partial<Theme>): ComponentsTheme['Input'] => ({
// shape
borderRadius: Number(shape?.border?.radius?.md),
// palette
Expand Down
62 changes: 38 additions & 24 deletions src/components/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { Input as AntInput, ConfigProvider, ThemeConfig } from 'antd'
import {
ChangeEvent,
ReactElement,
useCallback,
useMemo,
useState,
} from 'react'
import { Input as AntInput } from 'antd'

import { AddonType, Type } from './types'
import { BaseInput, defaults as baseInputDefaults } from '../BaseInput/BaseInput'
Expand All @@ -32,6 +32,7 @@ import { Icon } from '../Icon'
import { InputProps } from './props'
import { isObject } from '../../utils/object.ts'
import styles from './input.module.css'
import { useTheme } from '../../hooks/useTheme/useTheme.ts'

export const defaults = {
...baseInputDefaults,
Expand Down Expand Up @@ -95,6 +96,17 @@ export const Input = (
addonBefore: addonBeforeProp,
}: InputProps
) : ReactElement => {
const { spacing } = useTheme()

const scopedAntTheme: ThemeConfig = {
components: {
Input: {
paddingBlock: Number(spacing.padding.sm),
paddingInline: Number(spacing.padding.sm),
},
},
}

const [val, setVal] = useInputValue(value || defaultValue, valuePropName, {
before: addonBeforeProp,
after: addonAfterProp,
Expand Down Expand Up @@ -160,29 +172,31 @@ export const Input = (
}, [getValue, defaultValue])

return (
<BaseInput
addonAfter={addonAfter}
addonBefore={addonBefore}
allowClear={allowClear}
appearance={appearance}
className={styles.input}
component={AntInput}
defaultValue={inputDefaultValue}
id={id}
inputRef={inputRef}
isDisabled={isDisabled}
isError={isError}
isFullWidth={isFullWidth}
isReadOnly={isReadOnly}
maxLength={maxLength}
minLength={minLength}
placeholder={placeholder}
prefix={iconLeft && <Icon component={iconLeft} size={DEFAULT_ICON_SIZE} />}
suffix={iconRight && <Icon component={iconRight} size={DEFAULT_ICON_SIZE} />}
type={type}
value={inputValue}
onChange={handleChange}
/>
<ConfigProvider theme={scopedAntTheme}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is not good to enter the provider here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Danielecina the pr relates this issue:
#775

I agree that the Provider should be used only as a wrapper over the application if possible.

<BaseInput
addonAfter={addonAfter}
addonBefore={addonBefore}
allowClear={allowClear}
appearance={appearance}
className={styles.input}
component={AntInput}
defaultValue={inputDefaultValue}
id={id}
inputRef={inputRef}
isDisabled={isDisabled}
isError={isError}
isFullWidth={isFullWidth}
isReadOnly={isReadOnly}
maxLength={maxLength}
minLength={minLength}
placeholder={placeholder}
prefix={iconLeft && <Icon component={iconLeft} size={DEFAULT_ICON_SIZE} />}
suffix={iconRight && <Icon component={iconRight} size={DEFAULT_ICON_SIZE} />}
type={type}
value={inputValue}
onChange={handleChange}
/>
</ConfigProvider>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/ThemeProvider/Ant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const generateAntTheme = ({ palette, typography, shape, spacing }: Partial<Theme
Table: TableTheme({ palette, spacing }),
Tree: TreeTheme({ palette, shape }),
Typography: TypographyTheme({ typography }),
Input: InputTheme({ palette, shape, typography, spacing }),
Input: InputTheme({ palette, shape, typography }),
InputNumber: InputTheme({ palette, shape, typography, spacing }),
Select: SelectTheme({ palette, shape, typography, spacing }),
Tag: TagTheme({ palette }),
Expand Down
18 changes: 0 additions & 18 deletions src/components/ThemeProvider/__tests__/__snapshots__/Ant.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@ exports[`Generate Ant Theme generate ant theme from darkTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"InputNumber": {
"activeBorderColor": "#1261e4",
Expand All @@ -61,8 +59,6 @@ exports[`Generate Ant Theme generate ant theme from darkTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"Menu": {
"groupTitleColor": "#898989",
Expand Down Expand Up @@ -105,8 +101,6 @@ exports[`Generate Ant Theme generate ant theme from darkTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"Switch": {
"handleBg": "#ffffff",
Expand Down Expand Up @@ -214,8 +208,6 @@ exports[`Generate Ant Theme generate ant theme from empty theme 1`] = `
"colorTextPlaceholder": undefined,
"colorTextQuaternary": undefined,
"hoverBorderColor": undefined,
"paddingBlock": NaN,
"paddingInline": NaN,
},
"InputNumber": {
"activeBorderColor": undefined,
Expand All @@ -234,8 +226,6 @@ exports[`Generate Ant Theme generate ant theme from empty theme 1`] = `
"colorTextPlaceholder": undefined,
"colorTextQuaternary": undefined,
"hoverBorderColor": undefined,
"paddingBlock": NaN,
"paddingInline": NaN,
},
"Menu": {
"groupTitleColor": undefined,
Expand Down Expand Up @@ -278,8 +268,6 @@ exports[`Generate Ant Theme generate ant theme from empty theme 1`] = `
"colorTextPlaceholder": undefined,
"colorTextQuaternary": undefined,
"hoverBorderColor": undefined,
"paddingBlock": NaN,
"paddingInline": NaN,
},
"Switch": {
"handleBg": undefined,
Expand Down Expand Up @@ -387,8 +375,6 @@ exports[`Generate Ant Theme generate ant theme from lightTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"InputNumber": {
"activeBorderColor": "#1261e4",
Expand All @@ -407,8 +393,6 @@ exports[`Generate Ant Theme generate ant theme from lightTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"Menu": {
"groupTitleColor": "#898989",
Expand Down Expand Up @@ -451,8 +435,6 @@ exports[`Generate Ant Theme generate ant theme from lightTheme 1`] = `
"colorTextPlaceholder": "#acacac",
"colorTextQuaternary": "#898989",
"hoverBorderColor": "#1890ff",
"paddingBlock": 8,
"paddingInline": 8,
},
"Switch": {
"handleBg": "#ffffff",
Expand Down
Loading