Skip to content

Improve readability of markdown tables by wrapping on words #8123

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

Jump to bottom
Merged
merged 1 commit into from
Jan 25, 2023
Merged

Improve readability of markdown tables by wrapping on words #8123

merged 1 commit into from
Jan 25, 2023

Conversation

@marlowpayne
Copy link
Contributor

@marlowpayne marlowpayne commented Jan 21, 2023 •
edited
Loading

WHY are these changes introduced?

Markdown table entries were wrapping in a gross and unreadable way due to overflow-wrap: anywhere; from Frame.

See Before and After below: 👇

Before:

word-wrap-before

After:

word-wrap-after

WHAT is this pull request doing?

These simple changes:

  1. Introduce a word-wrapping overflow-wrap: normal; to markdown tables to improve readability by not breaking in the middle of words
  2. Fix the max width of table wrappers to match the design of 1.25rem for Page padding

How to 🎩

🎩 link to spinstance: https://polaris.word-wrap.marlow-payne.us.spin.dev/

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@marlowpayne marlowpayne force-pushed the marlow/word-wrap branch 2 times, most recently from bfbe395 to 37d4fb5 Compare January 24, 2023 17:28
@marlowpayne marlowpayne marked this pull request as ready for review January 24, 2023 17:58
Rmnlly
Rmnlly reviewed Jan 24, 2023
View reviewed changes
Copy link
Contributor

@Rmnlly Rmnlly left a comment

Choose a reason for hiding this comment

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

My only concern is that on mobile the table scrolls now, are we sure thats okay?

kushp
kushp approved these changes Jan 24, 2023
View reviewed changes
Copy link

@kushp kushp left a comment

Choose a reason for hiding this comment

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

code + 🎩 LGTM, nice one 👏

@kushp
Copy link

kushp commented Jan 24, 2023

My only concern is that on mobile the table scrolls now, are we sure thats okay?

Ah I didn't notice this! Good eye

@marlowpayne
Copy link
Contributor Author

marlowpayne commented Jan 24, 2023

My only concern is that on mobile the table scrolls now, are we sure thats okay?

Ya same. I'll defer to @martenbjork and others more familiar with Polaris docs. 🙏

henryyi
henryyi approved these changes Jan 25, 2023
View reviewed changes
Copy link
Contributor

@henryyi henryyi left a comment

Choose a reason for hiding this comment

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

LGTM!

@marlowpayne marlowpayne merged commit 3bb6c03 into main Jan 25, 2023
@marlowpayne marlowpayne deleted the marlow/word-wrap branch January 25, 2023 16:38
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Jan 25, 2023
Merged
yurm04 pushed a commit that referenced this pull request Jan 26, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8147)
5597775 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@6.10.0

### Minor Changes

- [#8150](#8150)
[`a0c6e467b`](a0c6e46)
Thanks [@leileu](https://github.com/leileu)! - Adding two metaobject
icons: Metaobject and Metaobject Reference.

### Patch Changes

- [#8148](#8148)
[`0ca0b7899`](0ca0b78)
Thanks [@zecarlostorre](https://github.com/zecarlostorre)! - Updated
clipboard icon

## @shopify/polaris@10.24.0

### Minor Changes

- [#8083](#8083)
[`18991daf1`](18991da)
Thanks [@krithikajanakiraman](https://github.com/krithikajanakiraman)! -
Adding an oprtional headerContent prop to ResourceList


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ActionList` to
use layout primitives


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored
`SkeletonPage` to use primitive Layout components
    Removed `max-width` on children in `AlphaStack`
    Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories

### Patch Changes

- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Updated `SkeletonPage`
title and body layout


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored
`SkeletonPage` title layout


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed `ResourceList`
header alignment


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ResourceItem`
with layout components


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed IndexTable
checkbox alignment


- [#8099](#8099)
[`a3605c855`](a3605c8)
Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed
`BulkActions` causing `IndexTable` & `ResourceList` to ignore pointer
events

- Updated dependencies
\[[`a0c6e467b`](a0c6e46),
[`0ca0b7899`](0ca0b78)]:
    -   @shopify/polaris-icons@6.10.0

## @shopify/plugin-polaris@0.0.31

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.11.2

## @shopify/polaris-migrator@0.11.2

### Patch Changes

- Updated dependencies
\[[`07669075a`](0766907),
[`74a75a473`](74a75a4),
[`f8f9eecd5`](f8f9eec)]:
    -   @shopify/stylelint-polaris@5.1.2

## @shopify/stylelint-polaris@5.1.2

### Patch Changes

- [#8167](#8167)
[`07669075a`](0766907)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! -
Temporarily disable layout category


- [#8162](#8162)
[`74a75a473`](74a75a4)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Allow
SCSS namespaces with Polaris breakpoints


- [#8168](#8168)
[`f8f9eecd5`](f8f9eec)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Ignored
needless disables for layout category and added meta URL to error
message

## polaris.shopify.com@0.30.1

### Patch Changes

- [#8123](#8123)
[`3bb6c03d3`](3bb6c03)
Thanks [@marlowpayne](https://github.com/marlowpayne)! - Improve
readability of markdown tables by wrapping on words


- [#8045](#8045)
[`b3ee45c47`](b3ee45c)
Thanks [@sarahill](https://github.com/sarahill)! - Added component
lifecycle page to polaris.shopify.com


- [#7821](#7821)
[`a0941743a`](a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ActionList` to
use layout primitives

- Updated dependencies
\[[`a0941743a`](a094174),
[`18991daf1`](18991da),
[`a0941743a`](a094174),
[`a0941743a`](a094174),
[`a0941743a`](a094174),
[`a0941743a`](a094174),
[`a0941743a`](a094174),
[`a0941743a`](a094174),
[`a0c6e467b`](a0c6e46),
[`a3605c855`](a3605c8),
[`0ca0b7899`](0ca0b78)]:
    -   @shopify/polaris@10.24.0
    -   @shopify/polaris-icons@6.10.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@gwyneplaine gwyneplaine mentioned this pull request Feb 14, 2023
Merged
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@marlowpayne @juzser
Improve readability of markdown tables by wrapping on words (Shopify#…
3c17f15 
…8123)

### WHY are these changes introduced?

Markdown table entries were wrapping in a gross and unreadable way due
to `overflow-wrap: anywhere;` from `Frame`.

### WHAT is this pull request doing?

These simple changes:
1. Introduce a word-wrapping `overflow-wrap: normal;` to markdown tables
to improve readability by not breaking in the middle of words
2. Fix the max width of table wrappers to match the design of `1.25rem`
for Page padding
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8147)
2173048 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@6.10.0

### Minor Changes

- [Shopify#8150](Shopify#8150)
[`a0c6e467b`](Shopify@a0c6e46)
Thanks [@leileu](https://github.com/leileu)! - Adding two metaobject
icons: Metaobject and Metaobject Reference.

### Patch Changes

- [Shopify#8148](Shopify#8148)
[`0ca0b7899`](Shopify@0ca0b78)
Thanks [@zecarlostorre](https://github.com/zecarlostorre)! - Updated
clipboard icon

## @shopify/polaris@10.24.0

### Minor Changes

- [Shopify#8083](Shopify#8083)
[`18991daf1`](Shopify@18991da)
Thanks [@krithikajanakiraman](https://github.com/krithikajanakiraman)! -
Adding an oprtional headerContent prop to ResourceList


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ActionList` to
use layout primitives


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored
`SkeletonPage` to use primitive Layout components
    Removed `max-width` on children in `AlphaStack`
    Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories

### Patch Changes

- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Updated `SkeletonPage`
title and body layout


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored
`SkeletonPage` title layout


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed `ResourceList`
header alignment


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ResourceItem`
with layout components


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed IndexTable
checkbox alignment


- [Shopify#8099](Shopify#8099)
[`a3605c855`](Shopify@a3605c8)
Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed
`BulkActions` causing `IndexTable` & `ResourceList` to ignore pointer
events

- Updated dependencies
\[[`a0c6e467b`](Shopify@a0c6e46),
[`0ca0b7899`](Shopify@0ca0b78)]:
    -   @shopify/polaris-icons@6.10.0

## @shopify/plugin-polaris@0.0.31

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.11.2

## @shopify/polaris-migrator@0.11.2

### Patch Changes

- Updated dependencies
\[[`07669075a`](Shopify@0766907),
[`74a75a473`](Shopify@74a75a4),
[`f8f9eecd5`](Shopify@f8f9eec)]:
    -   @shopify/stylelint-polaris@5.1.2

## @shopify/stylelint-polaris@5.1.2

### Patch Changes

- [Shopify#8167](Shopify#8167)
[`07669075a`](Shopify@0766907)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! -
Temporarily disable layout category


- [Shopify#8162](Shopify#8162)
[`74a75a473`](Shopify@74a75a4)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Allow
SCSS namespaces with Polaris breakpoints


- [Shopify#8168](Shopify#8168)
[`f8f9eecd5`](Shopify@f8f9eec)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Ignored
needless disables for layout category and added meta URL to error
message

## polaris.shopify.com@0.30.1

### Patch Changes

- [Shopify#8123](Shopify#8123)
[`3bb6c03d3`](Shopify@3bb6c03)
Thanks [@marlowpayne](https://github.com/marlowpayne)! - Improve
readability of markdown tables by wrapping on words


- [Shopify#8045](Shopify#8045)
[`b3ee45c47`](Shopify@b3ee45c)
Thanks [@sarahill](https://github.com/sarahill)! - Added component
lifecycle page to polaris.shopify.com


- [Shopify#7821](Shopify#7821)
[`a0941743a`](Shopify@a094174)
Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt `ActionList` to
use layout primitives

- Updated dependencies
\[[`a0941743a`](Shopify@a094174),
[`18991daf1`](Shopify@18991da),
[`a0941743a`](Shopify@a094174),
[`a0941743a`](Shopify@a094174),
[`a0941743a`](Shopify@a094174),
[`a0941743a`](Shopify@a094174),
[`a0941743a`](Shopify@a094174),
[`a0941743a`](Shopify@a094174),
[`a0c6e467b`](Shopify@a0c6e46),
[`a3605c855`](Shopify@a3605c8),
[`0ca0b7899`](Shopify@0ca0b78)]:
    -   @shopify/polaris@10.24.0
    -   @shopify/polaris-icons@6.10.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Rmnlly Rmnlly Rmnlly left review comments

@henryyi henryyi henryyi approved these changes

@kushp kushp kushp approved these changes

@martenbjork martenbjork Awaiting requested review from martenbjork

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@marlowpayne @kushp @henryyi @Rmnlly