paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 35 Packages Projects Releases Wiki Activity

Merge pull request #30357 from backstage/canon-searchfield

Browse Source 
Canon - New SearchField component
This commit is contained in:
Ben Lambert
2025-06-24 12:45:14 +02:00
committed by GitHub
parent 42ac5e0dc5 57d2d9eb64
commit 1267d19bac
25 changed files with 741 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/dark-cougars-go.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Add new SearchField component in Canon
canon-docs/public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
canon-docs/src/app/layout.tsx
+1 -2
View File
@@ -6,8 +6,7 @@ import { CustomTheme } from '@/components/CustomTheme';
import styles from '../css/page.module.css';
import '../css/globals.css';
import '/public/core.css';
import '/public/components.css';
import '/public/styles.css';
export const metadata: Metadata = {
title: 'Canon',
canon-docs/src/content/components/search-field.mdx
+69
View File
@@ -0,0 +1,69 @@
import { PropsTable } from '@/components/PropsTable';
import { Snippet } from '@/components/Snippet';
import { SearchFieldSnippet } from '@/snippets/stories-snippets';
import {
searchFieldPropDefs,
searchFieldUsageSnippet,
searchFieldDefaultSnippet,
searchFieldSizesSnippet,
searchFieldDescriptionSnippet,
} from './search-field.props';
import { ComponentInfos } from '@/components/ComponentInfos';
# SearchField
A SearchField is a text field designed for searches.
<Snippet
align="center"
py={4}
preview={<SearchFieldSnippet story="WithLabel" />}
code={searchFieldDefaultSnippet}
/>
<ComponentInfos
component="searchfield"
classNames={[
'canon-SearchField',
'canon-TextField',
'canon-InputWrapper',
'canon-Input',
'canon-InputIcon',
'canon-FieldLabelWrapper',
'canon-FieldLabel',
'canon-FieldDescription',
'canon-FieldSecondaryLabel',
'canon-FieldError',
]}
usageCode={searchFieldUsageSnippet}
/>
## API reference
<PropsTable data={searchFieldPropDefs} />
## Examples
### Sizes
We support two different sizes: `small`, `medium`.
<Snippet
align="center"
py={4}
open
preview={<SearchFieldSnippet story="Sizes" />}
code={searchFieldSizesSnippet}
/>
### With description
Here's a simple SearchField with a description.
<Snippet
align="center"
py={4}
open
preview={<SearchFieldSnippet story="WithDescription" />}
code={searchFieldDescriptionSnippet}
/>
canon-docs/src/content/components/search-field.props.ts
+43
View File
@@ -0,0 +1,43 @@
import {
classNamePropDefs,
stylePropDefs,
type PropDef,
} from '@/utils/propDefs';
export const searchFieldPropDefs: Record<string, PropDef> = {
size: {
type: 'enum',
values: ['small', 'medium'],
default: 'small',
responsive: true,
},
label: {
type: 'string',
},
icon: {
type: 'enum',
values: ['ReactNode'],
},
description: {
type: 'string',
},
name: {
type: 'string',
required: true,
},
...classNamePropDefs,
...stylePropDefs,
};
export const searchFieldUsageSnippet = `import { SearchField } from '@backstage/canon';
<SearchField />`;
export const searchFieldDefaultSnippet = `<SearchField label="Label" placeholder="Enter a URL" />`;
export const searchFieldSizesSnippet = `<Flex direction="row" gap="4">
<SearchField size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
<SearchField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
</Flex>`;
export const searchFieldDescriptionSnippet = `<SearchField label="Label" description="Description" placeholder="Enter a URL" />`;
canon-docs/src/content/components/text-field.mdx
+8 -9
View File
@@ -25,15 +25,14 @@ A text field component for your forms.
component="textfield"
classNames={[
'canon-TextField',
'canon-TextFieldLabel',
'canon-TextFieldRequired',
'canon-TextFieldInputWrapper',
'canon-TextFieldIcon',
'canon-TextFieldInput',
'canon-TextFieldClearButton',
'canon-TextFieldClearButtonIcon',
'canon-TextFieldDescription',
'canon-TextFieldError',
'canon-InputWrapper',
'canon-Input',
'canon-InputIcon',
'canon-FieldLabelWrapper',
'canon-FieldLabel',
'canon-FieldDescription',
'canon-FieldSecondaryLabel',
'canon-FieldError',
]}
usageCode={textFieldUsageSnippet}
/>
canon-docs/src/snippets/stories-snippets.tsx
+12
View File
@@ -21,6 +21,7 @@ import * as CollapsibleStories from '../../../packages/canon/src/components/Coll
import * as RadioGroupStories from '../../../packages/canon/src/components/RadioGroup/RadioGroup.stories';
import * as TabsStories from '../../../packages/canon/src/components/Tabs/Tabs.stories';
import * as SwitchStories from '../../../packages/canon/src/components/Switch/Switch.stories';
import * as SearchFieldStories from '../../../packages/canon/src/components/SearchField/SearchField.stories';
export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
const stories = composeStories(BoxStories);
@@ -209,3 +210,14 @@ export const RadioGroupSnippet = ({
return StoryComponent ? <StoryComponent /> : null;
};
export const SearchFieldSnippet = ({
story,
}: {
story: keyof typeof SearchFieldStories;
}) => {
const stories = composeStories(SearchFieldStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
canon-docs/src/utils/data.ts
+5
View File
@@ -121,6 +121,11 @@ export const components: Page[] = [
slug: 'radio-group',
status: 'alpha',
},
{
title: 'SearchField',
slug: 'search-field',
status: 'alpha',
},
{
title: 'Select',
slug: 'select',
packages/canon/css/styles.css
+94 -46
View File
@@ -9503,14 +9503,14 @@
margin-top: var(--canon-space-2);
}
.canon-FieldLabel {
.canon-FieldLabelWrapper {
margin-bottom: var(--canon-space-3);
gap: var(--canon-space-1);
flex-direction: column;
display: flex;
}
.canon-FieldLabelLabel {
.canon-FieldLabel {
color: var(--canon-fg-primary);
cursor: pointer;
font-weight: var(--canon-font-weight-regular);
@@ -9518,13 +9518,13 @@
margin-right: auto;
}
.canon-FieldLabelSecondaryLabel {
.canon-FieldSecondaryLabel {
color: var(--canon-fg-secondary);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-FieldLabelDescription {
.canon-FieldDescription {
font-weight: var(--canon-font-weight-regular);
font-size: var(--canon-font-size-2);
color: var(--canon-fg-secondary);
@@ -10135,19 +10135,27 @@
display: flex;
}
.canon-TextFieldInputWrapper {
.canon-InputWrapper {
position: relative;
&[data-size="small"] .canon-Input {
height: 2rem;
}
&[data-size="medium"] .canon-Input {
height: 2.5rem;
}
&[data-size="small"] .canon-Input[data-icon] {
padding-left: var(--canon-space-8);
}
&[data-size="medium"] .canon-Input[data-icon] {
padding-left: var(--canon-space-9);
}
}
.canon-TextFieldInputWrapper[data-size="small"] {
height: 2rem;
}
.canon-TextFieldInputWrapper[data-size="medium"] {
height: 2.5rem;
}
.canon-TextFieldIcon {
.canon-InputIcon {
left: var(--canon-space-3);
margin-right: var(--canon-space-1);
color: var(--canon-fg-primary);
@@ -10155,19 +10163,19 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
&[data-size="small"], &[data-size="small"] svg {
width: 1rem;
height: 1rem;
}
&[data-size="medium"], &[data-size="medium"] svg {
width: 1.25rem;
height: 1.25rem;
}
}
.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
width: 1rem;
height: 1rem;
}
.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
width: 1.25rem;
height: 1.25rem;
}
.canon-TextFieldInput {
.canon-Input {
padding: 0 var(--canon-space-3);
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
@@ -10182,38 +10190,78 @@
align-items: center;
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
display: flex;
&::-webkit-search-cancel-button, &::-webkit-search-decoration {
-webkit-appearance: none;
}
&::placeholder {
color: var(--canon-fg-secondary);
}
&[data-focused] {
outline-color: var(--canon-border-pressed);
outline-width: 0;
}
&[data-hovered] {
border-color: var(--canon-border-hover);
}
&[data-focused] {
border-color: var(--canon-border-pressed);
outline-width: 0;
}
&[data-invalid] {
border-color: var(--canon-fg-danger);
}
&[data-disabled] {
opacity: .5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
}
.canon-TextFieldInput::placeholder {
.canon-SearchField[data-empty] .canon-InputClear {
display: none;
}
.canon-InputClear {
cursor: pointer;
color: var(--canon-fg-secondary);
background-color: #0000;
border: none;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
transition: color .2s ease-in-out;
display: flex;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
.canon-TextFieldInput[data-icon] {
padding-left: var(--canon-space-8);
.canon-InputClear:hover {
color: var(--canon-fg-primary);
}
.canon-TextFieldInput[data-focused] {
outline-color: var(--canon-border-pressed);
outline-width: 0;
.canon-InputClear[data-size="small"] {
width: 2rem;
height: 2rem;
}
.canon-TextFieldInput[data-hovered] {
border-color: var(--canon-border-hover);
.canon-InputClear[data-size="medium"] {
width: 2.5rem;
height: 2.5rem;
}
.canon-TextFieldInput[data-focused] {
border-color: var(--canon-border-pressed);
outline-width: 0;
}
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextFieldInput[data-disabled] {
opacity: .5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
.canon-InputClear svg {
width: 1rem;
height: 1rem;
}
.canon-TooltipPopup {
packages/canon/report.api.md
+28 -7
View File
@@ -27,6 +27,7 @@ import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { RemixiconComponentType } from '@remixicon/react';
import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
import { Table as Table_2 } from '@tanstack/react-table';
import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
@@ -345,10 +346,10 @@ export const componentDefinitions: {
};
readonly FieldLabel: {
readonly classNames: {
readonly root: 'canon-FieldLabel';
readonly label: 'canon-FieldLabelLabel';
readonly secondaryLabel: 'canon-FieldLabelSecondaryLabel';
readonly description: 'canon-FieldLabelDescription';
readonly root: 'canon-FieldLabelWrapper';
readonly label: 'canon-FieldLabel';
readonly secondaryLabel: 'canon-FieldSecondaryLabel';
readonly description: 'canon-FieldDescription';
};
};
readonly Flex: {
@@ -420,6 +421,12 @@ export const componentDefinitions: {
readonly thumb: 'canon-ScrollAreaThumb';
};
};
readonly SearchField: {
readonly classNames: {
readonly root: 'canon-SearchField';
readonly clear: 'canon-InputClear';
};
};
readonly Select: {
readonly classNames: {
readonly root: 'canon-Select';
@@ -492,9 +499,9 @@ export const componentDefinitions: {
readonly TextField: {
readonly classNames: {
readonly root: 'canon-TextField';
readonly inputWrapper: 'canon-TextFieldInputWrapper';
readonly icon: 'canon-TextFieldIcon';
readonly input: 'canon-TextFieldInput';
readonly inputWrapper: 'canon-InputWrapper';
readonly input: 'canon-Input';
readonly inputIcon: 'canon-InputIcon';
};
readonly dataAttributes: {
readonly invalid: readonly [true, false];
@@ -1351,6 +1358,20 @@ export const ScrollArea: {
>;
};
// @public (undocumented)
export const SearchField: ForwardRefExoticComponent<
SearchFieldProps & RefAttributes<HTMLDivElement>
>;
// @public (undocumented)
export interface SearchFieldProps
extends SearchFieldProps_2,
Omit<FieldLabelProps, 'htmlFor' | 'id'> {
icon?: ReactNode | false;
placeholder?: string;
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
}
// @public (undocumented)
export const Select: ForwardRefExoticComponent<
SelectProps & RefAttributes<HTMLDivElement>
packages/canon/src/components/FieldLabel/FieldLabel.styles.css
+4 -4
View File
@@ -1,11 +1,11 @@
.canon-FieldLabel {
.canon-FieldLabelWrapper {
display: flex;
flex-direction: column;
margin-bottom: var(--canon-space-3);
gap: var(--canon-space-1);
}
.canon-FieldLabelLabel {
.canon-FieldLabel {
color: var(--canon-fg-primary);
margin-right: auto;
cursor: pointer;
@@ -13,13 +13,13 @@
font-size: var(--canon-font-size-2);
}
.canon-FieldLabelSecondaryLabel {
.canon-FieldSecondaryLabel {
color: var(--canon-fg-secondary);
font-weight: var(--canon-font-weight-regular);
margin-left: var(--canon-space-1);
}
.canon-FieldLabelDescription {
.canon-FieldDescription {
font-weight: var(--canon-font-weight-regular);
font-size: var(--canon-font-size-2);
color: var(--canon-fg-secondary);
packages/canon/src/components/Heading/Heading.tsx
+1 -1
View File
@@ -37,13 +37,13 @@ function HeadingComponent<T extends ElementType = 'h1'>(
const { classNames, dataAttributes } = useStyles('Heading', {
variant,
color,
truncate,
});
return (
<Component
ref={ref}
className={clsx(classNames.root, className)}
data-truncate={truncate}
{...dataAttributes}
style={style}
{...restProps}
packages/canon/src/components/SearchField/SearchField.stories.tsx
+154
View File
@@ -0,0 +1,154 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { SearchField } from './SearchField';
import { Form } from 'react-aria-components';
import { Icon } from '../Icon';
import { Flex } from '../Flex';
import { FieldLabel } from '../FieldLabel';
const meta = {
title: 'Forms/SearchField',
component: SearchField,
argTypes: {
isRequired: {
control: 'boolean',
},
icon: {
control: 'object',
},
placeholder: {
control: 'text',
},
},
} satisfies Meta<typeof SearchField>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
name: 'url',
style: {
maxWidth: '300px',
},
},
};
export const Sizes: Story = {
args: {
...Default.args,
},
render: args => (
<Flex direction="row" gap="4" style={{ width: '100%', maxWidth: '600px' }}>
<SearchField {...args} size="small" />
<SearchField {...args} size="medium" />
</Flex>
),
};
export const DefaultValue: Story = {
args: {
...Default.args,
defaultValue: 'https://example.com',
},
};
export const WithLabel: Story = {
args: {
...Default.args,
label: 'Label',
},
};
export const WithDescription: Story = {
args: {
...WithLabel.args,
description: 'Description',
},
};
export const Required: Story = {
args: {
...WithLabel.args,
isRequired: true,
},
};
export const Disabled: Story = {
args: {
...Default.args,
isDisabled: true,
},
};
export const WithIcon: Story = {
args: {
...Default.args,
},
render: args => (
<SearchField
{...args}
placeholder="Enter a URL"
size="small"
icon={<Icon name="eye" />}
/>
),
};
export const DisabledWithIcon: Story = {
args: {
...WithIcon.args,
isDisabled: true,
},
};
export const ShowError: Story = {
args: {
...WithLabel.args,
},
render: args => (
<Form validationErrors={{ url: 'Invalid URL' }}>
<SearchField {...args} />
</Form>
),
};
export const Validation: Story = {
args: {
...WithLabel.args,
validate: value => (value === 'admin' ? 'Nice try!' : null),
},
};
export const CustomField: Story = {
render: () => (
<>
<FieldLabel
htmlFor="custom-field"
id="custom-field-label"
label="Custom Field"
/>
<SearchField
id="custom-field"
aria-labelledby="custom-field-label"
name="custom-field"
defaultValue="Custom Field"
/>
</>
),
};
packages/canon/src/components/SearchField/SearchField.styles.css
+55
View File
@@ -0,0 +1,55 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.canon-SearchField[data-empty] .canon-InputClear {
display: none;
}
.canon-InputClear {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: var(--canon-fg-secondary);
transition: color 0.2s ease-in-out;
}
.canon-InputClear:hover {
color: var(--canon-fg-primary);
}
.canon-InputClear[data-size='small'] {
width: 2rem;
height: 2rem;
}
.canon-InputClear[data-size='medium'] {
width: 2.5rem;
height: 2.5rem;
}
.canon-InputClear svg {
width: 1rem;
height: 1rem;
}
packages/canon/src/components/SearchField/SearchField.tsx
+120
View File
@@ -0,0 +1,120 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { forwardRef, useEffect } from 'react';
import {
Input,
SearchField as AriaSearchField,
Button,
} from 'react-aria-components';
import clsx from 'clsx';
import { FieldLabel } from '../FieldLabel';
import { FieldError } from '../FieldError';
import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
import { useStyles } from '../../hooks/useStyles';
import type { SearchFieldProps } from './types';
/** @public */
export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
(props, ref) => {
const {
className,
icon,
size = 'small',
label,
secondaryLabel,
description,
isRequired,
placeholder = 'Search',
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
...rest
} = props;
useEffect(() => {
if (!label && !ariaLabel && !ariaLabelledBy) {
console.warn(
'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',
);
}
}, [label, ariaLabel, ariaLabelledBy]);
const { classNames: textFieldClassNames, dataAttributes } = useStyles(
'TextField',
{
size,
},
);
const { classNames: searchFieldClassNames } = useStyles('SearchField', {
size,
});
// If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
const secondaryLabelText =
secondaryLabel || (isRequired ? 'Required' : null);
return (
<AriaSearchField
className={clsx(
textFieldClassNames.root,
searchFieldClassNames.root,
className,
)}
{...dataAttributes}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
{...rest}
ref={ref}
>
<FieldLabel
label={label}
secondaryLabel={secondaryLabelText}
description={description}
/>
<div
className={textFieldClassNames.inputWrapper}
data-size={dataAttributes['data-size']}
>
{icon !== false && (
<div
className={textFieldClassNames.inputIcon}
data-size={dataAttributes['data-size']}
aria-hidden="true"
>
{icon || <RiSearch2Line />}
</div>
)}
<Input
className={textFieldClassNames.input}
{...(icon !== false && { 'data-icon': true })}
placeholder={placeholder}
/>
<Button
className={searchFieldClassNames.clear}
data-size={dataAttributes['data-size']}
>
<RiCloseCircleLine />
</Button>
</div>
<FieldError />
</AriaSearchField>
);
},
);
SearchField.displayName = 'searchField';
packages/canon/src/components/SearchField/index.ts
+18
View File
@@ -0,0 +1,18 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './SearchField';
export * from './types';
packages/canon/src/components/SearchField/types.ts
+41
View File
@@ -0,0 +1,41 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
import { ReactNode } from 'react';
import type { Breakpoint } from '../../types';
import type { FieldLabelProps } from '../FieldLabel/types';
/** @public */
export interface SearchFieldProps
extends AriaSearchFieldProps,
Omit<FieldLabelProps, 'htmlFor' | 'id'> {
/**
* An icon to render before the input
*/
icon?: ReactNode | false;
/**
* The size of the text field
* @defaultValue 'medium'
*/
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
/**
* The placeholder text for the input
*/
placeholder?: string;
}
packages/canon/src/components/Text/Text.tsx
+1 -1
View File
@@ -39,13 +39,13 @@ function TextComponent<T extends ElementType = 'p'>(
variant,
weight,
color,
truncate,
});
return (
<Component
ref={ref}
className={clsx(classNames.root, className)}
data-truncate={truncate}
{...dataAttributes}
style={style}
{...restProps}
packages/canon/src/components/TextField/TextField.stories.tsx
+8 -2
View File
@@ -97,9 +97,15 @@ export const Disabled: Story = {
export const WithIcon: Story = {
args: {
...Default.args,
placeholder: 'Search...',
icon: <Icon name="search" />,
},
render: args => (
<TextField
{...args}
placeholder="Enter a URL"
size="small"
icon={<Icon name="eye" />}
/>
),
};
export const DisabledWithIcon: Story = {
packages/canon/src/components/TextField/TextField.styles.css
+57 -49
View File
@@ -21,19 +21,27 @@
width: 100%;
}
.canon-TextFieldInputWrapper {
.canon-InputWrapper {
position: relative;
&[data-size='small'] .canon-Input {
height: 2rem;
}
&[data-size='medium'] .canon-Input {
height: 2.5rem;
}
&[data-size='small'] .canon-Input[data-icon] {
padding-left: var(--canon-space-8);
}
&[data-size='medium'] .canon-Input[data-icon] {
padding-left: var(--canon-space-9);
}
}
.canon-TextFieldInputWrapper[data-size='small'] {
height: 2rem;
}
.canon-TextFieldInputWrapper[data-size='medium'] {
height: 2.5rem;
}
.canon-TextFieldIcon {
.canon-InputIcon {
position: absolute;
left: var(--canon-space-3);
top: 50%;
@@ -41,28 +49,27 @@
margin-right: var(--canon-space-1);
color: var(--canon-fg-primary);
flex-shrink: 0;
&[data-size='small'],
&[data-size='small'] svg {
width: 1rem;
height: 1rem;
}
&[data-size='medium'],
&[data-size='medium'] svg {
width: 1.25rem;
height: 1.25rem;
}
}
.canon-TextFieldIcon[data-size='small'],
.canon-TextFieldIcon[data-size='small'] svg {
width: 1rem;
height: 1rem;
}
.canon-TextFieldIcon[data-size='medium'],
.canon-TextFieldIcon[data-size='medium'] svg {
width: 1.25rem;
height: 1.25rem;
}
.canon-TextFieldInput {
.canon-Input {
display: flex;
align-items: center;
padding: 0 var(--canon-space-3);
border-radius: var(--canon-radius-3);
border: 1px solid var(--canon-border);
background-color: var(--canon-bg-surface-1);
font-size: var(--canon-font-size-3);
font-family: var(--canon-font-regular);
font-weight: var(--canon-font-weight-regular);
@@ -71,36 +78,37 @@
width: 100%;
height: 100%;
cursor: inherit;
}
.canon-TextFieldInput::placeholder {
color: var(--canon-fg-secondary);
}
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
}
.canon-TextFieldInput[data-icon] {
padding-left: var(--canon-space-8);
}
&::placeholder {
color: var(--canon-fg-secondary);
}
.canon-TextFieldInput[data-focused] {
outline-color: var(--canon-border-pressed);
outline-width: 0px;
}
&[data-focused] {
outline-color: var(--canon-border-pressed);
outline-width: 0px;
}
.canon-TextFieldInput[data-hovered] {
border-color: var(--canon-border-hover);
}
&[data-hovered] {
border-color: var(--canon-border-hover);
}
.canon-TextFieldInput[data-focused] {
border-color: var(--canon-border-pressed);
outline-width: 0px;
}
&[data-focused] {
border-color: var(--canon-border-pressed);
outline-width: 0px;
}
.canon-TextFieldInput[data-invalid] {
border-color: var(--canon-fg-danger);
}
&[data-invalid] {
border-color: var(--canon-fg-danger);
}
.canon-TextFieldInput[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--canon-border-disabled);
}
}
packages/canon/src/components/TextField/TextField.tsx
+1 -2
View File
@@ -48,7 +48,6 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
}
}, [label, ariaLabel, ariaLabelledBy]);
// Get the responsive value for the variant
const { classNames, dataAttributes } = useStyles('TextField', {
size,
});
@@ -77,7 +76,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
>
{icon && (
<div
className={classNames.icon}
className={classNames.inputIcon}
data-size={dataAttributes['data-size']}
aria-hidden="true"
>
packages/canon/src/css/components.css
+1
View File
@@ -40,6 +40,7 @@
@import '../components/Tabs/Tabs.styles.css';
@import '../components/Text/styles.css';
@import '../components/TextField/TextField.styles.css';
@import '../components/SearchField/SearchField.styles.css';
@import '../components/Tooltip/Tooltip.styles.css';
@import '../components/ScrollArea/ScrollArea.styles.css';
@import '../components/Select/Select.styles.css';
packages/canon/src/hooks/useResponsiveValue.ts
-43
View File
@@ -1,43 +0,0 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Breakpoint } from '../types';
import { useBreakpoint, breakpoints } from './useBreakpoint';
type ResponsiveValue = string | Partial<Record<Breakpoint, string>>;
export const useResponsiveValue = (value: ResponsiveValue) => {
const { breakpoint } = useBreakpoint();
if (typeof value === 'object') {
const index = breakpoints.findIndex(b => b.id === breakpoint);
for (let i = index; i >= 0; i--) {
if (value[breakpoints[i].id]) {
return value[breakpoints[i].id] as string;
}
}
// If no value is found for the current or smaller breakpoints, check from the smallest
for (let i = 0; i < breakpoints.length; i++) {
if (value[breakpoints[i].id]) {
return value[breakpoints[i].id] as string;
}
}
}
return value;
};
packages/canon/src/index.ts
+1
View File
@@ -48,6 +48,7 @@ export * from './components/TextField';
export * from './components/Tooltip';
export * from './components/Menu';
export * from './components/ScrollArea';
export * from './components/SearchField';
export * from './components/Link';
export * from './components/Select';
export * from './components/Switch';
packages/canon/src/utils/componentDefinitions.ts
+13 -7
View File
@@ -79,10 +79,10 @@ export const componentDefinitions = {
},
FieldLabel: {
classNames: {
root: 'canon-FieldLabel',
label: 'canon-FieldLabelLabel',
secondaryLabel: 'canon-FieldLabelSecondaryLabel',
description: 'canon-FieldLabelDescription',
root: 'canon-FieldLabelWrapper',
label: 'canon-FieldLabel',
secondaryLabel: 'canon-FieldSecondaryLabel',
description: 'canon-FieldDescription',
},
},
Flex: {
@@ -154,6 +154,12 @@ export const componentDefinitions = {
thumb: 'canon-ScrollAreaThumb',
},
},
SearchField: {
classNames: {
root: 'canon-SearchField',
clear: 'canon-InputClear',
},
},
Select: {
classNames: {
root: 'canon-Select',
@@ -220,9 +226,9 @@ export const componentDefinitions = {
TextField: {
classNames: {
root: 'canon-TextField',
inputWrapper: 'canon-TextFieldInputWrapper',
icon: 'canon-TextFieldIcon',
input: 'canon-TextFieldInput',
inputWrapper: 'canon-InputWrapper',
input: 'canon-Input',
inputIcon: 'canon-InputIcon',
},
dataAttributes: {
invalid: [true, false] as const,