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!: Use new Button features for SearchField #1695

Merged
merged 9 commits into from
Nov 6, 2024
Merged

feat!: Use new Button features for SearchField #1695

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1c5c917
Use new Button features for SearchField
VincentSmedinga Oct 23, 2024
227ad1d
Update test for custom label
VincentSmedinga Oct 23, 2024
cb53213
Merge branch 'develop' into feature/DES-1005-refactor-search-field-bu…
VincentSmedinga Nov 5, 2024
0dfa88b
Update for changed Button API
VincentSmedinga Nov 5, 2024
747ef9e
Remove unused class name
VincentSmedinga Nov 5, 2024
0db0177
Merge branch 'develop' into feature/DES-1005-refactor-search-field-bu…
VincentSmedinga Nov 5, 2024
af730ec
Use correct icon position
VincentSmedinga Nov 5, 2024
b5a309f
Merge branch 'develop' into feature/DES-1005-refactor-search-field-bu…
VincentSmedinga Nov 5, 2024
d6724a7
Resolve type error
VincentSmedinga Nov 5, 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
26 changes: 0 additions & 26 deletions packages/css/src/components/search-field/search-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,29 +68,3 @@
inline-size: var(--ams-search-field-input-cancel-button-inline-size);
margin-inline-start: 0.5rem;
}

@mixin reset-button {
border: 0;
margin-block: 0; // [1]
margin-inline: 0; // [1]

// [1] Remove the margin in older Safari.
}

.ams-search-field__button {
background-color: var(--ams-search-field-button-background-color);
color: var(--ams-search-field-button-color);
cursor: pointer;
outline-offset: var(--ams-search-field-button-outline-offset);

// TODO Check if these paddings are necessary
padding-block: var(--ams-search-field-button-padding-block);
padding-inline: var(--ams-search-field-button-padding-inline);
touch-action: manipulation;

@include reset-button;

&:hover {
background-color: var(--ams-search-field-button-hover-background-color);
}
}
2 changes: 1 addition & 1 deletion packages/react/src/SearchField/SearchField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('Search field', () => {
})

it('renders the button with a label', () => {
render(<SearchField.Button label="Search" />)
render(<SearchField.Button>Search</SearchField.Button>)

const component = screen.getByRole('button', { name: 'Search' })

Expand Down
27 changes: 14 additions & 13 deletions packages/react/src/SearchField/SearchFieldButton.tsx
View file
Open in desktop
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
import { SearchIcon } from '@amsterdam/design-system-react-icons'
import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes } from 'react'
import { Icon } from '../Icon'
import type { ForwardedRef } from 'react'
import { Button } from '../Button'
import type { ButtonProps } from '../Button'

type SearchFieldButtonProps = {
/** Describes the field for screen readers. */
label?: string
} & HTMLAttributes<HTMLButtonElement>
type SearchFieldButtonProps = Omit<ButtonProps, 'icon' | 'iconPosition' | 'variant'>

// TODO: replace this with IconButton when that's done
// TODO: discuss if IconButton is the right component to replace this
export const SearchFieldButton = forwardRef(
({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
<button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
<span className="ams-visually-hidden">{label}</span>
<Icon svg={SearchIcon} size="level-5" square />
</button>
({ className, children = 'Zoeken', ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
<Button
{...restProps}
className={clsx('ams-search-field__button', className)}
icon={SearchIcon}
iconPosition="only"
ref={ref}
>
{children}
</Button>
),
)

Expand Down
10 changes: 0 additions & 10 deletions proprietary/tokens/src/components/ams/search-field.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
{
"ams": {
"search-field": {
"button": {
"background-color": { "value": "{ams.color.primary-blue}" },
"color": { "value": "{ams.color.primary-white}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.sm}" },
"hover": {
"background-color": { "value": "{ams.color.dark-blue}" }
}
},
"input": {
"background-color": { "value": "{ams.color.primary-white}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
Expand Down