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

Feat(rebrand): TextInput rebrand #11

Merged
merged 5 commits into from
Oct 17, 2023
Merged

Feat(rebrand): TextInput rebrand #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
257f9d1
Feat(rebrand): TextInput rebrand
Oct 12, 2023
854bb6c
Feat(rebrand): Revert default fluid declaration
Oct 13, 2023
1debb78
Feat(rebrand): Update style after PR comments
Oct 16, 2023
0903d9e
Feat(rebrand): Update active state
Oct 16, 2023
9b9ee00
Feat(rebrand): Rework active state by creating a custom hook
Oct 16, 2023
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
56 changes: 32 additions & 24 deletions packages/components/src/input/src/Input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
.o-ui {
vicky-comeau marked this conversation as resolved.
Show resolved Hide resolved
--o-ui-input-padding: var(--o-ui-sp-3);
franckgaudin marked this conversation as resolved.
Show resolved Hide resolved
--o-ui-input-padding: var(--hop-space-inset-squish-md);
--o-ui-input-padding-with-icon: var(--o-ui-sp-7);
--o-ui-input-padding-with-button: var(--o-ui-sp-8);
--o-ui-input-padding-loading: var(--o-ui-sp-8);
--o-ui-input-border-color: var(--o-ui-b-alias-mid-break);
--o-ui-input-border-radius: var(--o-ui-br-2);
--o-ui-input-background-color: var(--o-ui-bg-alias-mid-break);
--o-ui-input-border-color: var(--hop-neutral-border);
--o-ui-input-border-radius: var(--hop-shape-rounded-md);
--o-ui-input-background-color: var(--hop-neutral-surface);
}

.o-ui-input {
display: inline-flex;
position: relative;
transition: var(--o-ui-focus-ring-transition);
color: var(--o-ui-text-alias-primary);
width: var(--o-ui-sz-16);
color: var(--hop-neutral-text);
font-family: var(--hop-body-md-font-family);
font-size: var(--hop-body-md-font-size);
width: 20rem;
align-items: center;
}

Expand All @@ -25,8 +27,8 @@
border: none;
width: 100%;
background-color: inherit;
color: inherit;
min-height: calc(var(--o-ui-sz-6) - 2px);
color: var(--hop-neutral-text);
franckgaudin marked this conversation as resolved.
Show resolved Hide resolved
min-height: calc(2.5rem - 2px);
margin: 0;
padding: 0;
}
Expand All @@ -47,7 +49,7 @@
.o-ui-text-input,
.o-ui-text-area textarea,
.o-ui-number-input {
font-size: var(--o-ui-fs-3);
font-size: var(--hop-body-sm-font-size);
padding: 0;
border-radius: var(--o-ui-input-border-radius);
border: 1px solid var(--o-ui-input-border-color);
Expand All @@ -60,7 +62,7 @@
.o-ui-text-input input,
.o-ui-text-area textarea,
.o-ui-number-input input {
padding: 0 var(--o-ui-input-padding);
padding: var(--o-ui-input-padding);
}

.o-ui-text-input input,
Expand Down Expand Up @@ -96,26 +98,27 @@
.o-ui-input input:-webkit-autofill,
.o-ui-input textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--o-ui-bg-alias-accent-faint) inset !important;
-webkit-text-fill-color: var(--o-ui-text-alias-primary) !important;
-webkit-text-fill-color: var(--hop-neutral-text) !important;
}

/* STATE | HOVER */
.o-ui-input:not(.o-ui-input-focus):not(.o-ui-input-disabled):hover,
.o-ui-input:not(.o-ui-input-focus):hover textarea:not(:disabled) {
border-color: var(--o-ui-b-alias-high-break);
border-color: var(--hop-neutral-border-hover);
background-color: var(--hop-neutral-surface-hover);
}

/* PLACEHOLDER */
.o-ui-input input::placeholder,
.o-ui-input textarea::placeholder {
color: var(--o-ui-text-alias-input-placeholder);
color: var(--hop-neutral-text-weakest);
opacity: 1;
font-size: var(--o-ui-fs-3);
font-size: var(--hop-body-md-font-size);
}

.o-ui-input-disabled input::placeholder,
.o-ui-input textarea:disabled::placeholder {
color: var(--o-ui-text-alias-secondary);
color: var(--hop-neutral-text-disabled);
}

/* FLUID */
Expand All @@ -126,19 +129,19 @@
/* INVALID */
.o-ui-input-invalid:not(.o-ui-input-disabled),
.o-ui-input-invalid:not(.o-ui-input-disabled) textarea {
--o-ui-input-border-color: var(--o-ui-b-alias-alert);
--o-ui-input-border-color: var(--hop-danger-border-strong);
}

/* INVALID | DISABLED */
.o-ui-input-invalid.o-ui-input-disabled,
.o-ui-input-invalid.o-ui-text-area textarea:disabled {
background-color: var(--o-ui-bg-alias-alert-light);
--o-ui-input-border-color: var(--o-ui-bg-alias-alert-light);
background-color: var(--hop-neutral-border-disabled);
--o-ui-input-border-color: var(--hop-neutral-surface-disabled);
}

.o-ui-input.o-ui-input-invalid:not(.o-ui-text-area):focus-within,
.o-ui-input-focus.o-ui-input-invalid {
box-shadow: var(--o-ui-focus-ring-inset-md);
box-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
}

/* STATE | HOVER | INVALID */
Expand All @@ -154,6 +157,7 @@
flex-shrink: 0;
margin-right: 0.5rem;
margin-left: 0.5rem;
color: var(--hop-neutral-icon);
}

/* ICON | MEDIUM */
Expand All @@ -164,7 +168,6 @@
/* BUTTON | INPUT */
.o-ui-text-input .o-ui-input-button,
.o-ui-number-input .o-ui-input-button {
position: inline-flex !important;
display: flex;
text-align: center;
margin-right: .625rem;
Expand All @@ -182,17 +185,22 @@
.o-ui-number-input:not(.o-ui-input-disabled):focus-within,
.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea,
.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
box-shadow: var(--o-ui-focus-ring-inset-md) !important;
box-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
outline: transparent;
}

/* STATES | DISABLED */
.o-ui-text-input.o-ui-input-disabled,
.o-ui-number-input.o-ui-input-disabled,
.o-ui-input textarea:disabled {
opacity: var(--o-ui-disabled-opacity);
background-color: var(--o-ui-input-background-color);
background-color: var(--hop-neutral-surface-disabled);
cursor: not-allowed;
--o-ui-input-border-color: var(--hop-neutral-border-disabled);
}

/* STATES | ACTIVE */
.o-ui-text-input.o-ui-input-has-active {
--o-ui-input-border-color: var(--hop-neutral-border-active);
}

.o-ui-input-disabled > * {
Expand Down Expand Up @@ -223,4 +231,4 @@
.o-ui-number-input.o-ui-input-loading,
.o-ui-text-area.o-ui-input-loading textarea {
padding-right: var(--o-ui-input-padding-loading);
}
}
1 change: 1 addition & 0 deletions packages/components/src/input/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export * from "./useGroupInput";
export * from "./useInput";
export * from "./useInputContent";
export * from "./useInputHasFocus";
export * from "./useInputHasActive";
export * from "./adaptInputStylingProps";
export * from "./types";

18 changes: 18 additions & 0 deletions packages/components/src/input/src/useInputHasActive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { useEventCallback } from "../../shared";
import { useState } from "react";

export function useInputHasActive() {
const [hasActive, setHasActive] = useState(false);

return {
hasActive,
inputProps: {
onBlur: useEventCallback(() => {
setHasActive(false);
}),
onFocus: useEventCallback(() => {
setHasActive(true);
})
}
};
}
2 changes: 1 addition & 1 deletion packages/components/src/text-input/docs/TextInput.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ A specialized text input which show / hide a password.

<Preview>
<Story name="password">
<PasswordInput placeholder="What's your secret?" />
<PasswordInput validationState="invalid" placeholder="What's your secret?" />
</Story>
</Preview>

Expand Down
9 changes: 6 additions & 3 deletions packages/components/src/text-input/src/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputIcon, useInputSpinner } from "../../input";
import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputHasActive, useInputIcon, useInputSpinner } from "../../input";
import { Box, BoxProps } from "../../box";
import { ChangeEvent, ComponentProps, ElementType, ReactElement, forwardRef } from "react";
import { ClearInputGroupContext, useInputGroupTextInputProps } from "../../input-group";
Expand Down Expand Up @@ -135,6 +135,7 @@ export function InnerTextInput(props: InnerTextInputProps) {
});

const { hasFocus, inputProps: inputFocusProps } = useInputHasFocus();
const { hasActive, inputProps: inputActiveProps } = useInputHasActive();

const iconMarkup = useInputIcon(icon, { disabled });

Expand All @@ -156,7 +157,8 @@ export function InnerTextInput(props: InnerTextInputProps) {
style
},
inputProps,
inputFocusProps
inputFocusProps,
inputActiveProps
)}
/>
{/* Otherwise an input button will receive an addon className */}
Expand All @@ -178,7 +180,8 @@ export function InnerTextInput(props: InnerTextInputProps) {
iconMarkup && "has-icon",
disabled && "disabled",
buttonMarkup && "has-button",
hasFocus && "has-focus"
hasFocus && "has-focus",
hasActive && "has-active",
)
},
wrapperProps
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/text-input/tests/chromatic/TextInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const Default: TextInputStory = {
render: () => (
<Stack>
<TextInput aria-label="Label" />
<TextInput active aria-label="Label" />
<TextInput loading aria-label="Label" />
<TextInput disabled aria-label="Label"></TextInput>
<TextInput readOnly aria-label="Label"></TextInput>
Expand All @@ -35,6 +36,7 @@ export const Placeholder: TextInputStory = {
render: () => (
<Stack>
<TextInput placeholder="Where to?" />
<TextInput active placeholder="Where to?" />
<TextInput loading placeholder="Where to?" />
<TextInput disabled placeholder="Where to?"></TextInput>
<TextInput readOnly placeholder="Where to?"></TextInput>
Expand All @@ -52,6 +54,7 @@ export const Value: TextInputStory = {
render: () => (
<Stack>
<TextInput defaultValue="SpaceX will win the race!" aria-label="Label" />
<TextInput active defaultValue="SpaceX will win the race!" aria-label="Label" />
<TextInput loading defaultValue="SpaceX will win the race!" aria-label="Label" />
<TextInput disabled defaultValue="SpaceX will win the race!" aria-label="Label" />
<TextInput readOnly defaultValue="SpaceX will win the race!" aria-label="Label" />
Expand All @@ -74,6 +77,7 @@ export const Icon: TextInputStory = {
<Stack>
<TextInput icon={<MagnifierMajorIcon />} placeholder="Where to?" aria-label="Label" />
<TextInput icon={<MagnifierMajorIcon />} defaultValue="SpaceX will win the race!" placeholder="Where to?" />
<TextInput active icon={<MagnifierMajorIcon />} placeholder="Where to?" />
<TextInput loading icon={<MagnifierMajorIcon />} placeholder="Where to?" />
<TextInput disabled icon={<MagnifierMajorIcon />} placeholder="Where to?" />
<TextInput readOnly icon={<MagnifierMajorIcon />} placeholder="Where to?" />
Expand All @@ -96,6 +100,7 @@ export const Button: TextInputStory = {
<TextInput readOnly button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" />
</Inline>
<TextInput loading button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" />
<TextInput active button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" />
</Stack>
)
};
Expand Down