Skip to content

Commit

Permalink
♻️ Re-added support for manual width
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimarz
mimarz committed Oct 4, 2022
1 parent cd8ac9b commit 0b11b36
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 85 deletions.
85 changes: 9 additions & 76 deletions packages/eds-core-react/src/components/Input/Input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
decorators: [
(Story) => {
return (
<Stack>
<Stack align="stretch" direction="column">
<Story />
</Stack>
)
Expand All @@ -33,53 +33,20 @@ export default {
export const Introduction: Story<InputProps> = (args) => {
return <Input {...args} />
}
Introduction.decorators = [
(Story) => {
return (
<Stack direction="column" align="start">
<Story />
</Stack>
)
},
]

export const Types: Story<InputProps> = () => (
<>
<div>
<Label htmlFor="textfield-normal" label="Normal" />
<Input
id="textfield-normal"
placeholder="Placeholder text"
autoComplete="off"
/>
<Label htmlFor="textfield-normal" label="Text" />
<Input id="textfield-normal" autoComplete="off" />
</div>
<div>
<Label htmlFor="textfield-number" label="Number" />
<Input
type="number"
id="textfield-number"
placeholder="Placeholder text"
/>
</div>
<div>
<Label htmlFor="textfield-search" label="Search" />
<Input
type="search"
id="textfield-search"
placeholder="Placeholder text"
/>
<Input type="number" id="textfield-number" />
</div>
<div>
<Label htmlFor="textfield-password" label="Password" />
<Input
type="password"
id="textfield-password"
placeholder="Placeholder text"
/>
</div>
<div>
<Label htmlFor="textfield-email" label="Email" />
<Input type="email" id="textfield-email" placeholder="Placeholder text" />
<Input type="password" id="textfield-password" />
</div>
</>
)
Expand Down Expand Up @@ -147,15 +114,6 @@ export const ReadOnly: Story<InputProps> = () => (
</>
)
ReadOnly.storyName = 'Read only'
ReadOnly.decorators = [
(Story) => {
return (
<Stack direction="column" align="start">
<Story />
</Stack>
)
},
]

export const Accessiblity: Story<InputProps> = () => {
// To wrap the input component inside the label element is not yet supported
Expand All @@ -166,15 +124,6 @@ export const Accessiblity: Story<InputProps> = () => {
</>
)
}
Accessiblity.decorators = [
(Story) => {
return (
<Stack direction="column" align="start">
<Story />
</Stack>
)
},
]

export const Compact: Story<InputProps> = () => {
// To wrap the input component inside the label element is not yet supported
Expand Down Expand Up @@ -270,11 +219,9 @@ export const WithAdornments: Story<InputProps> = () => {
placeholder="Placeholder text Placeholder text"
value="Some text Some textSome textSome text"
leftAdornments={
<>
<SmallButton disabled variant="ghost_icon">
IT
</SmallButton>
</>
<SmallButton disabled variant="ghost_icon">
IT
</SmallButton>
}
rightAdornments={
<>
Expand All @@ -288,11 +235,7 @@ export const WithAdornments: Story<InputProps> = () => {
type="text"
id="adornments-readonly"
readOnly
leftAdornments={
<>
<SmallButton variant="ghost_icon">IT</SmallButton>
</>
}
leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
rightAdornments={
<>
unit
Expand All @@ -304,16 +247,6 @@ export const WithAdornments: Story<InputProps> = () => {
)
}

WithAdornments.decorators = [
(Story) => {
return (
<Stack direction="column" align="start">
<Story />
</Stack>
)
},
]

export const casted: Story<InputProps> = (args) => {
return <Input as="textarea" {...args} />
}
30 changes: 21 additions & 9 deletions packages/eds-core-react/src/components/Input/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,10 @@ export type InputProps = {
leftAdornmentsProps?: ComponentPropsWithoutRef<'div'>
/** Right adornments props */
rightAdornmentsProps?: ComponentPropsWithoutRef<'div'>
/** Manually specify left adornments width. The width will be the dom element width if not defined */
leftAdornmentsWidth?: number
/** Manually specify right adornments width. The width will be the dom element width if not defined */
rightAdornmentsWidth?: number
/** Cast the input to another element */
as?: ElementType
/** */
Expand All @@ -160,6 +164,8 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
style,
leftAdornmentsProps,
rightAdornmentsProps,
leftAdornmentsWidth,
rightAdornmentsWidth,
...other
},
ref,
Expand All @@ -173,21 +179,27 @@ export const Input: OverridableComponent<InputProps, HTMLInputElement> =
const [leftAdornmentsRef, setLeftAdornmentsRef] = useState<HTMLDivElement>()

const token = useCallback((): ComponentToken => {
const leftAdornmentsWidth = leftAdornmentsRef
? leftAdornmentsRef.clientWidth
: 0
const rightAdornmentsWidth = rightAdornmentsRef
? rightAdornmentsRef.clientWidth
: 0
const _leftAdornmentsWidth =
leftAdornmentsWidth ||
(leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0)
const _rightAdornmentsWidth =
rightAdornmentsWidth ||
(rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0)
return {
..._token,
spacings: {
..._token.spacings,
left: `${leftAdornmentsWidth + parseInt(_token.spacings.left)}px`,
right: `${rightAdornmentsWidth + parseInt(_token.spacings.right)}px`,
left: `${_leftAdornmentsWidth + parseInt(_token.spacings.left)}px`,
right: `${_rightAdornmentsWidth + parseInt(_token.spacings.right)}px`,
},
}
}, [leftAdornmentsRef, rightAdornmentsRef, _token])()
}, [
leftAdornmentsWidth,
leftAdornmentsRef,
rightAdornmentsWidth,
rightAdornmentsRef,
_token,
])()

const inputProps = {
ref,
Expand Down

0 comments on commit 0b11b36

Please sign in to comment.