Add formatting icons #9581

Rusty-UX · 2023-06-30T14:59:28Z

WHY are these changes introduced?

Adds support for missing icons:

Bold
Italic
Underline
Text Color
Ordered List
Indent
Outdent

Notes

Icons have been reviewed by design team
Icons have not been tested on polaris website or in admin yet

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

Adds support for bold, italic, indent, outdent, ordered list, text color, and underline - for usage across Shopify in rich text editors.

Rusty-UX · 2023-06-30T15:00:31Z

@kyledurand should be good to go, metadata should be correct, and icons are optimized.

FYI I haven't tophatted them on the polaris site, just got stuck in getting development set up. If you are able to test em out that'd be great.

kyledurand · 2023-06-30T15:39:34Z

@Rusty-UX

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@7.2.0 ### Minor Changes - [#9581](#9581) [`991d9fe69`](991d9fe) Thanks [@Rusty-UX](https://github.com/Rusty-UX)! - Added BoldMajor, BoldMinor, IndentMajor, IndentMinor, ItalicMajor, ItalicMinor, OrderedListMajor, OrderedListMinor, OutdentMajor, OutdentMinor, TextColorMajor, TextColorMinor, UnderlineMajor, UnderlineMinor icons - [#9580](#9580) [`75f08f32c`](75f08f3) Thanks [@kyledurand](https://github.com/kyledurand)! - Added optimize script ## @shopify/polaris@11.3.1 ### Patch Changes - [#9556](#9556) [`c72d2f905`](c72d2f9) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Restructured `Select` override selectors to patch Sass compilation issue - [#9031](#9031) [`795ae3782`](795ae37) Thanks [@danbrady](https://github.com/danbrady)! - Added support for `Avatar` being presentational - Updated dependencies \[[`991d9fe69`](991d9fe), [`75f08f32c`](75f08f3)]: - @shopify/polaris-icons@7.2.0 ## @shopify/polaris-cli@0.2.10 ## polaris.shopify.com@0.55.8 ### Patch Changes - Updated dependencies \[[`c72d2f905`](c72d2f9), [`795ae3782`](795ae37), [`991d9fe69`](991d9fe), [`75f08f32c`](75f08f3)]: - @shopify/polaris@11.3.1 - @shopify/polaris-icons@7.2.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

sophschneider · 2023-07-10T15:51:17Z

@Rusty-UX @kyledurand just doing the RTE icon mapping now and it looks like the table icon is the only once missing! I'll use AnalyticsTableMinor for now

### WHY are these changes introduced? Adds support for missing icons: * Bold * Italic * Underline * Text Color * Ordered List * Indent * Outdent <img width="962" alt="image" src="https://github.com/Shopify/polaris/assets/4304867/d0b8ea4d-83d5-4735-8f8c-92c703158baf"> ### Notes * Icons have been reviewed by design team * Icons have not been tested on polaris website or in admin yet ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: kyledurand <kyle.durand@shopify.com>

@Rusty-UX

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@7.2.0 ### Minor Changes - [Shopify#9581](Shopify#9581) [`991d9fe69`](Shopify@991d9fe) Thanks [@Rusty-UX](https://github.com/Rusty-UX)! - Added BoldMajor, BoldMinor, IndentMajor, IndentMinor, ItalicMajor, ItalicMinor, OrderedListMajor, OrderedListMinor, OutdentMajor, OutdentMinor, TextColorMajor, TextColorMinor, UnderlineMajor, UnderlineMinor icons - [Shopify#9580](Shopify#9580) [`75f08f32c`](Shopify@75f08f3) Thanks [@kyledurand](https://github.com/kyledurand)! - Added optimize script ## @shopify/polaris@11.3.1 ### Patch Changes - [Shopify#9556](Shopify#9556) [`c72d2f905`](Shopify@c72d2f9) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Restructured `Select` override selectors to patch Sass compilation issue - [Shopify#9031](Shopify#9031) [`795ae3782`](Shopify@795ae37) Thanks [@danbrady](https://github.com/danbrady)! - Added support for `Avatar` being presentational - Updated dependencies \[[`991d9fe69`](Shopify@991d9fe), [`75f08f32c`](Shopify@75f08f3)]: - @shopify/polaris-icons@7.2.0 ## @shopify/polaris-cli@0.2.10 ## polaris.shopify.com@0.55.8 ### Patch Changes - Updated dependencies \[[`c72d2f905`](Shopify@c72d2f9), [`795ae3782`](Shopify@795ae37), [`991d9fe69`](Shopify@991d9fe), [`75f08f32c`](Shopify@75f08f3)]: - @shopify/polaris@11.3.1 - @shopify/polaris-icons@7.2.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### WHY are these changes introduced? Adds support for missing icons: * Bold * Italic * Underline * Text Color * Ordered List * Indent * Outdent <img width="962" alt="image" src="https://github.com/Shopify/polaris/assets/4304867/d0b8ea4d-83d5-4735-8f8c-92c703158baf"> ### Notes * Icons have been reviewed by design team * Icons have not been tested on polaris website or in admin yet ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: kyledurand <kyle.durand@shopify.com>

@Rusty-UX

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@7.2.0 ### Minor Changes - [Shopify#9581](Shopify#9581) [`991d9fe69`](Shopify@a847d9c) Thanks [@Rusty-UX](https://github.com/Rusty-UX)! - Added BoldMajor, BoldMinor, IndentMajor, IndentMinor, ItalicMajor, ItalicMinor, OrderedListMajor, OrderedListMinor, OutdentMajor, OutdentMinor, TextColorMajor, TextColorMinor, UnderlineMajor, UnderlineMinor icons - [Shopify#9580](Shopify#9580) [`75f08f32c`](Shopify@01fb273) Thanks [@kyledurand](https://github.com/kyledurand)! - Added optimize script ## @shopify/polaris@11.3.1 ### Patch Changes - [Shopify#9556](Shopify#9556) [`c72d2f905`](Shopify@0c270b0) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Restructured `Select` override selectors to patch Sass compilation issue - [Shopify#9031](Shopify#9031) [`795ae3782`](Shopify@c68e956) Thanks [@danbrady](https://github.com/danbrady)! - Added support for `Avatar` being presentational - Updated dependencies \[[`991d9fe69`](Shopify@a847d9c), [`75f08f32c`](Shopify@01fb273)]: - @shopify/polaris-icons@7.2.0 ## @shopify/polaris-cli@0.2.10 ## polaris.shopify.com@0.55.8 ### Patch Changes - Updated dependencies \[[`c72d2f905`](Shopify@0c270b0), [`795ae3782`](Shopify@c68e956), [`991d9fe69`](Shopify@a847d9c), [`75f08f32c`](Shopify@01fb273)]: - @shopify/polaris@11.3.1 - @shopify/polaris-icons@7.2.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Rusty-UX added 3 commits June 30, 2023 10:44

Add support for formatting icons

4a15e6e

Adds support for bold, italic, indent, outdent, ordered list, text color, and underline - for usage across Shopify in rich text editors.

Optimize SVG

fecc9a3

Update dates / attribution

5072d87

Rusty-UX requested a review from kyledurand June 30, 2023 14:59

Rusty-UX assigned kyledurand Jun 30, 2023

pass tests, add changeset

c8303a8

kyledurand requested a review from heyjoethomas June 30, 2023 15:16

revert polaris embedded icons

e61b5f1

kyledurand force-pushed the formatting-icons branch from 71e8fd0 to e61b5f1 Compare June 30, 2023 15:19

kyledurand changed the title ~~Add support for formatting icons~~ Add formatting icons Jun 30, 2023

Add missing yamls

e6da450

kyledurand approved these changes Jun 30, 2023

View reviewed changes

kyledurand merged commit 991d9fe into main Jun 30, 2023

kyledurand deleted the formatting-icons branch June 30, 2023 15:53

shopify-github-actions-access bot mentioned this pull request Jun 30, 2023

Version Packages #9562

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add formatting icons #9581

Add formatting icons #9581

Uh oh!

Rusty-UX commented Jun 30, 2023

Uh oh!

Rusty-UX commented Jun 30, 2023 •

edited

Loading

Uh oh!

kyledurand commented Jun 30, 2023

Uh oh!

sophschneider commented Jul 10, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add formatting icons #9581

Add formatting icons #9581

Uh oh!

Conversation

Rusty-UX commented Jun 30, 2023

WHY are these changes introduced?

Notes

How to 🎩

🎩 checklist

Uh oh!

Rusty-UX commented Jun 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kyledurand commented Jun 30, 2023

Uh oh!

sophschneider commented Jul 10, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Rusty-UX commented Jun 30, 2023 •

edited

Loading