Skip to content

Add previews for CupertinoIcons - #71853

Merged
fluttergithubbot merged 9 commits into
flutter:masterfrom
guidezpl:icons-updates
Dec 8, 2020
Merged

fluttergithubbot merged 9 commits into
flutter:masterfrom
guidezpl:icons-updates

Conversation

@guidezpl

@guidezpl guidezpl commented Dec 7, 2020 •

Copy link
Copy Markdown
Member

Description

Add icon previews for CupertinoIcons in the API docs like material Icons have. Do so by introducing a new .css asset.

Before: https://api.flutter.dev/flutter/cupertino/CupertinoIcons-class.html
After:
Screenshot 2020-12-07 at 18 40 34

Also

  • Update top-level documentation to feature 1.0.0 icon gallery more prominently

Screenshot 2020-12-07 at 18 41 24

  • Update link to material icons

Related Issues

Closes #45097

Tests

No tests, documentation only.

Checklist

Before you create this PR, confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I signed the CLA.
  • I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I updated/added relevant documentation (doc comments with ///).
  • All existing and new tests are passing.
  • The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
  • I am willing to follow-up on review comments in a timely manner.

Breaking Change

Did any tests fail when you ran them? Please read Handling breaking changes.

  • No, no existing tests failed, so this is not a breaking change.
  • Yes, this is a breaking change. If not, delete the remainder of this section.

@flutter-dashboard flutter-dashboard Bot added p: cupertino_ui cupertino_ui package in flutter/packages p: material_ui material_ui package in flutter/packages framework flutter/packages/flutter repository. See also f: labels. c: contributor-productivity Team-specific productivity, code health, technical debt. labels Dec 7, 2020
@flutter-dashboard

Copy link
Copy Markdown

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@google-cla google-cla Bot added the cla: yes label Dec 7, 2020
Comment thread packages/flutter/lib/src/cupertino/icons.dart
@@ -21,11 +21,11 @@ import 'package:flutter/widgets.dart';
/// cupertino_icons: ^1.0.0

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

To reviewer(s), everything after line 1077 is automatically generated and does not require review

@guidezpl
guidezpl requested a review from xster December 7, 2020 17:49
Comment thread dev/docs/assets/overrides.css
Comment thread dev/docs/assets/cupertino-icons.css Outdated
Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
/// This is the same icon as [battery_100], [battery_charging] and [battery_75_percent] in cupertino_icons 1.0.0+.
static const IconData battery_full = IconData(0xf113, fontFamily: iconFont, fontPackage: iconFontPackage);

/// A 75% charged battery.
/// <i class='cupertino-icons md-36'>battery_100</i> &#x2014; cupertino icon for a 75% charged battery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Should this be battery_75?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

There is no battery_75 in the new icon font

@guidezpl guidezpl Dec 7, 2020 •

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I'll double check for all your comments, but same thing. The new icon font seems to have collapsed certain icons, so we use the new name for the icon

Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/icons.dart Outdated
Comment thread dev/docs/assets/cupertino-icons.css Outdated
font-family: 'Cupertino Icons';
font-style: normal;
font-weight: 400;
src: url("https://flutter.github.io/cupertino_icons/assets/CupertinoIcons.ttf") format("truetype");

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

should this be a local file?

i.e. when we push cupertino_icons: 2.0.0 and the user's pubspec has ^1.0.0, wouldn't this show the wrong preview?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

It looks like the relative link in https://flutter.github.io/cupertino_icons/css/icons.css works. Removed

@@ -47,15 +47,15 @@ class CupertinoIcons {
// We need to leave them as-is with the same codepoints for backward
// compatibility with cupertino_icons <0.1.3.

/// A thin left chevron.
/// <i class='cupertino-icons md-36'>chevron_left</i> &#x2014; Cupertino icon for a thin left chevron.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thanks for typing these in!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Picked up some regex skills to avoid doing this too manually!

@xster xster left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Thank you Pierre-Louis

@guidezpl

guidezpl commented Dec 8, 2020

Copy link
Copy Markdown
Member Author

@xster

xster commented Dec 8, 2020

Copy link
Copy Markdown
Member

That's awesome! Great work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

c: contributor-productivity Team-specific productivity, code health, technical debt. framework flutter/packages/flutter repository. See also f: labels. p: cupertino_ui cupertino_ui package in flutter/packages p: material_ui material_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add previews for CupertinoIcons in the API docs like material Icons have

5 participants