From 9145dffd2a3767f5be19adc2683ba11c50dd9485 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 8 Nov 2024 14:02:38 +0100 Subject: [PATCH 1/2] feat!: Require an alt prop for every Image (#1739) Co-authored-by: Vincent Smedinga Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/image/README.md | 13 +++++++++---- packages/react/src/Avatar/Avatar.tsx | 2 +- packages/react/src/Image/Image.test.tsx | 10 +++++----- packages/react/src/Image/Image.tsx | 8 +++++++- storybook/src/docs/components/AppIcons.tsx | 16 ++++++++-------- 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/css/src/components/image/README.md b/packages/css/src/components/image/README.md index c4a9cb7e52..2c120ac8cc 100644 --- a/packages/css/src/components/image/README.md +++ b/packages/css/src/components/image/README.md @@ -12,11 +12,16 @@ If the intrinsic dimensions of the source do not match an aspect ratio, the imag ## Guidelines -- Do not forget to include a description of the image in the `alt` attribute. - This ensures that screen reader users can also access this information. - Additionally, it can aid in search engine optimization. +- The `alt` attribute is required, but can be empty. - A description is unnecessary for decorative images; use `alt=""` for these. - Examples are images that add little to the nearby text or pictures that purely contribute to the design or atmosphere of the page (source: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)). + Non-visual browsers will then hide the image from the user. + Examples are images that add little to the nearby text, and pictures that purely contribute to the design or atmosphere of the page (source: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)). +- Do describe the content of the image if the image isn’t only decorative. + When choosing a description for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there’s an image on the page (source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)). +- Every image’s alternate text should be able to replace the image without altering the meaning of the page. + You should never use `alt` for text that could be construed as a caption or title (source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)). +- The alternate text will also display if the image is not (yet) loaded. + Additionally, it can be helpful for search engine optimization. - Optionally specify multiple candidates for the image through the `srcSet` attribute. For example, provide small, medium, and large variants for various screen sizes. This prevents unnecessary downloading of large files. diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx index b32cb9dfe5..a103565e3d 100644 --- a/packages/react/src/Avatar/Avatar.tsx +++ b/packages/react/src/Avatar/Avatar.tsx @@ -36,7 +36,7 @@ type AvatarContentProps = { const AvatarContent = ({ imageSrc, initials }: AvatarContentProps) => { if (imageSrc) { - return + return } if (initials.length) { diff --git a/packages/react/src/Image/Image.test.tsx b/packages/react/src/Image/Image.test.tsx index 5f830066be..3c1c62daa3 100644 --- a/packages/react/src/Image/Image.test.tsx +++ b/packages/react/src/Image/Image.test.tsx @@ -6,7 +6,7 @@ import '@testing-library/jest-dom' describe('Image', () => { it('renders', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -15,7 +15,7 @@ describe('Image', () => { }) it('renders a design system BEM class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -23,7 +23,7 @@ describe('Image', () => { }) it('renders an additional class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -32,7 +32,7 @@ describe('Image', () => { aspectRatioOptions.forEach((aspectRatio) => { it(`renders class names to display the image in the ${aspectRatio} aspect ratio`, () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') @@ -43,7 +43,7 @@ describe('Image', () => { it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx index 2ccee61fb3..ec4efcd0f4 100644 --- a/packages/react/src/Image/Image.tsx +++ b/packages/react/src/Image/Image.tsx @@ -8,7 +8,13 @@ import { forwardRef } from 'react' import type { ForwardedRef, ImgHTMLAttributes } from 'react' import { AspectRatioProps } from '../common/types' -export type ImageProps = AspectRatioProps & ImgHTMLAttributes +export type ImageProps = { + /** + * A textual description of the content of the image. + */ + alt: string +} & AspectRatioProps & + ImgHTMLAttributes export const Image = forwardRef( ({ aspectRatio, className, ...restProps }: ImageProps, ref: ForwardedRef) => ( diff --git a/storybook/src/docs/components/AppIcons.tsx b/storybook/src/docs/components/AppIcons.tsx index b417b8e6d8..45281bdf4b 100644 --- a/storybook/src/docs/components/AppIcons.tsx +++ b/storybook/src/docs/components/AppIcons.tsx @@ -3,7 +3,7 @@ import { Image } from '@amsterdam/design-system-react' export const AppleTouchIcon = () => (
- +
apple-touch-icon.png (180px)
@@ -12,19 +12,19 @@ export const AppleTouchIcon = () => ( export const Favicon = () => (
- +
favicon.ico (16px)
- +
favicon.ico (32px)
- +
favicon.ico (48px)
- +
favicon.ico (64px)
@@ -33,7 +33,7 @@ export const Favicon = () => ( export const SvgIcon = () => (
- +
icon.svg (64px)
@@ -42,11 +42,11 @@ export const SvgIcon = () => ( export const WebAppIcons = () => (
- +
icon-192.png (192px)
- +
icon-512.png (512px)
From 92312faf845fbb8d28494aa46a57bdc8f378f402 Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Fri, 8 Nov 2024 14:10:07 +0100 Subject: [PATCH 2/2] feat: Rename reset mixins to include element name (#1738) Co-authored-by: Vincent Smedinga --- packages/css/documentation/coding-conventions.md | 6 +++++- .../css/src/components/blockquote/blockquote.scss | 6 +++--- .../css/src/components/breadcrumb/breadcrumb.scss | 6 +++--- .../css/src/components/date-input/date-input.scss | 6 +++--- .../description-list/description-list.scss | 10 +++++----- packages/css/src/components/dialog/dialog.scss | 2 +- .../src/components/error-message/error-message.scss | 6 +++--- .../css/src/components/field-set/field-set.scss | 4 ++-- .../css/src/components/file-input/file-input.scss | 2 +- packages/css/src/components/heading/heading.scss | 6 +++--- .../css/src/components/icon-button/icon-button.scss | 4 ++-- .../css/src/components/link-list/link-list.scss | 6 +++--- .../src/components/ordered-list/ordered-list.scss | 6 +++--- .../src/components/page-heading/page-heading.scss | 6 +++--- .../css/src/components/page-menu/page-menu.scss | 13 +++++-------- .../css/src/components/pagination/pagination.scss | 6 +++--- .../css/src/components/paragraph/paragraph.scss | 6 +++--- .../components/password-input/password-input.scss | 6 +++--- packages/css/src/components/screen/screen.scss | 7 +------ .../src/components/search-field/search-field.scss | 2 +- packages/css/src/components/select/select.scss | 4 ++-- packages/css/src/components/switch/switch.scss | 7 +------ .../table-of-contents/table-of-contents.scss | 6 +++--- .../css/src/components/text-area/text-area.scss | 6 +++--- .../css/src/components/text-input/text-input.scss | 6 +++--- .../css/src/components/time-input/time-input.scss | 6 +++--- .../src/components/top-task-link/top-task-link.scss | 9 ++------- .../components/unordered-list/unordered-list.scss | 6 +++--- 28 files changed, 76 insertions(+), 90 deletions(-) diff --git a/packages/css/documentation/coding-conventions.md b/packages/css/documentation/coding-conventions.md index 6190d39cf0..08634fc339 100644 --- a/packages/css/documentation/coding-conventions.md +++ b/packages/css/documentation/coding-conventions.md @@ -39,9 +39,13 @@ Still, we define its thickness and offset for the initial state. ## Use mixins for patterns and resets We use Sass mixins to extract common patterns, especially if they need more than 1 declaration. -We collect reset styles in mixins as well. Both the name of the mixins and their documentation help explain the approach. +We collect reset styles in mixins as well. +These are named after the element they reset, e.g. `@mixin reset-ul`. +This helps reusing reset styles per element, and reminds to update the mixin if the element type changes. +The declarations in the mixin must override default user agent styling; otherwise it is not a reset. + ## Form validation styling We style both the native invalid state (`:invalid`) as the invalid state you can set manually, using `aria-invalid`. diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss index 9941584ce0..e1f39d94ef 100644 --- a/packages/css/src/components/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -6,13 +6,13 @@ @import "../../common/hyphenation"; @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-blockquote { margin-block: 0; margin-inline: 0; } .ams-blockquote { + box-sizing: border-box; break-inside: avoid; color: var(--ams-blockquote-color); font-family: var(--ams-blockquote-font-family); @@ -23,7 +23,7 @@ @include hyphenation; @include text-rendering; - @include reset; + @include reset-blockquote; &::before { content: open-quote; diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 562d86fa78..1fc4231726 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -5,8 +5,7 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-ol { margin-block: 0; padding-inline: 0; } @@ -19,11 +18,12 @@ } .ams-breadcrumb__list { + box-sizing: border-box; break-after: avoid; break-inside: avoid; @include text-rendering; - @include reset; + @include reset-ol; } .ams-breadcrumb__item { diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss index 74855c3bef..3d5b5dc7a6 100644 --- a/packages/css/src/components/date-input/date-input.scss +++ b/packages/css/src/components/date-input/date-input.scss @@ -5,18 +5,18 @@ @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; margin-block: 0; } .ams-date-input { background-color: var(--ams-date-input-background-color); box-shadow: var(--ams-date-input-box-shadow); + box-sizing: border-box; color: var(--ams-date-input-color); font-family: var(--ams-date-input-font-family); font-size: var(--ams-date-input-font-size); @@ -36,7 +36,7 @@ touch-action: manipulation; @include text-rendering; - @include reset; + @include reset-input; &:hover { box-shadow: var(--ams-date-input-hover-box-shadow); diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss index 40c1db033c..7a5680868a 100644 --- a/packages/css/src/components/description-list/description-list.scss +++ b/packages/css/src/components/description-list/description-list.scss @@ -6,12 +6,12 @@ @import "../../common/breakpoint"; @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-dl { margin-block: 0; } .ams-description-list { + box-sizing: border-box; color: var(--ams-description-list-color); column-gap: var(--ams-description-list-column-gap); display: grid; @@ -20,7 +20,7 @@ line-height: var(--ams-description-list-line-height); row-gap: var(--ams-description-list-row-gap); - @include reset; + @include reset-dl; @include text-rendering; } @@ -54,7 +54,7 @@ } } -@mixin reset-description { +@mixin reset-dd { margin-inline: 0; } @@ -62,7 +62,7 @@ font-weight: var(--ams-description-list-description-font-weight); padding-inline-start: var(--ams-description-list-description-padding-inline-start); - @include reset-description; + @include reset-dd; @media screen and (min-width: $ams-breakpoint-medium) { grid-column-start: 2; diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index e293204719..69a58f72e8 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -4,7 +4,6 @@ */ @mixin reset-dialog { - box-sizing: border-box; inset-block: 0; } @@ -13,6 +12,7 @@ so do not apply these styles without an `open` attribute. */ .ams-dialog:not(dialog:not([open])) { background-color: var(--ams-dialog-background-color); border: var(--ams-dialog-border); + box-sizing: border-box; display: flex; // Using flex here, because grid works strangely in Safari flex-direction: column; gap: var(--ams-dialog-gap); diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss index 31232a453e..bdc789802b 100644 --- a/packages/css/src/components/error-message/error-message.scss +++ b/packages/css/src/components/error-message/error-message.scss @@ -5,12 +5,12 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-p { margin-block: 0; } .ams-error-message { + box-sizing: border-box; color: var(--ams-error-message-color); display: inline-flex; font-family: var(--ams-error-message-font-family); @@ -20,5 +20,5 @@ line-height: var(--ams-error-message-line-height); @include text-rendering; - @include reset; + @include reset-p; } diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss index 9b4a690462..9ee7d329b9 100644 --- a/packages/css/src/components/field-set/field-set.scss +++ b/packages/css/src/components/field-set/field-set.scss @@ -6,7 +6,7 @@ @import "../../common/hyphenation"; @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-fieldset { border: 0; margin-inline: 0; padding-block: 0; @@ -16,7 +16,7 @@ .ams-field-set { break-inside: avoid; - @include reset; + @include reset-fieldset; } .ams-field-set--invalid { diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index 164b5b21c6..8c43944d9e 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -8,7 +8,6 @@ @mixin reset-button { border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; } .ams-file-input { @@ -39,6 +38,7 @@ appearance: none; // Reset native appearance, this causes issues on iOS and Android devices background-color: var(--ams-file-input-file-selector-button-background-color); box-shadow: var(--ams-file-input-file-selector-button-box-shadow); + box-sizing: border-box; color: var(--ams-file-input-file-selector-button-color); cursor: var(--ams-file-input-file-selector-button-cursor); font-family: inherit; diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss index e46a718168..3eb185c147 100644 --- a/packages/css/src/components/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -6,12 +6,12 @@ @import "../../common/hyphenation"; @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-hx { margin-block: 0; } .ams-heading { + box-sizing: border-box; break-after: avoid; break-inside: avoid; color: var(--ams-heading-color); @@ -20,7 +20,7 @@ @include hyphenation; @include text-rendering; - @include reset; + @include reset-hx; } .ams-heading--level-1 { diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss index 8958323bae..e8d3fdc22c 100644 --- a/packages/css/src/components/icon-button/icon-button.scss +++ b/packages/css/src/components/icon-button/icon-button.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@mixin reset { +@mixin reset-button { border: 0; margin-block: 0; // [1] margin-inline: 0; // [1] @@ -20,7 +20,7 @@ outline-offset: var(--ams-icon-button-outline-offset); touch-action: manipulation; - @include reset; + @include reset-button; &:hover { background-color: var(--ams-icon-button-hover-background-color); diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index fd03d56739..450968b00b 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -6,19 +6,19 @@ @import "../../common/hyphenation"; @import "../../common/text-rendering"; -@mixin reset-list { - box-sizing: border-box; +@mixin reset-ul { list-style: none; margin-block: 0; padding-inline-start: 0; } .ams-link-list { + box-sizing: border-box; display: grid; gap: var(--ams-link-list-gap); @include text-rendering; - @include reset-list; + @include reset-ul; } .ams-link-list__link { diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 3c9cd2446d..3ac1f633f0 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -5,19 +5,19 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-ol { list-style-type: none; margin-block: 0; padding-inline-start: 0; } .ams-ordered-list { + box-sizing: border-box; display: grid; gap: var(--ams-ordered-list-gap); @include text-rendering; - @include reset; + @include reset-ol; } .ams-ordered-list:not(.ams-ordered-list--no-markers) { diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss index 1502f2dfec..a982fcee05 100644 --- a/packages/css/src/components/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -6,12 +6,12 @@ @import "../../common/hyphenation"; @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-h1 { margin-block: 0; } .ams-page-heading { + box-sizing: border-box; break-after: avoid; break-inside: avoid; color: var(--ams-page-heading-color); @@ -22,7 +22,7 @@ @include hyphenation; @include text-rendering; - @include reset; + @include reset-h1; } .ams-page-heading--inverse-color { diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss index 7c9d9b1ea1..3ca0ac7b17 100644 --- a/packages/css/src/components/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -5,18 +5,14 @@ @import "../../common/text-rendering"; -@mixin reset-list { - box-sizing: border-box; +@mixin reset-ul { margin-block: 0; padding-inline: 0; } -@mixin reset-item { - box-sizing: border-box; -} - .ams-page-menu { align-items: center; + box-sizing: border-box; column-gap: var(--ams-page-menu-column-gap); display: flex; flex-direction: row; @@ -24,7 +20,7 @@ list-style: none; row-gap: var(--ams-page-menu-row-gap); - @include reset-list; + @include reset-ul; } .ams-page-menu--align-end { @@ -54,9 +50,10 @@ } .ams-page-menu__link { + box-sizing: border-box; + @include page-menu-item; @include text-rendering; - @include reset-item; } .ams-page-menu__link:hover, diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index a34f4f796b..ab63116416 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -5,7 +5,7 @@ @import "../../common/text-rendering"; -@mixin reset-list { +@mixin reset-ol { list-style-type: none; margin-block: 0; padding-inline-start: 0; @@ -21,12 +21,11 @@ justify-content: center; line-height: var(--ams-pagination-line-height); - @include reset-list; + @include reset-ol; } @mixin reset-button { all: unset; - box-sizing: border-box; outline: revert; } @@ -35,6 +34,7 @@ at the bottom `all: unset` overrides the `gap` property. */ @include reset-button; + box-sizing: border-box; cursor: pointer; display: flex; gap: var(--ams-pagination-button-gap); diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index 6648b32e66..8b9108021a 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -5,12 +5,12 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-p { margin-block: 0; } .ams-paragraph { + box-sizing: border-box; color: var(--ams-paragraph-color); font-family: var(--ams-paragraph-font-family); font-size: var(--ams-paragraph-font-size); @@ -18,7 +18,7 @@ line-height: var(--ams-paragraph-line-height); @include text-rendering; - @include reset; + @include reset-p; } .ams-paragraph--small { diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss index ae2db8daa0..e55c0a6bd7 100644 --- a/packages/css/src/components/password-input/password-input.scss +++ b/packages/css/src/components/password-input/password-input.scss @@ -5,18 +5,18 @@ @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; margin-block: 0; } .ams-password-input { background-color: var(--ams-password-input-background-color); box-shadow: var(--ams-password-input-box-shadow); + box-sizing: border-box; color: var(--ams-password-input-color); font-family: var(--ams-password-input-font-family); font-size: var(--ams-password-input-font-size); @@ -29,7 +29,7 @@ touch-action: manipulation; @include text-rendering; - @include reset; + @include reset-input; &:hover { box-shadow: var(--ams-password-input-hover-box-shadow); diff --git a/packages/css/src/components/screen/screen.scss b/packages/css/src/components/screen/screen.scss index b4e9cea6a7..0c4e2e9de4 100644 --- a/packages/css/src/components/screen/screen.scss +++ b/packages/css/src/components/screen/screen.scss @@ -3,16 +3,11 @@ * Copyright Gemeente Amsterdam */ -@mixin reset { - box-sizing: border-box; -} - .ams-screen { background-color: var(--ams-screen-background-color); + box-sizing: border-box; margin-inline: auto; position: relative; - - @include reset; } .ams-screen--full-height { diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 76ac9a79b1..1390643263 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -15,13 +15,13 @@ appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; margin-block: 0; } .ams-search-field__input { background-color: var(--ams-search-field-input-background-color); box-shadow: var(--ams-search-field-input-box-shadow); + box-sizing: border-box; color: var(--ams-search-field-input-color); font-family: var(--ams-search-field-input-font-family); font-size: var(--ams-search-field-input-font-size); diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss index abcf8bc021..b64d653a8f 100644 --- a/packages/css/src/components/select/select.scss +++ b/packages/css/src/components/select/select.scss @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -@mixin reset { +@mixin reset-select { appearance: none; // Reset native appearance to hide default chevron border: 0; border-radius: 0; // Reset rounded borders for Safari on MacOS @@ -23,7 +23,7 @@ padding-inline: var(--ams-select-padding-inline); touch-action: manipulation; - @include reset; + @include reset-select; &:not([multiple]) { background-image: var(--ams-select-background-image); diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss index d86fcd8001..827b1efdfb 100644 --- a/packages/css/src/components/switch/switch.scss +++ b/packages/css/src/components/switch/switch.scss @@ -6,10 +6,6 @@ @import "../../common/input-label-focus"; @import "../../common/hide-input"; -@mixin reset { - box-sizing: border-box; -} - .ams-switch__input { @include hide-input; @include input-label-focus; @@ -23,13 +19,12 @@ // Using a transparent border to make sure the component is visible in forced colors mode. border: var(--ams-switch-track-border-width) solid transparent; border-radius: calc(var(--ams-switch-thumb-inline-size) * 2); + box-sizing: border-box; cursor: pointer; display: inline-block; inline-size: var(--ams-switch-inline-size); outline-offset: var(--ams-switch-outline-offset); transition: background-color 0.2s ease-in-out; - - @include reset; } .ams-switch__label::before { diff --git a/packages/css/src/components/table-of-contents/table-of-contents.scss b/packages/css/src/components/table-of-contents/table-of-contents.scss index 3875892f9a..b312071d3c 100644 --- a/packages/css/src/components/table-of-contents/table-of-contents.scss +++ b/packages/css/src/components/table-of-contents/table-of-contents.scss @@ -5,8 +5,7 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-ul { margin-block: 0; padding-inline: 0; } @@ -22,13 +21,14 @@ } .ams-table-of-contents__list { + box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ams-table-of-contents-list-gap); list-style: none; @include text-rendering; - @include reset; + @include reset-ul; .ams-table-of-contents__list { padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start); diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss index bf00f316d5..e759ffa9e6 100644 --- a/packages/css/src/components/text-area/text-area.scss +++ b/packages/css/src/components/text-area/text-area.scss @@ -5,18 +5,18 @@ @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-textarea { -webkit-appearance: none; // Reset appearance for Safari < 15.4 appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; margin-block: 0; } .ams-text-area { background-color: var(--ams-text-area-background-color); box-shadow: var(--ams-text-area-box-shadow); + box-sizing: border-box; color: var(--ams-text-area-color); font-family: var(--ams-text-area-font-family); font-size: var(--ams-text-area-font-size); @@ -31,7 +31,7 @@ touch-action: manipulation; @include text-rendering; - @include reset; + @include reset-textarea; &:hover { box-shadow: var(--ams-text-area-hover-box-shadow); diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index 909f4f2160..0fe3ca8ed9 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -5,18 +5,18 @@ @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; margin-block: 0; } .ams-text-input { background-color: var(--ams-text-input-background-color); box-shadow: var(--ams-text-input-box-shadow); + box-sizing: border-box; color: var(--ams-text-input-color); font-family: var(--ams-text-input-font-family); font-size: var(--ams-text-input-font-size); @@ -29,7 +29,7 @@ touch-action: manipulation; @include text-rendering; - @include reset; + @include reset-input; &:hover { box-shadow: var(--ams-text-input-hover-box-shadow); diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss index 48144c8b90..1706ef0130 100644 --- a/packages/css/src/components/time-input/time-input.scss +++ b/packages/css/src/components/time-input/time-input.scss @@ -5,12 +5,11 @@ @import "../../common/text-rendering"; -@mixin reset { +@mixin reset-input { -webkit-appearance: none; // Reset appearance for Safari < 15.4 appearance: none; // Reset native appearance, this causes issues on iOS and Android devices border: 0; border-radius: 0; // Reset rounded borders on iOS devices - box-sizing: border-box; inline-size: auto; // Reset inline size of 10em set by Android devices margin-block: 0; } @@ -18,6 +17,7 @@ .ams-time-input { background-color: var(--ams-time-input-background-color); box-shadow: var(--ams-time-input-box-shadow); + box-sizing: border-box; color: var(--ams-time-input-color); font-family: var(--ams-time-input-font-family); font-size: var(--ams-time-input-font-size); @@ -37,7 +37,7 @@ touch-action: manipulation; @include text-rendering; - @include reset; + @include reset-input; &:hover { box-shadow: var(--ams-time-input-hover-box-shadow); diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 24a7ddc23d..b1418d6215 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -15,11 +15,8 @@ text-decoration: none; } -@mixin reset { - box-sizing: border-box; -} - .ams-top-task-link__label { + box-sizing: border-box; color: var(--ams-top-task-link-label-color); font-family: var(--ams-top-task-link-label-font-family); font-size: var(--ams-top-task-link-label-font-size); @@ -31,7 +28,6 @@ @include hyphenation; @include text-rendering; - @include reset; } .ams-top-task-link:hover .ams-top-task-link__label { @@ -40,11 +36,10 @@ } .ams-top-task-link__description { + box-sizing: border-box; color: var(--ams-top-task-link-description-color); font-family: var(--ams-top-task-link-description-font-family); font-size: var(--ams-top-task-link-description-font-size); font-weight: var(--ams-top-task-link-description-font-weight); line-height: var(--ams-top-task-link-description-line-height); - - @include reset; } diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 460cbea8ce..d602dda30f 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -5,19 +5,19 @@ @import "../../common/text-rendering"; -@mixin reset { - box-sizing: border-box; +@mixin reset-ul { list-style: none; margin-block: 0; padding-inline-start: 0; } .ams-unordered-list { + box-sizing: border-box; display: grid; gap: var(--ams-unordered-list-gap); @include text-rendering; - @include reset; + @include reset-ul; } .ams-unordered-list:not(.ams-unordered-list--no-markers) {