Merge branch 'master' of github.com:Esri/calcite-components into y0n4…

…/2848-checkbox-upgrade-svg

.github/need-info.yml

@@ -19,5 +19,7 @@ requiredItems:
       - "esri.github.io/calcite-components/?path=/story/components-"
       - "esri.github.io/calcite-components/iframe.html?"
       - "developers.arcgis.com/calcite-design-system/components/"
+      - "ember-twiddle.com/"
+      - "jsfiddle.net/"
 commentFooter: "This issue will be automatically closed in three days if the information is not provided. Thanks for your understanding."
 excludeComments: true

.husky/pre-push

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# from https://riptutorial.com/git/example/16164/pre-push
+
+protected_branch='master'
+current_branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')
+
+if [ $protected_branch = $current_branch ]
+then
+    read -p "You're about to push master, is that what you intended? [y|n] " -n 1 -r < /dev/tty
+    echo
+    if echo $REPLY | grep -E '^[Yy]$' > /dev/null
+    then
+        exit 0
+    fi
+    exit 1
+else
+    exit 0
+fi

.storybook/resources.ts

@@ -1,31 +1,37 @@
-import { Appearance, Position, Scale } from "../src/components/interfaces";
+import { Alignment, Appearance, Position, Scale } from "../src/components/interfaces";
 
 interface AttributeMetadata<T> {
   values: T[];
   defaultValue: T;
 }
 
 interface CommonAttributes {
+  alignment: AttributeMetadata<Alignment>;
+  appearance: AttributeMetadata<Appearance>;
   scale: AttributeMetadata<Scale>;
   position: AttributeMetadata<Position>;
-  appearance: AttributeMetadata<Appearance>;
 }
 
 const positionOptions: Position[] = ["start", "end"];
 const scaleOptions: Scale[] = ["s", "m", "l"];
+const alignmentOptions: Alignment[] = ["start", "center", "end"];
 const appearanceOptions: Appearance[] = ["solid", "clear", "outline"];
 
 export const ATTRIBUTES: CommonAttributes = {
-  scale: {
-    values: scaleOptions,
-    defaultValue: scaleOptions[1]
+  alignment: {
+    values: alignmentOptions,
+    defaultValue: alignmentOptions[0]
+  },
+  appearance: {
+    values: appearanceOptions,
+    defaultValue: appearanceOptions[0]
   },
   position: {
     values: positionOptions,
     defaultValue: positionOptions[0]
   },
-  appearance: {
-    values: appearanceOptions,
-    defaultValue: appearanceOptions[0]
+  scale: {
+    values: scaleOptions,
+    defaultValue: scaleOptions[1]
   }
 };

conventions/README.md

@@ -205,18 +205,18 @@ Calcite Components broadly targets two groups of projects inside Esri:
 - **Sites** like [esri.com](https://esri.com) and [developers.arcgis.com](https://developers.arcgis.com).
 - **Apps** like [ArcGIS Online](https://arcgis.com), [Vector Tile Style Editor](https://developers.arcgis.com/vector-tile-style-editor), [Workforce](https://www.esri.com/en-us/arcgis/products/workforce/overview), [ArcGIS Hub](https://hub.arcgis.com) etc...
 
-Components should present the the minimum possible implementation to be usable by both sites and apps and leave as much as possible to users.
+Components should present the minimum possible implementation to be usable by both sites and apps and leave as much as possible to users.
 
 It is generally agreed on that components should not:
 
-- Make network requests. Authentication and the exact environment of the request is difficult to mange and better left to the specific application or site.
-- Manage routing or manipulate the URL. managing the URL is the the domain and the specific site or app.
+- Make network requests. Authentication and the exact environment of the request is difficult to manage and better left to the specific application or site.
+- Manage routing or manipulate the URL. Managing the URL is the domain of the specific site or app.
 - Implement any feature which can easily be achieved with simple CSS and HTML. E.x. it was decided that `<calcite-switch>` should not support `text` or `position` properties because those could be easily duplicated with CSS ([ref](https://github.com/ArcGIS/calcite-components/pull/24#discussion_r289424140))
 - Implement any component which might replace a browser feature, without adding functionality that goes above and beyond what browser defaults would provide.
 
 However components are allowed to:
 
-- Use or implement `localStorage` if there is specific use case.
+- Use or implement `localStorage` if there is a specific use case.
 - Communicate with other components if a specific use case exists.
 
 **Discussed In**:
@@ -457,7 +457,7 @@ As a best practice we should follow [Ionic's configuration](https://github.com/i
 
 **Note:** This is highly likely to change as we move closer to our first release and as Stencil improves their documentation around their specific methods and build processes.
 
-Each root component should have a corresponding bundle entry in `stencil.config.ts`. It is important that the root component be listed first (the `util:add-build-extras:build-utils` NPM script depends on this).
+Each root component should have a corresponding bundle entry in `stencil.config.ts`.
 
 ## Unique IDs for Components
 

package.json

@@ -16,9 +16,9 @@
     "hydrate/"
   ],
   "scripts": {
-    "build": "npm run util:copy-icons && stencil build && npm run util:add-custom-elements-extras",
-    "build:watch": "npm run util:copy-icons && stencil build --watch && npm run util:add-custom-elements-extras:index-mjs",
-    "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch && npm run util:add-custom-elements-extras:index-mjs",
+    "build": "npm run util:copy-icons && stencil build",
+    "build:watch": "npm run util:copy-icons && stencil build --watch",
+    "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
     "deps:update": "updtr --exclude typescript tailwindcss @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
     "docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --static-dir ./__docs-temp__ --output-dir ./docs\"  \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
     "docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook --static-dir ./__docs-temp__\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
@@ -42,9 +42,6 @@
     "test:prerender": "stencil build --no-docs --prerender",
     "test:storybook": "concurrently --raw \"npm:util:build-docs && screener-storybook --conf screener.config.js\"",
     "test:watch": "npm run util:run-tests -- --watchAll",
-    "util:add-custom-elements-extras": "npm run util:add-custom-elements-extras:index-mjs && npm run util:add-custom-elements-extras:build-utils",
-    "util:add-custom-elements-extras:index-mjs": "cpy dist/custom-elements/index.js dist/custom-elements/ --rename index.mjs",
-    "util:add-custom-elements-extras:build-utils": "ts-node --project ./tsconfig-node-scripts.json ./support/output-targets/custom-elements/createBundles.ts  && tsc --project ./support/output-targets/custom-elements/tsconfig-dist-utils.json && rimraf ./support/output-targets/custom-elements/bundles",
     "util:build-docs": "npm run util:copy-icons && stencil build --config stencil.storybook.config.ts",
     "util:clean-tested-build": "npm ci && npm test && npm run build",
     "util:copy-icons": "cpy ./node_modules/@esri/calcite-ui-icons/js/*.json ./src/components/calcite-icon/assets/calcite-icon/",

src/assets/styles/_popper.scss

@@ -103,7 +103,7 @@ $popper-default-z-index: 900;
 }
 
 $pointer_size: 8px;
-$pointer_offset: -$pointer_size/2;
+$pointer_offset: -$pointer_size * 0.5;
 
 @mixin popperArrow {
   .arrow,

src/components/calcite-action-bar/calcite-action-bar.e2e.ts

@@ -135,22 +135,6 @@ describe("calcite-action-bar", () => {
       expect(textEnabled).toBe(true);
     });
 
-    describe("when el direction is 'rtl'", () => {
-      it("should render child action expand toggle with correct class", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html`
-          <calcite-action-bar dir="rtl">
-            <calcite-action text="Add" icon="plus"></calcite-action>
-          </calcite-action-bar>
-        `);
-        const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
-        const actionEl = await buttonGroup.find("calcite-action");
-        await actionEl.click();
-        const button = await actionEl.shadowRoot.querySelector("button");
-        expect(button).toHaveClass(CSS_UTILITY.rtl);
-      });
-    });
-
     it("should not have bottomGroup when not expandable", async () => {
       const page = await newE2EPage();
 

src/components/calcite-action-pad/calcite-action-pad.e2e.ts

@@ -117,22 +117,6 @@ describe("calcite-action-pad", () => {
     });
   });
 
-  describe("when el direction is 'rtl'", () => {
-    it("should render child action expand toggle with correct class", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`
-        <calcite-action-pad dir='rtl'>
-          <calcite-action text="Add" icon="plus"></calcite-action>
-        </calcite-action-pad>
-      `);
-      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-      const actionEl = await buttonGroup.find("calcite-action");
-      await actionEl.click();
-      const button = await actionEl.shadowRoot.querySelector("button");
-      expect(button).toHaveClass(CSS_UTILITY.rtl);
-    });
-  });
-
   it("should not have bottomGroup when not expandable", async () => {
     const page = await newE2EPage();
 

src/components/calcite-action/calcite-action.scss

@@ -69,7 +69,7 @@
     @apply font-normal p-2 text--2h;
   }
   .button--text-visible .icon-container {
-    @apply mr-2;
+    margin-inline-end: theme("spacing.2");
   }
 }
 
@@ -78,7 +78,7 @@
     @apply font-normal p-4 text--1h;
   }
   .button--text-visible .icon-container {
-    @apply mr-3;
+    margin-inline-end: theme("spacing.3");
   }
 }
 
@@ -87,7 +87,7 @@
     @apply font-normal p-5 text-0h;
   }
   .button--text-visible .icon-container {
-    @apply mr-4;
+    margin-inline-end: theme("spacing.4");
   }
 }
 
@@ -123,37 +123,6 @@
 
 .button--text-visible {
   @apply w-full;
-
-  .icon-container {
-    @apply m-0;
-  }
-  .text-container--visible {
-    @apply m-0 mr-2;
-  }
-}
-
-.button--text-visible.calcite--rtl {
-  .text-container--visible {
-    @apply m-0 ml-2;
-  }
-}
-
-:host([scale="s"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-2;
-  }
-}
-
-:host([scale="m"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-3;
-  }
-}
-
-:host([scale="l"]) {
-  .button--text-visible.calcite--rtl .icon-container {
-    @apply m-0 ml-4;
-  }
 }
 
 :host([active]) .button,
@@ -216,64 +185,45 @@
   @apply opacity-disabled bg-foreground-3;
 }
 
-:host([indicator]) .button--text-visible,
-:host([indicator][scale="s"]) .button--text-visible,
-:host([indicator][scale="l"]) .button--text-visible {
-  @apply pr-4;
-}
-
-:host([indicator]) .button::after {
-  content: "";
-  @apply absolute
-    border-2
-    bg-brand
-    rounded-full
-    h-2
-    w-2
-    z-10;
-  border-color: theme("colors.background.foreground.1");
-  bottom: theme("spacing.2");
-  right: theme("spacing.2");
-}
-
-:host([indicator][scale="s"]) .button::after {
-  bottom: theme("spacing.1");
-  right: theme("spacing.1");
-}
-
-:host([indicator][scale="l"]) .button::after {
-  bottom: theme("spacing.2");
-  right: theme("spacing.2");
-}
-
-:host([indicator]) .calcite--rtl::after {
-  @apply right-auto;
-  left: theme("spacing.1");
-}
-
-:host([indicator]) .button--text-visible.calcite--rtl {
-  @apply pr-3 pl-4;
+:host([indicator]) {
+  .button::after {
+    content: "";
+    @apply absolute
+      border-2
+      bg-brand
+      rounded-full
+      h-2
+      w-2
+      z-10;
+    border-color: theme("colors.background.foreground.1");
+    inset-block-end: theme("spacing.3");
+    inset-inline-end: theme("spacing.3");
+  }
+  .button--text-visible {
+    &::after {
+      inset-block-end: auto;
+    }
+    .text-container--visible {
+      margin-inline-end: theme("spacing.4");
+    }
+  }
+  .button:hover::after,
+  .button:focus::after {
+    border-color: theme("colors.background.foreground.1");
+  }
 }
 
-:host([indicator]) .button:hover::after,
-:host([indicator]) .button:focus::after {
-  border-color: theme("colors.background.foreground.1");
+:host([indicator][scale="s"]) {
+  .button::after {
+    inset-block-end: theme("spacing.1");
+    inset-inline-end: theme("spacing.1");
+  }
+  .button--text-visible::after {
+    inset-block-end: auto;
+    inset-inline-end: theme("spacing.2");
+  }
 }
 
 :host([indicator][active]) .button::after {
   border-color: theme("colors.background.foreground.3");
 }
-
-:host([indicator]) .button--text-visible::after,
-:host([indicator][scale="s"]) .button--text-visible::after,
-:host([indicator][scale="l"]) .button--text-visible::after {
-  @apply bottom-auto;
-  right: theme("spacing.2");
-}
-
-:host([indicator]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale="s"]) .button--text-visible.calcite--rtl::after,
-:host([indicator][scale="l"]) .button--text-visible.calcite--rtl::after {
-  @apply right-auto;
-  left: theme("spacing.2");
-}