fix: make the icons and indicators in the select accessible #1462
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
haideralsh
force-pushed
the
fix/make-the-icons-and-indicators-in-the-select-accessible
branch
2 times, most recently
from
9a541ba
to
50e7197
Compare
haideralsh
force-pushed
the
fix/make-the-icons-and-indicators-in-the-select-accessible
branch
from
50e7197
to
1e5a7ac
Compare
haideralsh
deleted the
fix/make-the-icons-and-indicators-in-the-select-accessible
branch
github-actions bot
pushed a commit
that referenced
this pull request
Oct 16, 2024
## [10.2.14](v10.2.13...v10.2.14) (2024-10-16) ### Bug Fixes * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084))
github-actions bot
pushed a commit
that referenced
this pull request
Nov 7, 2024
# [11.0.0](v10.2.13...v11.0.0) (2024-11-07) ### Bug Fixes * correct the theme generator scale and types ([8741ce1](8741ce1)) * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * format theme after generating it ([039a996](039a996)) * issues with scaling up the theme ([88d09bb](88d09bb)) * lint issues ([6e7588f](6e7588f)) * lint issues ([48e5ac6](48e5ac6)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * preserve styled components composability ([baa07de](baa07de)) * prevent shrinking icon ([d499bd1](d499bd1)) * remove obsolete stories ([9dfe9ad](9dfe9ad)) * remove theme configuration panel ([4317987](4317987)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084)) * TypeScript parse error ([31259ba](31259ba)) * unexport the theme directly ([38dda4b](38dda4b)) * visual defects following theme change ([b7f5879](b7f5879)) * visual defects in the touch variant ([6504bc4](6504bc4)) ### Code Refactoring * removes old NavBar ([d8f3bf6](d8f3bf6)) ### Features * add a touch variant ([7532270](7532270)) * allow adding left and right icons to the input ([bfdfa88](bfdfa88)) * generate the theme based on a base unit ([414c19a](414c19a)) * refactor away from size to variant ([7fb639a](7fb639a)) * support tablet and phone media queries ([aa06d15](aa06d15)) * update theme ([e6ce943](e6ce943)) ### BREAKING CHANGES * removes the old unused NavBar component that was replaced with the BrandedNavBar * removes the `icon` and `iconSize` props from the input in-favor of `iconLeft`, `iconRight`, `iconRightSize`, `iconLeftSize` Migration: * Replace `icon` prop with `iconRight` * Replace `iconSize` prop with `iconRightSize` * changes NDSProvider `size` prop to `variant`. The `size` prop was originally used sparingly in some components like the Button and the Icon to resize those components. It was later extended to make all interactive components large enough to be used on a touch screen, through changing the `size` prop directly or by passing a `size` prop to the NDSProvider globally. With this change, we retain the use of the `size` prop for select components, and introduce a `variant` prop that can be passed either to individual components or the NDSProvider globally with the value of either `desktop` or `touch`. * theme can no longer be imported from "@nulogy/components" NDS is introducing context-specific default themes. Directly importing themes from NDS may result in using the wrong theme, causing conflicts between custom app themes, desktop, and touch variants. Instead of importing the theme from NDS like so: `import { theme } from "@nulogy/components"`, you can use and access the theme in one of the following ways: - Inside styled components ```tsx const Example = styled.div(({ theme }) => ({ marginLeft: theme.space.x3, marginBottom: theme.space.x1, color: theme.colors.darkBlue, })); ``` - Inside components: using styled props ```tsx function Component(props: Props) { return ( <Box ml="x3" mb="x1" color="darkBlue"> {props.children} </Box> ) } ``` - Inside components: using useTheme() ```tsx import { useTheme } from "styled-components" function getPaddingBasedOnSomeProp(foo, theme) { ... } function Component(props: Props) { const theme = useTheme() const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme) return ( <Box px={horizontalPadding}> {props.children} </Box> ) } ```
|
🎉 This PR is included in version 11.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
github-actions bot
pushed a commit
that referenced
this pull request
Nov 12, 2024
# [10.3.0](v10.2.13...v10.3.0) (2024-11-12) ### Bug Fixes * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084)) ### Features * add the ability to pass refs to Tooltips ([9183e97](9183e97))
|
🎉 This PR is included in version 10.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
haideralsh
pushed a commit
that referenced
this pull request
Nov 18, 2024
* correct the theme generator scale and types ([8741ce1](8741ce1)) * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * format theme after generating it ([039a996](039a996)) * issues with scaling up the theme ([88d09bb](88d09bb)) * lint issues ([6e7588f](6e7588f)) * lint issues ([48e5ac6](48e5ac6)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * preserve styled components composability ([baa07de](baa07de)) * prevent shrinking icon ([d499bd1](d499bd1)) * remove obsolete stories ([9dfe9ad](9dfe9ad)) * remove theme configuration panel ([4317987](4317987)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084)) * TypeScript parse error ([31259ba](31259ba)) * unexport the theme directly ([38dda4b](38dda4b)) * visual defects following theme change ([b7f5879](b7f5879)) * visual defects in the touch variant ([6504bc4](6504bc4)) * removes old NavBar ([d8f3bf6](d8f3bf6)) * add a touch variant ([7532270](7532270)) * allow adding left and right icons to the input ([bfdfa88](bfdfa88)) * generate the theme based on a base unit ([414c19a](414c19a)) * refactor away from size to variant ([7fb639a](7fb639a)) * support tablet and phone media queries ([aa06d15](aa06d15)) * update theme ([e6ce943](e6ce943)) * removes the old unused NavBar component that was replaced with the BrandedNavBar * removes the `icon` and `iconSize` props from the input in-favor of `iconLeft`, `iconRight`, `iconRightSize`, `iconLeftSize` Migration: * Replace `icon` prop with `iconRight` * Replace `iconSize` prop with `iconRightSize` * changes NDSProvider `size` prop to `variant`. The `size` prop was originally used sparingly in some components like the Button and the Icon to resize those components. It was later extended to make all interactive components large enough to be used on a touch screen, through changing the `size` prop directly or by passing a `size` prop to the NDSProvider globally. With this change, we retain the use of the `size` prop for select components, and introduce a `variant` prop that can be passed either to individual components or the NDSProvider globally with the value of either `desktop` or `touch`. * theme can no longer be imported from "@nulogy/components" NDS is introducing context-specific default themes. Directly importing themes from NDS may result in using the wrong theme, causing conflicts between custom app themes, desktop, and touch variants. Instead of importing the theme from NDS like so: `import { theme } from "@nulogy/components"`, you can use and access the theme in one of the following ways: - Inside styled components ```tsx const Example = styled.div(({ theme }) => ({ marginLeft: theme.space.x3, marginBottom: theme.space.x1, color: theme.colors.darkBlue, })); ``` - Inside components: using styled props ```tsx function Component(props: Props) { return ( <Box ml="x3" mb="x1" color="darkBlue"> {props.children} </Box> ) } ``` - Inside components: using useTheme() ```tsx import { useTheme } from "styled-components" function getPaddingBasedOnSomeProp(foo, theme) { ... } function Component(props: Props) { const theme = useTheme() const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme) return ( <Box px={horizontalPadding}> {props.children} </Box> ) } ```
haideralsh
pushed a commit
that referenced
this pull request
Nov 25, 2024
* correct the theme generator scale and types ([8741ce1](8741ce1)) * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * format theme after generating it ([039a996](039a996)) * issues with scaling up the theme ([88d09bb](88d09bb)) * lint issues ([6e7588f](6e7588f)) * lint issues ([48e5ac6](48e5ac6)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * preserve styled components composability ([baa07de](baa07de)) * prevent shrinking icon ([d499bd1](d499bd1)) * remove obsolete stories ([9dfe9ad](9dfe9ad)) * remove theme configuration panel ([4317987](4317987)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084)) * TypeScript parse error ([31259ba](31259ba)) * unexport the theme directly ([38dda4b](38dda4b)) * visual defects following theme change ([b7f5879](b7f5879)) * visual defects in the touch variant ([6504bc4](6504bc4)) * removes old NavBar ([d8f3bf6](d8f3bf6)) * add a touch variant ([7532270](7532270)) * allow adding left and right icons to the input ([bfdfa88](bfdfa88)) * generate the theme based on a base unit ([414c19a](414c19a)) * refactor away from size to variant ([7fb639a](7fb639a)) * support tablet and phone media queries ([aa06d15](aa06d15)) * update theme ([e6ce943](e6ce943)) * removes the old unused NavBar component that was replaced with the BrandedNavBar * removes the `icon` and `iconSize` props from the input in-favor of `iconLeft`, `iconRight`, `iconRightSize`, `iconLeftSize` Migration: * Replace `icon` prop with `iconRight` * Replace `iconSize` prop with `iconRightSize` * changes NDSProvider `size` prop to `variant`. The `size` prop was originally used sparingly in some components like the Button and the Icon to resize those components. It was later extended to make all interactive components large enough to be used on a touch screen, through changing the `size` prop directly or by passing a `size` prop to the NDSProvider globally. With this change, we retain the use of the `size` prop for select components, and introduce a `variant` prop that can be passed either to individual components or the NDSProvider globally with the value of either `desktop` or `touch`. * theme can no longer be imported from "@nulogy/components" NDS is introducing context-specific default themes. Directly importing themes from NDS may result in using the wrong theme, causing conflicts between custom app themes, desktop, and touch variants. Instead of importing the theme from NDS like so: `import { theme } from "@nulogy/components"`, you can use and access the theme in one of the following ways: - Inside styled components ```tsx const Example = styled.div(({ theme }) => ({ marginLeft: theme.space.x3, marginBottom: theme.space.x1, color: theme.colors.darkBlue, })); ``` - Inside components: using styled props ```tsx function Component(props: Props) { return ( <Box ml="x3" mb="x1" color="darkBlue"> {props.children} </Box> ) } ``` - Inside components: using useTheme() ```tsx import { useTheme } from "styled-components" function getPaddingBasedOnSomeProp(foo, theme) { ... } function Component(props: Props) { const theme = useTheme() const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme) return ( <Box px={horizontalPadding}> {props.children} </Box> ) } ```
haideralsh
pushed a commit
that referenced
this pull request
Nov 25, 2024
* correct the theme generator scale and types ([8741ce1](8741ce1)) * do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f)) * format theme after generating it ([039a996](039a996)) * issues with scaling up the theme ([88d09bb](88d09bb)) * lint issues ([6e7588f](6e7588f)) * lint issues ([48e5ac6](48e5ac6)) * make the icons and indicators in the select accessible ([#1462](#1462)) ([3b6d900](3b6d900)) * preserve styled components composability ([baa07de](baa07de)) * prevent shrinking icon ([d499bd1](d499bd1)) * remove obsolete stories ([9dfe9ad](9dfe9ad)) * remove theme configuration panel ([4317987](4317987)) * remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084)) * TypeScript parse error ([31259ba](31259ba)) * unexport the theme directly ([38dda4b](38dda4b)) * visual defects following theme change ([b7f5879](b7f5879)) * visual defects in the touch variant ([6504bc4](6504bc4)) * removes old NavBar ([d8f3bf6](d8f3bf6)) * add a touch variant ([7532270](7532270)) * allow adding left and right icons to the input ([bfdfa88](bfdfa88)) * generate the theme based on a base unit ([414c19a](414c19a)) * refactor away from size to variant ([7fb639a](7fb639a)) * support tablet and phone media queries ([aa06d15](aa06d15)) * update theme ([e6ce943](e6ce943)) * removes the old unused NavBar component that was replaced with the BrandedNavBar * removes the `icon` and `iconSize` props from the input in-favor of `iconLeft`, `iconRight`, `iconRightSize`, `iconLeftSize` Migration: * Replace `icon` prop with `iconRight` * Replace `iconSize` prop with `iconRightSize` * changes NDSProvider `size` prop to `variant`. The `size` prop was originally used sparingly in some components like the Button and the Icon to resize those components. It was later extended to make all interactive components large enough to be used on a touch screen, through changing the `size` prop directly or by passing a `size` prop to the NDSProvider globally. With this change, we retain the use of the `size` prop for select components, and introduce a `variant` prop that can be passed either to individual components or the NDSProvider globally with the value of either `desktop` or `touch`. * theme can no longer be imported from "@nulogy/components" NDS is introducing context-specific default themes. Directly importing themes from NDS may result in using the wrong theme, causing conflicts between custom app themes, desktop, and touch variants. Instead of importing the theme from NDS like so: `import { theme } from "@nulogy/components"`, you can use and access the theme in one of the following ways: - Inside styled components ```tsx const Example = styled.div(({ theme }) => ({ marginLeft: theme.space.x3, marginBottom: theme.space.x1, color: theme.colors.darkBlue, })); ``` - Inside components: using styled props ```tsx function Component(props: Props) { return ( <Box ml="x3" mb="x1" color="darkBlue"> {props.children} </Box> ) } ``` - Inside components: using useTheme() ```tsx import { useTheme } from "styled-components" function getPaddingBasedOnSomeProp(foo, theme) { ... } function Component(props: Props) { const theme = useTheme() const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme) return ( <Box px={horizontalPadding}> {props.children} </Box> ) } ```
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes: #1444
Changes include
Feature checklist