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

cleanup: remove deprecated underline attribute #5581

Merged
merged 5 commits into from
Jan 28, 2025
Merged

cleanup: remove deprecated underline attribute #5581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef9f485
Remove deprecated underline attribute
khiga8 Jan 21, 2025
8b8c9ae
Add data attribute
khiga8 Jan 28, 2025
c65126d
Add data attribute
khiga8 Jan 28, 2025
033ced5
Conditionally set attribute
khiga8 Jan 28, 2025
cb06c3b
Merge branch 'main' into kh-remove-deprecated-underline-attirbute
khiga8 Jan 28, 2025
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
11 changes: 9 additions & 2 deletions packages/react/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,6 @@ export const globalTypes = {
export const decorators = [
(Story, context) => {
const {colorScheme} = context.globals

useEffect(() => {
const colorMode = colorScheme.startsWith('light') ? 'light' : 'dark'
document.body.setAttribute('data-color-mode', colorMode)
Expand All @@ -271,6 +270,14 @@ export const decorators = [
document.body.setAttribute('data-dark-theme', darkTheme)
}, [colorScheme])

// Set data-a11y-link-underlines=true to enable underlines in all stories except the Link DevOnly Inline Story.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Link Devonly inline story has examples to show what impact this underline data attribute has.

Adding this conditional to avoid ending up with this markup on that particular story, because it results in all links being underlined.=:

<div data-a11y-link-underlines="true">
  ... 
  ...
  <div data-a11y-link-underlines="false">
     Learn more <Link href="#">about GitHub</Link>
  </div>

let wrapperProps =
context.id !== 'components-link-devonly--inline'
? {
'data-a11y-link-underlines': context.id !== 'components-link-devonly--inline',
className: clsx('story-wrap'),
}
: {className: clsx('story-wrap')}
const showSurroundingElements =
context.globals.showSurroundingElements ?? window.localStorage.getItem('showSurroundingElements') === 'true'
return context.globals.colorScheme === 'all' ? (
Expand All @@ -297,7 +304,7 @@ export const decorators = [
nightScheme={context.globals.colorScheme}
colorMode="day"
>
<div className={clsx('story-wrap')}>
<div {...wrapperProps}>
<BaseStyles>
{showSurroundingElements ? <a href="https://github.com/primer/react">Primer documentation</a> : ''}
<FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const hoverCard = (
<Stack direction="horizontal" gap="none">
<Text weight="medium">monalisa</Text>
<Text color={'var(--fgColor-muted)'} ml={1}>
<Link inline underline muted href="#">
<Link inline muted href="#">
Monalisa Octocat
</Link>
</Text>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const hoverCard = (
<Stack direction="horizontal" gap="none">
<Text weight="medium">monalisa</Text>
<Text color={'var(--fgColor-muted)'} ml={1}>
<Link inline underline muted href="#">
<Link inline muted href="#">
Monalisa Octocat
</Link>
</Text>
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/Banner/Banner.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const WithCustomHeading = () => {
<Banner.Title as="h3">Info</Banner.Title>
<Banner.Description>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -120,7 +120,7 @@ export const InSidebar = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand Down Expand Up @@ -157,7 +157,7 @@ export const DismissBanner = () => {
description: (
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand Down
24 changes: 12 additions & 12 deletions packages/react/src/Banner/Banner.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Critical = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -37,7 +37,7 @@ export const Info = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -56,7 +56,7 @@ export const Success = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -75,7 +75,7 @@ export const Upsell = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -94,7 +94,7 @@ export const Warning = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -113,7 +113,7 @@ export const Dismiss = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -131,7 +131,7 @@ export const DismissWithActions = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -152,7 +152,7 @@ export const WithHiddenTitle = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -171,7 +171,7 @@ export const WithHiddenTitleAndActions = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -192,7 +192,7 @@ export const DismissibleWithHiddenTitleAndActions = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -214,7 +214,7 @@ export const DismissibleWithHiddenTitleAndSecondaryAction = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand All @@ -234,7 +234,7 @@ export const WithActions = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/Banner/Banner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Default = () => {
description={
<>
GitHub users are{' '}
<Link inline underline href="#">
<Link inline href="#">
now required
</Link>{' '}
to enable two-factor authentication as an additional security measure.
Expand Down
Loading