fix(icon): update to include rtl styles #656

- adds the ability to run npm start and launch the icon component locally - adds a test for viewing the icon component locally - updates the component css to include rtl styles - updates contributing to include steps for this references ionic-team/ionic-framework#17012
ionic-team · Jan 18, 2019 · 5c1c6e1 · 5c1c6e1
1 parent 12ccf40
commit 5c1c6e1
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 119 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -35,16 +35,27 @@ Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for informati
 3. Clone your fork.
 4. Create a new branch from master for your change.
 5. Run `npm install` from the root directory to install dependencies for this package.
-6. Run `npm run dev` from the root directory to start a local version of the ionicons site.
+6. [Modify the Icon Component](#modifying-components) if desired.
+7. Or, modify and [preview the site](#preview-site).
 
 
-<!-- #### Modifying Components
+#### Modifying Components
 
-TODO
+1. Navigate to the `src/components/` directory and open the `icon` component to modify.
+2. Make any changes to the icon component and then [preview-changes](#preview-component-changes).
 
-#### Preview Changes
 
-TODO -->
+#### Preview Component Changes
+
+1. Run `npm start` from the root directory to start a local version of the icon test.
+2. In the browser, navigate to `/src/components` to view the example test.
+3. Modify this test as needed in the `src/components.index.html` file.
+
+#### Preview Site
+
+1. Run `npm run dev` from the root directory to start a local version of the ionicons site.
+2. A browser will open with a local version of the ionicons docs.
+
 
 #### Lint Changes
 

diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ node_modules/
 tmp/
 dist/
 .DS_Store
+
+www/
diff --git a/package.json b/package.json
@@ -19,16 +19,19 @@
     "build.icon": "stencil build",
     "clean": "node scripts/clean.js",
     "copy.tasks": "node scripts/copy-tasks.js",
-    "dev": "stencil build --dev --watch --serve --config src/docs/stencil.config.ts",
+    "dev": "npm run start.docs",
     "mode.comparison": "node scripts/mode-comparison.js",
     "generate": "python scripts/generate.py",
     "lint.ts": "tslint --project .",
     "lint.ts.fix": "tslint --project . --fix",
+    "start": "npm run start.icon",
+    "start.docs": "stencil build --dev --watch --serve --config src/docs/stencil.config.ts",
+    "start.icon": "stencil build --dev --watch --serve",
     "release": "np --any-branch --yolo",
     "test": "stencil test --spec"
   },
   "devDependencies": {
-    "@stencil/core": "0.16.1",
+    "@stencil/core": "0.16.4",
     "@stencil/router": "0.3.1",
     "@stencil/sass": "0.1.1",
     "@types/highlight.js": "^9.12.3",

diff --git a/src/components/components.d.ts b/src/components/components.d.ts
@@ -22,6 +22,10 @@ export namespace Components {
     */
     'color'?: string;
     /**
+    * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+    */
+    'flipRtl'?: boolean;
+    /**
     * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
     */
     'icon'?: string;
@@ -64,6 +68,10 @@ export namespace Components {
     */
     'color'?: string;
     /**
+    * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+    */
+    'flipRtl'?: boolean;
+    /**
     * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
     */
     'icon'?: string;

diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -9,10 +9,31 @@
   box-sizing: content-box !important;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-base) !important;
+.icon-inner,
+svg {
+  display: block;
+
+  fill: currentColor;
+  stroke: currentColor;
+
+  height: 100%;
+  width: 100%;
 }
 
+
+/* Icon RTL
+ * -----------------------------------------------------------
+ */
+
+:host(.flip-rtl) .icon-inner {
+  transform: scaleX(-1);
+}
+
+
+/* Icon Sizes
+ * -----------------------------------------------------------
+ */
+
 :host(.icon-small) {
   font-size: 18px !important;
 }
@@ -21,20 +42,15 @@
   font-size: 32px !important;
 }
 
-.icon-inner,
-svg {
-  display: block;
 
-  fill: currentColor;
-  stroke: currentColor;
+/* Icon Colors
+ * -----------------------------------------------------------
+ */
 
-  height: 100%;
-  width: 100%;
+:host(.ion-color) {
+  color: var(--ion-color-base) !important;
 }
 
-/* Set iOS Icon Colors */
-/* ------------------- */
-
 :host(.ion-color-primary) {
   --ion-color-base: var(--ion-color-primary, #3880ff);
 }

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -46,6 +46,11 @@ export class Icon {
    */
   @Prop() md?: string;
 
+  /**
+   * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+   */
+  @Prop() flipRtl?: boolean;
+
   /**
    * Specifies which icon to use from the built-in set of icons.
    */
@@ -171,12 +176,16 @@ export class Icon {
     return `${this.resourcesUrl}svg/${name}.svg`;
   }
 
+
   hostData() {
+    const flipRtl = this.flipRtl || (this.ariaLabel && this.ariaLabel.indexOf('arrow') > -1 && this.flipRtl !== false);
+
     return {
       'role': 'img',
       class: {
         ...createColorClasses(this.color),
         [`icon-${this.size}`]: !!this.size,
+        'flip-rtl': flipRtl && hostContext('[dir=rtl]', this.el)
       }
     };
   }
@@ -265,3 +274,7 @@ function createColorClasses(color: string | undefined) {
     [`ion-color-${color}`]: true
   } : null;
 }
+
+function hostContext(selector: string, el: HTMLElement): boolean {
+  return el.closest(selector) !== null;
+}
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
@@ -7,106 +7,19 @@
 
 ## Properties
 
-#### ariaLabel
-
-string
-
-Specifies the label to use for accessibility. Defaults to the icon name.
-
-
-#### color
-
-string
-
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
-
-
-#### icon
-
-string
-
-A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
-
-
-#### ios
-
-string
-
-Specifies which icon to use on `ios` mode.
-
-
-#### md
-
-string
-
-Specifies which icon to use on `md` mode.
-
-
-#### name
-
-string
-
-Specifies which icon to use. The appropriate icon will be used based on the mode.
-For more information, see [Ionicons](/docs/ionicons/).
-
-
-#### size
-
-string
-
-The size of the icon.
-Available options are: `"small"` and `"large"`.
-
-
-## Attributes
-
-#### aria-label
-
-string
-
-Specifies the label to use for accessibility. Defaults to the icon name.
-
-
-#### color
-
-string
-
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
-
-
-#### ios
-
-string
-
-Specifies which icon to use on `ios` mode.
-
-
-#### md
-
-string
-
-Specifies which icon to use on `md` mode.
-
-
-#### name
-
-string
-
-Specifies which icon to use. The appropriate icon will be used based on the mode.
-For more information, see [Ionicons](/docs/ionicons/).
-
-
-#### size
-
-string
-
-The size of the icon.
-Available options are: `"small"` and `"large"`.
-
+| Property    | Attribute    | Description                                                                                                                                                                    | Type                         | Default     |
+| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name.                                                                                                       | `string \| undefined`        | `undefined` |
+| `color`     | `color`      | The color to use for the background of the item.                                                                                                                               | `string \| undefined`        | `undefined` |
+| `flipRtl`   | `flip-rtl`   | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.                                                                                                     | `boolean \| undefined`       | `undefined` |
+| `icon`      | `icon`       | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `string \| undefined`        | `undefined` |
+| `ios`       | `ios`        | Specifies which icon to use on `ios` mode.                                                                                                                                     | `string \| undefined`        | `undefined` |
+| `lazy`      | `lazy`       | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`.                                                                                | `boolean`                    | `false`     |
+| `md`        | `md`         | Specifies which icon to use on `md` mode.                                                                                                                                      | `string \| undefined`        | `undefined` |
+| `mode`      | `mode`       | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                      | `"ios" \| "md" \| undefined` | `undefined` |
+| `name`      | `name`       | Specifies which icon to use from the built-in set of icons.                                                                                                                    | `string \| undefined`        | `undefined` |
+| `size`      | `size`       | The size of the icon. Available options are: `"small"` and `"large"`.                                                                                                          | `string \| undefined`        | `undefined` |
+| `src`       | `src`        | Specifies the exact `src` of an SVG file to use.                                                                                                                               | `string \| undefined`        | `undefined` |
 
 
 ----------------------------------------------