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.

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

fix: remove underlines from breadcrumbs #1451

Merged
merged 1 commit into from
Oct 11, 2024
Merged

fix: remove underlines from breadcrumbs #1451

merged 1 commit into from
Oct 11, 2024

Conversation

haideralsh
Copy link
Contributor

@haideralsh haideralsh commented Oct 10, 2024

Description

Other changes:

  • Change non-links to midGrey
  • Change large components to not have left or right padding

Fixes #1382

Changes include

  • breaking change: a change that is not backwards-compatible and/or changes current functionality
  • fix: a non-breaking change that solves an issue
  • feature: a non-breaking change that adds functionality
  • chore: contains no changes affecting the library, such as documentation or test updates

Feature checklist

  • Appropriate tests have been added
  • Documentation has been updated
  • Accessibility has been considered

* changes non-links to midGrey
@haideralsh haideralsh merged commit 6a68084 into master Oct 11, 2024
4 checks passed
@haideralsh haideralsh deleted the fix-1382 branch October 11, 2024 15:26
github-actions bot pushed a commit that referenced this pull request Oct 11, 2024
## [10.2.14](v10.2.13...v10.2.14) (2024-10-11)

### Bug Fixes

* do not shrink the toggle when put in a small container ([#1450](#1450)) ([6b3b63f](6b3b63f))
* remove underlines from breadcrumbs ([#1451](#1451)) ([6a68084](6a68084))
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>
  )
}
```
Copy link

github-actions bot commented Nov 7, 2024

🎉 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))
Copy link

🎉 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Removing underline from default breadcrumb links
1 participant