diff --git a/.storybook/helpers.ts b/.storybook/helpers.ts index a7cd407da43..486869421c5 100644 --- a/.storybook/helpers.ts +++ b/.storybook/helpers.ts @@ -1,8 +1,8 @@ import * as icons from "@esri/calcite-ui-icons"; import { boolean as booleanKnob } from "@storybook/addon-knobs"; -import { MODES } from "../src/utils/resources"; -import { ModeName } from "../src/components/interfaces"; import { Parameters } from "@storybook/api"; +import { ModeName } from "../src/components/interfaces"; +import { MODES } from "../src/utils/resources"; // we can get all unique icon names from all size 16 non-filled icons. export const iconNames = Object.keys(icons) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 48e66b12908..c6d94020c14 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,6 +1,6 @@ -import { modes, globalDocsPage, parseReadme } from "./utils"; -import { withDirection } from "storybook-rtl-addon"; import { Theme as Mode } from "storybook-addon-themes/dist/models/Theme"; +import { withDirection } from "storybook-rtl-addon"; +import { globalDocsPage, modes, parseReadme } from "./utils"; declare global { interface Window {} diff --git a/CHANGELOG.md b/CHANGELOG.md index 82c3beffff4..5cbdba9f387 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -78,6 +78,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Bug Fixes +- **combobox-item:** bumping the scale of icon to M when parent combobox is scale L ([#6253](https://github.com/Esri/calcite-components/issues/6253)) ([051cb3f](https://github.com/Esri/calcite-components/commit/051cb3f498b2f43339aa2d973dcd257098d84fd6)), closes [#5698](https://github.com/Esri/calcite-components/issues/5698) + +* **button:** neutral and outline button now has correct border color ([#6269](https://github.com/Esri/calcite-components/issues/6269)) ([24e6d32](https://github.com/Esri/calcite-components/commit/24e6d3268855bd5f00f04b5c52bc62c8cb6724e0)), closes [#5331](https://github.com/Esri/calcite-components/issues/5331) + - **input, input-number, input-text:** allow slotted action to be independently disabled ([#6250](https://github.com/Esri/calcite-components/issues/6250)) ([8197c18](https://github.com/Esri/calcite-components/commit/8197c185c1fb23ebc5e7b0ff3bb6594c445d8736)), closes [#6241](https://github.com/Esri/calcite-components/issues/6241) * **input, input-number:** nudge buttons increment/decrement once per interaction ([#6240](https://github.com/Esri/calcite-components/issues/6240)) ([fd10ac5](https://github.com/Esri/calcite-components/commit/fd10ac5976e00c30b9acbbe9ea19b2ab284eac6d)), closes [#5785](https://github.com/Esri/calcite-components/issues/5785) diff --git a/package-lock.json b/package-lock.json index cdbcd79ee06..59208e04471 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.717", + "version": "1.0.0-next.719", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/calcite-components", - "version": "1.0.0-next.717", + "version": "1.0.0-next.719", "license": "SEE LICENSE IN copyright.txt", "dependencies": { "@floating-ui/dom": "1.1.0", @@ -50,7 +50,7 @@ "@typescript-eslint/parser": "5.47.1", "@whitespace/storybook-addon-html": "5.0.0", "autoprefixer": "10.4.13", - "axe-core": "4.6.1", + "axe-core": "4.6.2", "babel-loader": "8.2.5", "chalk": "4.1.2", "cheerio": "1.0.0-rc.10", @@ -8781,9 +8781,9 @@ } }, "node_modules/axe-core": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.1.tgz", - "integrity": "sha512-lCZN5XRuOnpG4bpMq8v0khrWtUOn+i8lZSb6wHZH56ZfbIEv6XwJV84AAueh9/zi7qPVJ/E4yz6fmsiyOmXR4w==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz", + "integrity": "sha512-b1WlTV8+XKLj9gZy2DZXgQiyDp9xkkoe2a6U6UbYccScq2wgH/YwCeI2/Jq2mgo0HzQxqJOjWZBLeA/mqsk5Mg==", "dev": true, "engines": { "node": ">=4" @@ -39174,9 +39174,9 @@ "dev": true }, "axe-core": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.1.tgz", - "integrity": "sha512-lCZN5XRuOnpG4bpMq8v0khrWtUOn+i8lZSb6wHZH56ZfbIEv6XwJV84AAueh9/zi7qPVJ/E4yz6fmsiyOmXR4w==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz", + "integrity": "sha512-b1WlTV8+XKLj9gZy2DZXgQiyDp9xkkoe2a6U6UbYccScq2wgH/YwCeI2/Jq2mgo0HzQxqJOjWZBLeA/mqsk5Mg==", "dev": true }, "babel-core": { diff --git a/package.json b/package.json index 421a4feb4c3..11752a135dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.0.0-next.717", + "version": "1.0.0-next.719", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -110,7 +110,7 @@ "@typescript-eslint/parser": "5.47.1", "@whitespace/storybook-addon-html": "5.0.0", "autoprefixer": "10.4.13", - "axe-core": "4.6.1", + "axe-core": "4.6.2", "babel-loader": "8.2.5", "chalk": "4.1.2", "cheerio": "1.0.0-rc.10", diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx index 15af8c3b594..d037e9bf0ba 100644 --- a/src/components/accordion-item/accordion-item.tsx +++ b/src/components/accordion-item/accordion-item.tsx @@ -9,16 +9,16 @@ import { Prop, VNode } from "@stencil/core"; -import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom"; import { + ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent, - ConditionalSlotComponent + disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom"; import { CSS_UTILITY } from "../../utils/resources"; -import { SLOTS, CSS } from "./resources"; import { FlipContext, Position } from "../interfaces"; import { RegistryEntry, RequestedItem } from "./interfaces"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s. diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 48cb8836efc..a5ab1caf5b9 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -1,7 +1,6 @@ import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core"; +import { Appearance, Position, Scale, SelectionMode } from "../interfaces"; import { RequestedItem } from "./interfaces"; -import { Appearance, Position, Scale } from "../interfaces"; -import { SelectionMode } from "../interfaces"; /** * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can. */ diff --git a/src/components/action-bar/action-bar.e2e.ts b/src/components/action-bar/action-bar.e2e.ts index 1e9a9cbdb81..35916d62fc7 100755 --- a/src/components/action-bar/action-bar.e2e.ts +++ b/src/components/action-bar/action-bar.e2e.ts @@ -1,8 +1,8 @@ import { newE2EPage } from "@stencil/core/testing"; +import { html } from "../../../support/formatting"; import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; import { overflowActionsDebounceInMs } from "./utils"; -import { html } from "../../../support/formatting"; describe("calcite-action-bar", () => { it("renders", async () => renders("calcite-action-bar", { display: "inline-flex" })); diff --git a/src/components/action-bar/action-bar.stories.ts b/src/components/action-bar/action-bar.stories.ts index 92cc53c3bf3..6436ab99ee3 100644 --- a/src/components/action-bar/action-bar.stories.ts +++ b/src/components/action-bar/action-bar.stories.ts @@ -1,15 +1,15 @@ -import { boolean, select, text } from "@storybook/addon-knobs"; +import { boolean, select } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; +import { ATTRIBUTES } from "../../../.storybook/resources"; import { - Attributes, Attribute, - filterComponentAttributes, + Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import { ATTRIBUTES } from "../../../.storybook/resources"; import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; +import readme from "./readme.md"; export default { title: "Components/Action Bar", diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index 4f89ee2652b..a82cb63dcbf 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -3,33 +3,29 @@ import { Element, Event, EventEmitter, + h, Host, + Method, Prop, - Watch, - h, + State, VNode, - Method, - State + Watch } from "@stencil/core"; -import { Position, Scale, Layout } from "../interfaces"; -import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; -import { CSS, SLOTS } from "./resources"; -import { getSlotted } from "../../utils/dom"; -import { - geActionDimensions, - getOverflowCount, - overflowActions, - queryActions, - overflowActionsDebounceInMs -} from "./utils"; -import { createObserver } from "../../utils/observers"; import { debounce } from "lodash-es"; import { + ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent, - ConditionalSlotComponent + disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; import { connectMessages, disconnectMessages, @@ -37,13 +33,17 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; +import { Layout, Position, Scale } from "../interfaces"; import { ActionBarMessages } from "./assets/action-bar/t9n"; +import { CSS, SLOTS } from "./resources"; import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; + geActionDimensions, + getOverflowCount, + overflowActions, + overflowActionsDebounceInMs, + queryActions +} from "./utils"; /** * @slot - A slot for adding `calcite-action`s that will appear at the top of the component. diff --git a/src/components/action-bar/utils.ts b/src/components/action-bar/utils.ts index b8e7caf4e2b..1bc5fc52e25 100644 --- a/src/components/action-bar/utils.ts +++ b/src/components/action-bar/utils.ts @@ -1,6 +1,6 @@ import { forceUpdate } from "@stencil/core"; -import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources"; +import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { Layout } from "../interfaces"; export const overflowActionsDebounceInMs = 150; diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx index 3f55044a13a..da3972a3545 100755 --- a/src/components/action-group/action-group.tsx +++ b/src/components/action-group/action-group.tsx @@ -1,15 +1,12 @@ import { Component, Element, h, Prop, Watch } from "@stencil/core"; -import { ICONS, SLOTS } from "./resources"; import { Fragment, State, VNode } from "@stencil/core/internal"; -import { getSlotted } from "../../utils/dom"; -import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; -import { Columns, Layout, Scale } from "../interfaces"; +import { CalciteActionMenuCustomEvent } from "../../components"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { CalciteActionMenuCustomEvent } from "../../components"; +import { getSlotted } from "../../utils/dom"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -18,7 +15,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; +import { Columns, Layout, Scale } from "../interfaces"; import { ActionGroupMessages } from "./assets/action-group/t9n"; +import { ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding a group of `calcite-action`s. diff --git a/src/components/action-menu/action-menu.e2e.ts b/src/components/action-menu/action-menu.e2e.ts index 5dbcb49e54e..e56a5b86ccd 100755 --- a/src/components/action-menu/action-menu.e2e.ts +++ b/src/components/action-menu/action-menu.e2e.ts @@ -1,8 +1,8 @@ -import { accessible, hidden, renders, defaults, reflects, focusable, slots } from "../../tests/commonTests"; import { newE2EPage } from "@stencil/core/testing"; -import { SLOTS, CSS } from "./resources"; import { html } from "../../../support/formatting"; +import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests"; import { TOOLTIP_DELAY_MS } from "../tooltip/resources"; +import { CSS, SLOTS } from "./resources"; describe("calcite-action-menu", () => { it("renders", async () => renders("calcite-action-menu", { display: "flex" })); diff --git a/src/components/action-menu/action-menu.stories.ts b/src/components/action-menu/action-menu.stories.ts index f58c0da0a4e..2b0c4f67a86 100644 --- a/src/components/action-menu/action-menu.stories.ts +++ b/src/components/action-menu/action-menu.stories.ts @@ -1,6 +1,6 @@ +import { storyFilters } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; -import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Action Menu", diff --git a/src/components/action-menu/action-menu.tsx b/src/components/action-menu/action-menu.tsx index 6d1fd2ea944..a6ce7bc2258 100755 --- a/src/components/action-menu/action-menu.tsx +++ b/src/components/action-menu/action-menu.tsx @@ -1,29 +1,29 @@ import { Component, - h, Element, Event, EventEmitter, + h, Listen, - Prop, - Watch, Method, - State + Prop, + State, + Watch } from "@stencil/core"; -import { CSS, SLOTS, ICONS } from "./resources"; -import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom"; import { Fragment, VNode } from "@stencil/core/internal"; import { getRoundRobinIndex } from "../../utils/array"; +import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom"; +import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; -import { Scale } from "../interfaces"; -import { LogicalPlacement, EffectivePlacement, OverlayPositioning } from "../../utils/floating-ui"; import { isActivationKey } from "../../utils/key"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Scale } from "../interfaces"; +import { CSS, ICONS, SLOTS } from "./resources"; const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"]; diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index ad4863619c1..ca4a03e9c42 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -3,23 +3,26 @@ import { Element, Event, EventEmitter, + h, Host, + Method, Prop, - Watch, - h, + State, VNode, - Method, - State + Watch } from "@stencil/core"; -import { Layout, Position, Scale } from "../interfaces"; -import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; -import { getSlotted } from "../../utils/dom"; -import { CSS, SLOTS } from "./resources"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -28,13 +31,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; +import { Layout, Position, Scale } from "../interfaces"; import { ActionPadMessages } from "./assets/action-pad/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding `calcite-action`s to the component. diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx index 41b16ec6af0..9e86a5f3920 100644 --- a/src/components/action/action.tsx +++ b/src/components/action/action.tsx @@ -1,24 +1,27 @@ import { + Build, Component, Element, + forceUpdate, + h, Host, Method, Prop, - h, - forceUpdate, - VNode, - Watch, State, - Build + VNode, + Watch } from "@stencil/core"; -import { Alignment, Appearance, Scale } from "../interfaces"; -import { CSS, SLOTS } from "./resources"; +import { toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { toAriaBoolean } from "../../utils/dom"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { ActionMessages } from "./assets/action/t9n"; +import { createObserver } from "../../utils/observers"; import { connectMessages, disconnectMessages, @@ -26,12 +29,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { Alignment, Appearance, Scale } from "../interfaces"; +import { ActionMessages } from "./assets/action/t9n"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding a `calcite-icon`. diff --git a/src/components/alert/alert.e2e.ts b/src/components/alert/alert.e2e.ts index d104c79a882..138bbf9fba4 100644 --- a/src/components/alert/alert.e2e.ts +++ b/src/components/alert/alert.e2e.ts @@ -1,8 +1,8 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { renders, accessible, HYDRATED_ATTR, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { CSS, DURATIONS } from "./resources"; +import { accessible, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests"; import { getElementXY } from "../../tests/utils"; +import { CSS, DURATIONS } from "./resources"; describe("calcite-alert", () => { const alertContent = ` diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts index 7e74eee373e..810b4b0047e 100644 --- a/src/components/alert/alert.stories.ts +++ b/src/components/alert/alert.stories.ts @@ -1,8 +1,8 @@ import { select } from "@storybook/addon-knobs"; import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Alert", diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index f818f88ad04..6a566ce31d9 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -15,24 +15,27 @@ import { import { getSlotted, setRequestedIcon, - toAriaBoolean, - slotChangeHasAssignedElement + slotChangeHasAssignedElement, + toAriaBoolean } from "../../utils/dom"; -import { CSS, DURATIONS, SLOTS } from "./resources"; -import { Kind, Scale } from "../interfaces"; -import { KindIcons } from "../resources"; -import { AlertDuration, Sync } from "./interfaces"; +import { MenuPlacement } from "../../utils/floating-ui"; import { - OpenCloseComponent, - connectOpenCloseComponent, - disconnectOpenCloseComponent -} from "../../utils/openCloseComponent"; + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, NumberingSystem, numberStringFormatter } from "../../utils/locale"; +import { + connectOpenCloseComponent, + disconnectOpenCloseComponent, + OpenCloseComponent +} from "../../utils/openCloseComponent"; import { connectMessages, disconnectMessages, @@ -40,14 +43,11 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Kind, Scale } from "../interfaces"; +import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; -import { MenuPlacement } from "../../utils/floating-ui"; +import { AlertDuration, Sync } from "./interfaces"; +import { CSS, DURATIONS, SLOTS } from "./resources"; /** * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts index 7b96c08bcae..4cd38b2313c 100644 --- a/src/components/avatar/avatar.stories.ts +++ b/src/components/avatar/avatar.stories.ts @@ -1,10 +1,10 @@ import { select, text } from "@storybook/addon-knobs"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { storyFilters } from "../../../.storybook/helpers"; import { placeholderImage } from "../../../.storybook/placeholderImage"; +import { modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; -import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Avatar", diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 83882e8ef0b..c54345497e0 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -1,8 +1,8 @@ import { Component, Element, h, Prop, State } from "@stencil/core"; +import { getModeName } from "../../utils/dom"; import { isValidHex } from "../color-picker/utils"; import { Scale } from "../interfaces"; import { hexToHue, stringToHex } from "./utils"; -import { getModeName } from "../../utils/dom"; @Component({ tag: "calcite-avatar", diff --git a/src/components/block-section/block-section.tsx b/src/components/block-section/block-section.tsx index 7b7b53aba4e..1a49b53789f 100644 --- a/src/components/block-section/block-section.tsx +++ b/src/components/block-section/block-section.tsx @@ -3,20 +3,18 @@ import { Element, Event, EventEmitter, - Prop, h, - VNode, Host, - Watch, - State + Prop, + State, + VNode, + Watch } from "@stencil/core"; import { getElementDir, toAriaBoolean } from "../../utils/dom"; -import { CSS, ICONS } from "./resources"; -import { BlockSectionToggleDisplay } from "./interfaces"; -import { Status } from "../interfaces"; import { guid } from "../../utils/guid"; import { isActivationKey } from "../../utils/key"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -24,8 +22,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Status } from "../interfaces"; import { BlockSectionMessages } from "./assets/block-section/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { BlockSectionToggleDisplay } from "./interfaces"; +import { CSS, ICONS } from "./resources"; /** * @slot - A slot for adding custom content. diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx index b7183154c28..91bb7bd6f35 100644 --- a/src/components/block/block.tsx +++ b/src/components/block/block.tsx @@ -10,17 +10,15 @@ import { VNode, Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS } from "./resources"; -import { getSlotted, toAriaBoolean } from "../../utils/dom"; -import { Heading, HeadingLevel } from "../functional/Heading"; -import { Status } from "../interfaces"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -28,8 +26,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { Heading, HeadingLevel } from "../functional/Heading"; +import { Status } from "../interfaces"; import { BlockMessages } from "./assets/block/t9n"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 5cfacce2cac..e83ebaba204 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -463,7 +463,7 @@ button, a { @apply text-color-1 bg-transparent; - border-color: theme("backgroundColor.foreground.3"); + border-color: theme("borderColor.color.1"); &:hover { box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3); } diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts index 3c32286d09d..4753837c84f 100644 --- a/src/components/button/button.stories.ts +++ b/src/components/button/button.stories.ts @@ -156,3 +156,6 @@ export const darkModeRTL_TestOnly = (): string => html` `; darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; + +export const outlineNeutralBorderColor_TestOnly = (): string => + html`Test`; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 1c9a1feebf1..e3acfb5251d 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -1,14 +1,17 @@ +import { Build, Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core"; import "form-request-submit-polyfill/form-request-submit-polyfill"; -import { Component, Element, h, Method, Prop, Build, State, VNode, Watch } from "@stencil/core"; -import { CSS } from "./resources"; import { closestElementCrossShadowBoundary } from "../../utils/dom"; -import { ButtonAlignment } from "./interfaces"; -import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; -import { createObserver } from "../../utils/observers"; +import { FormOwner, resetForm, submitForm } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { submitForm, resetForm, FormOwner } from "../../utils/form"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; import { connectMessages, disconnectMessages, @@ -16,13 +19,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { ButtonMessages } from "./assets/button/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { ButtonAlignment } from "./interfaces"; +import { CSS } from "./resources"; /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */ /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */ diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index 165345e7bcd..c45d4299b23 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -115,11 +115,7 @@ export const simpleWithFooterButton = (): string => html` export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html`
- ${create( - "calcite-card", - createAttributes(), - html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}` - )} + ${create("calcite-card", createAttributes(), html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}`)}
${tooltipHtml} `; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 4b0366abd44..98303b74cdf 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -9,14 +9,12 @@ import { VNode, Watch } from "@stencil/core"; -import { getSlotted, toAriaBoolean } from "../../utils/dom"; -import { CSS, SLOTS } from "./resources"; -import { LogicalFlowPosition } from "../interfaces"; import { + ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent, - ConditionalSlotComponent + disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -25,7 +23,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { LogicalFlowPosition } from "../interfaces"; import { CardMessages } from "./assets/card/t9n"; +import { CSS, SLOTS } from "./resources"; /** * Cards do not include a grid or bounding container diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index 3a9a33f1f6d..90b6b748f8e 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -9,20 +9,24 @@ import { Prop, VNode } from "@stencil/core"; +import { toAriaBoolean } from "../../utils/dom"; +import { + CheckableFormComponent, + connectForm, + disconnectForm, + HiddenFormInputSlot +} from "../../utils/form"; import { guid } from "../../utils/guid"; -import { Scale } from "../interfaces"; -import { CheckableFormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; -import { connectForm, disconnectForm } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { toAriaBoolean } from "../../utils/dom"; import { isActivationKey } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Scale } from "../interfaces"; @Component({ tag: "calcite-checkbox", diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts index e39a0d0ee00..e3c4fbafc3f 100644 --- a/src/components/chip/chip.e2e.ts +++ b/src/components/chip/chip.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests"; +import { accessible, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts index 5c371b70c93..5fd3d8e67c7 100644 --- a/src/components/chip/chip.stories.ts +++ b/src/components/chip/chip.stories.ts @@ -1,9 +1,9 @@ import { select } from "@storybook/addon-knobs"; -import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; import { placeholderImage } from "../../../.storybook/placeholderImage"; -import readme from "./readme.md"; +import { modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Chip", diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx index 6ace9c9725a..5d0e8233817 100644 --- a/src/components/chip/chip.tsx +++ b/src/components/chip/chip.tsx @@ -1,25 +1,31 @@ import { + Build, Component, - h, - Prop, + Element, Event, EventEmitter, - Element, - VNode, + h, Method, - Watch, + Prop, State, - Build + VNode, + Watch } from "@stencil/core"; -import { guid } from "../../utils/guid"; -import { CSS, SLOTS, ICONS } from "./resources"; -import { Appearance, Kind, Scale } from "../interfaces"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { ChipMessages } from "./assets/chip/t9n"; +import { slotChangeHasAssignedElement } from "../../utils/dom"; +import { guid } from "../../utils/guid"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; import { connectMessages, disconnectMessages, @@ -27,15 +33,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; -import { createObserver } from "../../utils/observers"; -import { slotChangeHasAssignedElement } from "../../utils/dom"; +import { Appearance, Kind, Scale } from "../interfaces"; +import { ChipMessages } from "./assets/chip/t9n"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding text. diff --git a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts index c0dc45111a8..27f7fe7957a 100644 --- a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts +++ b/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts @@ -1,8 +1,8 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, reflects, renders, hidden } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; +import { selectText } from "../../tests/utils"; import { isValidHex, normalizeHex } from "../color-picker/utils"; import { CSS } from "./resources"; -import { selectText } from "../../tests/utils"; describe("calcite-color-picker-hex-input", () => { it("renders", () => renders("calcite-color-picker-hex-input", { display: "block" })); diff --git a/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/src/components/color-picker-hex-input/color-picker-hex-input.tsx index 71e5c88814e..103b3d4a771 100644 --- a/src/components/color-picker-hex-input/color-picker-hex-input.tsx +++ b/src/components/color-picker-hex-input/color-picker-hex-input.tsx @@ -11,19 +11,19 @@ import { VNode, Watch } from "@stencil/core"; -import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils"; import Color from "color"; -import { CSS } from "./resources"; -import { Scale } from "../interfaces"; -import { RGB } from "../color-picker/interfaces"; import { focusElement } from "../../utils/dom"; -import { NumberingSystem } from "../../utils/locale"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { NumberingSystem } from "../../utils/locale"; +import { RGB } from "../color-picker/interfaces"; +import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils"; +import { Scale } from "../interfaces"; +import { CSS } from "./resources"; const DEFAULT_COLOR = Color(); diff --git a/src/components/color-picker-swatch/color-picker-swatch.tsx b/src/components/color-picker-swatch/color-picker-swatch.tsx index f56472eb21d..127a0fbf680 100644 --- a/src/components/color-picker-swatch/color-picker-swatch.tsx +++ b/src/components/color-picker-swatch/color-picker-swatch.tsx @@ -1,8 +1,8 @@ import { Component, Element, h, Prop, VNode, Watch } from "@stencil/core"; import Color from "color"; -import { COLORS, CSS } from "./resources"; -import { Scale } from "../interfaces"; import { getModeName } from "../../utils/dom"; +import { Scale } from "../interfaces"; +import { COLORS, CSS } from "./resources"; @Component({ tag: "calcite-color-picker-swatch", diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 9a6ca41303d..f47b200ecd3 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -13,8 +13,10 @@ import { } from "@stencil/core"; import Color from "color"; -import { ColorMode, ColorValue, InternalColor } from "./interfaces"; +import { throttle } from "lodash-es"; +import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; import { Appearance, Scale } from "../interfaces"; +import { ColorMode, ColorValue, InternalColor } from "./interfaces"; import { CSS, DEFAULT_COLOR, @@ -23,14 +25,23 @@ import { HSV_LIMITS, RGB_LIMITS } from "./resources"; -import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMode } from "./utils"; -import { throttle } from "lodash-es"; -import { clamp } from "../../utils/math"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { ColorPickerMessages } from "./assets/color-picker/t9n"; import { isActivationKey } from "../../utils/key"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + NumberingSystem +} from "../../utils/locale"; +import { clamp } from "../../utils/math"; import { connectMessages, disconnectMessages, @@ -38,14 +49,7 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { NumberingSystem } from "../../utils/locale"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { ColorPickerMessages } from "./assets/color-picker/t9n"; const throttleFor60FpsInMs = 16; const defaultValue = normalizeHex(DEFAULT_COLOR.hex()); diff --git a/src/components/combobox-item-group/combobox-item-group.tsx b/src/components/combobox-item-group/combobox-item-group.tsx index 925791ebb2d..209801b80d8 100644 --- a/src/components/combobox-item-group/combobox-item-group.tsx +++ b/src/components/combobox-item-group/combobox-item-group.tsx @@ -1,10 +1,10 @@ -import { Component, Prop, h, VNode, Element } from "@stencil/core"; -import { CSS } from "./resources"; -import { getAncestors, getDepth } from "../combobox/utils"; +import { Component, Element, h, Prop, VNode } from "@stencil/core"; +import { getElementProp } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { ComboboxChildElement } from "../combobox/interfaces"; -import { getElementProp } from "../../utils/dom"; +import { getAncestors, getDepth } from "../combobox/utils"; import { Scale } from "../interfaces"; +import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-combobox-item`s. diff --git a/src/components/combobox-item/combobox-item.tsx b/src/components/combobox-item/combobox-item.tsx index 047984662f6..27d64734eb9 100644 --- a/src/components/combobox-item/combobox-item.tsx +++ b/src/components/combobox-item/combobox-item.tsx @@ -3,24 +3,24 @@ import { Element, Event, EventEmitter, + h, Host, Prop, - h, - Watch, - VNode + VNode, + Watch } from "@stencil/core"; +import { + ConditionalSlotComponent, + connectConditionalSlotComponent, + disconnectConditionalSlotComponent +} from "../../utils/conditionalSlot"; import { getElementProp, getSlotted } from "../../utils/dom"; -import { CSS } from "./resources"; import { guid } from "../../utils/guid"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { ComboboxChildElement } from "../combobox/interfaces"; import { getAncestors, getDepth } from "../combobox/utils"; import { Scale } from "../interfaces"; -import { - connectConditionalSlotComponent, - disconnectConditionalSlotComponent, - ConditionalSlotComponent -} from "../../utils/conditionalSlot"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { CSS } from "./resources"; /** * @slot - A slot for adding nested `calcite-combobox-item`s. @@ -86,6 +86,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon isNested: boolean; + /** Specifies the scale of the combobox-item controlled by parent, defaults to m */ scale: Scale = "m"; // -------------------------------------------------------------------------- @@ -168,7 +169,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon }} flipRtl={iconFlipRtl} icon={icon || iconPath} - scale="s" + scale={this.scale === "l" ? "m" : "s"} /> ); } diff --git a/src/components/combobox/combobox.stories.ts b/src/components/combobox/combobox.stories.ts index c9c61f36626..9aff6e5adcd 100644 --- a/src/components/combobox/combobox.stories.ts +++ b/src/components/combobox/combobox.stories.ts @@ -414,3 +414,18 @@ export const optionListMinWidthMatchesInputWhenOverlayPositioningIsFixed_TestOnl `; + +export const mediumIconForLargeComoboboxItem_TestOnly = (): string => html` + + + + + + +`; diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx index 3b7dd9455e8..850de98bfa9 100644 --- a/src/components/combobox/combobox.tsx +++ b/src/components/combobox/combobox.tsx @@ -1,39 +1,34 @@ import { Component, + Element, + Event, + EventEmitter, h, + Host, + Listen, + Method, Prop, State, - Listen, - Event, - EventEmitter, - Element, VNode, - Method, - Watch, - Host + Watch } from "@stencil/core"; -import { filter } from "../../utils/filter"; import { debounce } from "lodash-es"; +import { filter } from "../../utils/filter"; +import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom"; import { - FloatingCSS, - OverlayPositioning, - FloatingUIComponent, connectFloatingUI, + defaultMenuPlacement, disconnectFloatingUI, - LogicalPlacement, EffectivePlacement, - defaultMenuPlacement, filterComputedPlacements, + FloatingCSS, + FloatingUIComponent, + LogicalPlacement, + OverlayPositioning, reposition, updateAfterClose } from "../../utils/floating-ui"; -import { guid } from "../../utils/guid"; -import { Scale, SelectionMode } from "../interfaces"; -import { ComboboxChildElement } from "./interfaces"; -import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources"; -import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { afterConnectDefaultValueSet, connectForm, @@ -42,13 +37,21 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { createObserver } from "../../utils/observers"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; import { - OpenCloseComponent, connectOpenCloseComponent, - disconnectOpenCloseComponent + disconnectOpenCloseComponent, + OpenCloseComponent } from "../../utils/openCloseComponent"; import { connectMessages, @@ -57,14 +60,11 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { Scale, SelectionMode } from "../interfaces"; import { ComboboxMessages } from "./assets/combobox/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { ComboboxChildElement } from "./interfaces"; +import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup } from "./resources"; +import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils"; interface ItemData { label: string; diff --git a/src/components/date-picker-day/date-picker-day.tsx b/src/components/date-picker-day/date-picker-day.tsx index ea668930905..0c8f2850b2b 100644 --- a/src/components/date-picker-day/date-picker-day.tsx +++ b/src/components/date-picker-day/date-picker-day.tsx @@ -1,21 +1,21 @@ import { Component, Element, - Prop, - Host, Event, EventEmitter, - Listen, h, + Host, + Listen, + Prop, VNode } from "@stencil/core"; import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom"; -import { Scale } from "../interfaces"; -import { CSS_UTILITY } from "../../utils/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; +import { CSS_UTILITY } from "../../utils/resources"; +import { Scale } from "../interfaces"; @Component({ tag: "calcite-date-picker-day", diff --git a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts index 98f8ae49ecc..e01b2bca74f 100644 --- a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts +++ b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { renders } from "../../tests/commonTests"; describe("calcite-date-picker-month-header", () => { it("renders", async () => renders("calcite-date-picker-month-header", { display: "block" })); diff --git a/src/components/date-picker-month-header/date-picker-month-header.tsx b/src/components/date-picker-month-header/date-picker-month-header.tsx index a69ef20ac85..118df205b9e 100644 --- a/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -1,25 +1,25 @@ import { Component, Element, - Prop, Event, - h, EventEmitter, - VNode, + Fragment, + h, + Prop, State, - Watch, - Fragment + VNode, + Watch } from "@stencil/core"; -import { dateFromRange, nextMonth, prevMonth, getOrder } from "../../utils/date"; +import { dateFromRange, getOrder, nextMonth, prevMonth } from "../../utils/date"; -import { DateLocaleData } from "../date-picker/utils"; -import { Scale } from "../interfaces"; -import { HeadingLevel, Heading } from "../functional/Heading"; -import { BUDDHIST_CALENDAR_YEAR_OFFSET, CSS, ICON } from "./resources"; +import { closestElementCrossShadowBoundary } from "../../utils/dom"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; -import { closestElementCrossShadowBoundary } from "../../utils/dom"; import { DatePickerMessages } from "../date-picker/assets/date-picker/t9n"; +import { DateLocaleData } from "../date-picker/utils"; +import { Heading, HeadingLevel } from "../functional/Heading"; +import { Scale } from "../interfaces"; +import { BUDDHIST_CALENDAR_YEAR_OFFSET, CSS, ICON } from "./resources"; @Component({ tag: "calcite-date-picker-month-header", diff --git a/src/components/date-picker-month/date-picker-month.tsx b/src/components/date-picker-month/date-picker-month.tsx index 87a6af063a9..0e566e73425 100644 --- a/src/components/date-picker-month/date-picker-month.tsx +++ b/src/components/date-picker-month/date-picker-month.tsx @@ -1,15 +1,15 @@ import { Component, Element, - Prop, - Host, Event, EventEmitter, h, + Host, Listen, + Prop, VNode } from "@stencil/core"; -import { inRange, sameDate, dateFromRange, HoverRange } from "../../utils/date"; +import { dateFromRange, HoverRange, inRange, sameDate } from "../../utils/date"; import { DateLocaleData } from "../date-picker/utils"; import { Scale } from "../interfaces"; diff --git a/src/components/date-picker/date-picker.e2e.ts b/src/components/date-picker/date-picker.e2e.ts index cec9fbe9634..235f0d58785 100644 --- a/src/components/date-picker/date-picker.e2e.ts +++ b/src/components/date-picker/date-picker.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { renders, defaults, hidden, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { defaults, hidden, renders, t9n } from "../../tests/commonTests"; import { skipAnimations } from "../../tests/utils"; describe("calcite-date-picker", () => { diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts index 4076003dc35..9567cb22b6b 100644 --- a/src/components/date-picker/date-picker.stories.ts +++ b/src/components/date-picker/date-picker.stories.ts @@ -1,17 +1,17 @@ -import { select, text, boolean } from "@storybook/addon-knobs"; +import { boolean, select, text } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; +import { ATTRIBUTES } from "../../../.storybook/resources"; import { Attribute, - filterComponentAttributes, Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; import { locales } from "../../utils/locale"; -import { storyFilters } from "../../../.storybook/helpers"; -import { ATTRIBUTES } from "../../../.storybook/resources"; +import readme from "./readme.md"; const { scale } = ATTRIBUTES; export default { diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx index 997b0b1de5f..4690920469a 100644 --- a/src/components/date-picker/date-picker.tsx +++ b/src/components/date-picker/date-picker.tsx @@ -1,27 +1,31 @@ import { + Build, Component, - h, - Prop, - Event, Element, + Event, + EventEmitter, + h, Host, + Prop, State, - EventEmitter, - Watch, VNode, - Build + Watch } from "@stencil/core"; -import { getLocaleData, DateLocaleData, getValueAsDateRange } from "./utils"; import { - dateFromRange, dateFromISO, + dateFromRange, dateToISO, getDaysDiff, HoverRange, setEndOfDay } from "../../utils/date"; -import { HeadingLevel } from "../functional/Heading"; -import { DatePickerMessages } from "./assets/date-picker/t9n"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + NumberingSystem, + numberStringFormatter +} from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -29,14 +33,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { HeadingLevel } from "../functional/Heading"; +import { DatePickerMessages } from "./assets/date-picker/t9n"; import { HEADING_LEVEL } from "./resources"; -import { - connectLocalized, - disconnectLocalized, - LocalizedComponent, - NumberingSystem, - numberStringFormatter -} from "../../utils/locale"; +import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils"; @Component({ assetsDirs: ["assets"], diff --git a/src/components/date-picker/utils.ts b/src/components/date-picker/utils.ts index 210055c6c9e..4c902a450d4 100644 --- a/src/components/date-picker/utils.ts +++ b/src/components/date-picker/utils.ts @@ -1,6 +1,6 @@ import { getAssetPath } from "@stencil/core"; -import { getSupportedLocale } from "../../utils/locale"; import { dateFromISO } from "../../utils/date"; +import { getSupportedLocale } from "../../utils/locale"; /** * Translation resource data structure diff --git a/src/components/dropdown-group/dropdown-group.tsx b/src/components/dropdown-group/dropdown-group.tsx index 648e0c48c55..d3d5f5fdebe 100644 --- a/src/components/dropdown-group/dropdown-group.tsx +++ b/src/components/dropdown-group/dropdown-group.tsx @@ -10,10 +10,9 @@ import { VNode } from "@stencil/core"; import { getElementProp } from "../../utils/dom"; +import { Scale, SelectionMode } from "../interfaces"; import { RequestedItem } from "./interfaces"; -import { Scale } from "../interfaces"; import { CSS } from "./resources"; -import { SelectionMode } from "../interfaces"; /** * @slot - A slot for adding `calcite-dropdown-item`s. */ diff --git a/src/components/dropdown-item/dropdown-item.tsx b/src/components/dropdown-item/dropdown-item.tsx index 554ab38e4ff..c2dd8a58997 100644 --- a/src/components/dropdown-item/dropdown-item.tsx +++ b/src/components/dropdown-item/dropdown-item.tsx @@ -13,16 +13,15 @@ import { import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { ItemKeyboardEvent } from "../dropdown/interfaces"; -import { FlipContext } from "../interfaces"; -import { CSS } from "./resources"; -import { RequestedItem } from "../dropdown-group/interfaces"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; -import { SelectionMode } from "../interfaces"; +import { RequestedItem } from "../dropdown-group/interfaces"; +import { FlipContext, SelectionMode } from "../interfaces"; +import { CSS } from "./resources"; /** * @slot - A slot for adding text. diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts index 3a43f9e53e2..bdde9a6dab2 100644 --- a/src/components/dropdown/dropdown.e2e.ts +++ b/src/components/dropdown/dropdown.e2e.ts @@ -1,9 +1,9 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, floatingUIOwner, renders, hidden } from "../../tests/commonTests"; import dedent from "dedent"; import { html } from "../../../support/formatting"; -import { CSS } from "./resources"; +import { accessible, defaults, disabled, floatingUIOwner, hidden, renders } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; +import { CSS } from "./resources"; describe("calcite-dropdown", () => { it("renders", () => diff --git a/src/components/dropdown/dropdown.stories.ts b/src/components/dropdown/dropdown.stories.ts index 85958667e2b..6f58e03cbd3 100644 --- a/src/components/dropdown/dropdown.stories.ts +++ b/src/components/dropdown/dropdown.stories.ts @@ -1,11 +1,11 @@ import { number, select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme1 from "./readme.md"; +import { html } from "../../../support/formatting"; +import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui"; import readme2 from "../dropdown-group/readme.md"; import readme3 from "../dropdown-item/readme.md"; -import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui"; -import { html } from "../../../support/formatting"; +import readme1 from "./readme.md"; export default { title: "Components/Buttons/Dropdown", diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index ed773f2ebc1..b77baeb4b0c 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -20,30 +20,30 @@ import { toAriaBoolean } from "../../utils/dom"; import { - FloatingCSS, - OverlayPositioning, - FloatingUIComponent, connectFloatingUI, + defaultMenuPlacement, disconnectFloatingUI, EffectivePlacement, - MenuPlacement, - defaultMenuPlacement, filterComputedPlacements, + FloatingCSS, + FloatingUIComponent, + MenuPlacement, + OverlayPositioning, reposition, updateAfterClose } from "../../utils/floating-ui"; -import { Scale } from "../interfaces"; -import { SLOTS } from "./resources"; -import { createObserver } from "../../utils/observers"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { isActivationKey } from "../../utils/key"; +import { createObserver } from "../../utils/observers"; import { - OpenCloseComponent, connectOpenCloseComponent, - disconnectOpenCloseComponent + disconnectOpenCloseComponent, + OpenCloseComponent } from "../../utils/openCloseComponent"; -import { guid } from "../../utils/guid"; import { RequestedItem } from "../dropdown-group/interfaces"; -import { isActivationKey } from "../../utils/key"; +import { Scale } from "../interfaces"; +import { SLOTS } from "./resources"; /** * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set. diff --git a/src/components/fab/fab.tsx b/src/components/fab/fab.tsx index 0b4fa051b63..8289cea833d 100755 --- a/src/components/fab/fab.tsx +++ b/src/components/fab/fab.tsx @@ -1,14 +1,14 @@ -import { Component, Element, Method, Prop, h, VNode } from "@stencil/core"; -import { Appearance, Kind, Scale } from "../interfaces"; -import { CSS, ICONS } from "./resources"; +import { Component, Element, h, Method, Prop, VNode } from "@stencil/core"; import { focusElement } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Appearance, Kind, Scale } from "../interfaces"; +import { CSS, ICONS } from "./resources"; @Component({ tag: "calcite-fab", diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index 96b5693852b..bdd7b6f098c 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -12,10 +12,14 @@ import { Watch } from "@stencil/core"; import { debounce } from "lodash-es"; -import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources"; -import { Scale } from "../interfaces"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { filter } from "../../utils/filter"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -24,13 +28,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Scale } from "../interfaces"; import { FilterMessages } from "./assets/filter/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources"; @Component({ tag: "calcite-filter", diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx index 003b9341a59..42a9e54d689 100644 --- a/src/components/flow-item/flow-item.tsx +++ b/src/components/flow-item/flow-item.tsx @@ -1,21 +1,24 @@ import { Component, Element, - Prop, + Event, + EventEmitter, h, - VNode, Host, Method, - Event, - EventEmitter, + Prop, State, + VNode, Watch } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; -import { HeadingLevel } from "../functional/Heading"; -import { CSS, ICONS, SLOTS } from "./resources"; -import { SLOTS as PANEL_SLOTS } from "../panel/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -24,13 +27,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { HeadingLevel } from "../functional/Heading"; +import { SLOTS as PANEL_SLOTS } from "../panel/resources"; import { FlowItemMessages } from "./assets/flow-item/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. diff --git a/src/components/flow/flow.e2e.ts b/src/components/flow/flow.e2e.ts index c5a64453e25..7095c62b732 100755 --- a/src/components/flow/flow.e2e.ts +++ b/src/components/flow/flow.e2e.ts @@ -1,9 +1,9 @@ import { newE2EPage } from "@stencil/core/testing"; -import { CSS } from "./resources"; -import { CSS as ITEM_CSS } from "../flow-item/resources"; -import { accessible, hidden, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { accessible, hidden, renders } from "../../tests/commonTests"; +import { CSS as ITEM_CSS } from "../flow-item/resources"; +import { CSS } from "./resources"; describe("calcite-flow", () => { it("renders", async () => renders("calcite-flow", { display: "flex" })); diff --git a/src/components/flow/flow.stories.ts b/src/components/flow/flow.stories.ts index 45aef689155..849cea48bcb 100644 --- a/src/components/flow/flow.stories.ts +++ b/src/components/flow/flow.stories.ts @@ -1,10 +1,10 @@ import { boolean, text } from "@storybook/addon-knobs"; -import { filterComponentAttributes, Attributes, createComponentHTML as create } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import itemReadme from "../panel/readme.md"; -import { SLOTS, TEXT } from "../panel/resources"; -import { html } from "../../../support/formatting"; import { storyFilters } from "../../../.storybook/helpers"; +import { Attributes, createComponentHTML as create, filterComponentAttributes } from "../../../.storybook/utils"; +import { html } from "../../../support/formatting"; +import itemReadme from "../panel/readme.md"; +import { SLOTS } from "../panel/resources"; +import readme from "./readme.md"; export default { title: "Components/Flow", diff --git a/src/components/flow/flow.tsx b/src/components/flow/flow.tsx index 4df257fdd90..73f92a8f6f7 100755 --- a/src/components/flow/flow.tsx +++ b/src/components/flow/flow.tsx @@ -1,7 +1,7 @@ -import { Component, Element, Listen, Method, State, h, VNode } from "@stencil/core"; -import { CSS } from "./resources"; -import { FlowDirection } from "./interfaces"; +import { Component, Element, h, Listen, Method, State, VNode } from "@stencil/core"; import { createObserver } from "../../utils/observers"; +import { FlowDirection } from "./interfaces"; +import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-flow-item` elements to the component. diff --git a/src/components/functional/ExpandToggle.tsx b/src/components/functional/ExpandToggle.tsx index e15dbb11ddb..4baf1fdb5f6 100644 --- a/src/components/functional/ExpandToggle.tsx +++ b/src/components/functional/ExpandToggle.tsx @@ -1,8 +1,8 @@ import { FunctionalComponent, h } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; import { queryActions } from "../action-bar/utils"; -import { Position, Scale } from "../interfaces"; import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources"; +import { Position, Scale } from "../interfaces"; interface ExpandToggleProps { expanded: boolean; diff --git a/src/components/functional/Heading.spec.tsx b/src/components/functional/Heading.spec.tsx index 3b678bc8e5b..41f206e1cea 100644 --- a/src/components/functional/Heading.spec.tsx +++ b/src/components/functional/Heading.spec.tsx @@ -1,6 +1,6 @@ -import { h, Component } from "@stencil/core"; +import { Component, h } from "@stencil/core"; import { newSpecPage } from "@stencil/core/testing"; -import { Heading, constrainHeadingLevel } from "./Heading"; +import { constrainHeadingLevel, Heading } from "./Heading"; describe("constrainHeadingLevel", () => { it("should constrain heading levels", () => { diff --git a/src/components/graph/graph.e2e.ts b/src/components/graph/graph.e2e.ts index c3a9312f42e..faea2a58fa7 100644 --- a/src/components/graph/graph.e2e.ts +++ b/src/components/graph/graph.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; +import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; describe("calcite-graph", () => { it("renders", async () => renders(``, { display: "block" })); diff --git a/src/components/graph/graph.stories.ts b/src/components/graph/graph.stories.ts index 4a87184f868..c91f23d9fa0 100644 --- a/src/components/graph/graph.stories.ts +++ b/src/components/graph/graph.stories.ts @@ -1,7 +1,7 @@ import { number } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; import readme from "./readme.md"; -import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Controls/Slider/support/Graph", diff --git a/src/components/graph/graph.tsx b/src/components/graph/graph.tsx index 666e0dcafd6..242efe885af 100644 --- a/src/components/graph/graph.tsx +++ b/src/components/graph/graph.tsx @@ -1,8 +1,8 @@ -import { Component, Element, Prop, h, VNode, forceUpdate } from "@stencil/core"; -import { Point, ColorStop, DataSeries } from "./interfaces"; +import { Component, Element, forceUpdate, h, Prop, VNode } from "@stencil/core"; import { guid } from "../../utils/guid"; -import { area, range, translate } from "./util"; import { createObserver } from "../../utils/observers"; +import { ColorStop, DataSeries, Point } from "./interfaces"; +import { area, range, translate } from "./util"; @Component({ tag: "calcite-graph", diff --git a/src/components/graph/util.ts b/src/components/graph/util.ts index 37dade9a3bf..86cad114ad3 100644 --- a/src/components/graph/util.ts +++ b/src/components/graph/util.ts @@ -1,4 +1,4 @@ -import { Point, DataSeries, Graph, TranslateOptions, Translator, Extent } from "../graph/interfaces"; +import { DataSeries, Extent, Graph, Point, TranslateOptions, Translator } from "../graph/interfaces"; /** * Calculate slope of the tangents diff --git a/src/components/handle/handle.tsx b/src/components/handle/handle.tsx index 8708a1eb6aa..5030f032b31 100644 --- a/src/components/handle/handle.tsx +++ b/src/components/handle/handle.tsx @@ -1,13 +1,13 @@ -import { Component, Element, Event, EventEmitter, Method, Prop, h, VNode } from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Method, Prop, VNode } from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; -import { CSS, ICONS } from "./resources"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; import { HandleNudge } from "./interfaces"; +import { CSS, ICONS } from "./resources"; @Component({ tag: "calcite-handle", diff --git a/src/components/icon/icon.e2e.ts b/src/components/icon/icon.e2e.ts index b53a2ddd4cb..b30bac98ea7 100644 --- a/src/components/icon/icon.e2e.ts +++ b/src/components/icon/icon.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, reflects, renders, hidden } from "../../tests/commonTests"; +import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; import { CSS } from "./resources"; import { scaleToPx } from "./utils"; diff --git a/src/components/icon/icon.stories.ts b/src/components/icon/icon.stories.ts index 10d69a0c15d..740f9f90cab 100644 --- a/src/components/icon/icon.stories.ts +++ b/src/components/icon/icon.stories.ts @@ -1,8 +1,8 @@ import { select } from "@storybook/addon-knobs"; -import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers"; +import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Icon", diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index e433fc23262..f9acf70f2d2 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -1,10 +1,10 @@ +import { CalciteIconPath, CalciteMultiPathEntry } from "@esri/calcite-ui-icons"; import { Build, Component, Element, h, Host, Prop, State, VNode, Watch } from "@stencil/core"; -import { CSS } from "./resources"; import { getElementDir, toAriaBoolean } from "../../utils/dom"; -import { fetchIcon, scaleToPx } from "./utils"; -import { Scale } from "../interfaces"; -import { CalciteIconPath, CalciteMultiPathEntry } from "@esri/calcite-ui-icons"; import { createObserver } from "../../utils/observers"; +import { Scale } from "../interfaces"; +import { CSS } from "./resources"; +import { fetchIcon, scaleToPx } from "./utils"; @Component({ tag: "calcite-icon", diff --git a/src/components/icon/utils.ts b/src/components/icon/utils.ts index 21c67840d06..ab665c936d7 100644 --- a/src/components/icon/utils.ts +++ b/src/components/icon/utils.ts @@ -1,5 +1,5 @@ -import { getAssetPath } from "@stencil/core"; import { CalciteIconPath } from "@esri/calcite-ui-icons"; +import { getAssetPath } from "@stencil/core"; import { Scale } from "../interfaces"; export interface FetchIconProps { diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index f339bdd8bd6..a3298a71bb2 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -12,12 +12,16 @@ import { Watch } from "@stencil/core"; import { getElementProp, getSlotted } from "../../utils/dom"; -import { Scale } from "../interfaces"; -import { CSS } from "./resources"; -import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; -import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; import { connectMessages, disconnectMessages, @@ -25,13 +29,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Scale } from "../interfaces"; import { InlineEditableMessages } from "./assets/inline-editable/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS } from "./resources"; /** * @slot - A slot for adding a `calcite-input`. diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx index 2812b1a5c82..e9ab4024559 100644 --- a/src/components/input-date-picker/input-date-picker.tsx +++ b/src/components/input-date-picker/input-date-picker.tsx @@ -1,58 +1,56 @@ import { + Build, Component, - h, - Prop, Element, + Event, + EventEmitter, + h, Host, - State, Listen, - Watch, - VNode, Method, - Event, - EventEmitter, - Build + Prop, + State, + VNode, + Watch } from "@stencil/core"; -import { getLocaleData, DateLocaleData, getValueAsDateRange } from "../date-picker/utils"; import { - dateFromRange, - inRange, dateFromISO, - dateToISO, dateFromLocalizedString, - datePartsFromLocalizedString + dateFromRange, + datePartsFromLocalizedString, + dateToISO, + inRange } from "../../utils/date"; -import { HeadingLevel } from "../functional/Heading"; -import { CSS } from "./resources"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; -import { - connectForm, - disconnectForm, - FormComponent, - HiddenFormInputSlot, - submitForm -} from "../../utils/form"; +import { toAriaBoolean } from "../../utils/dom"; import { - FloatingCSS, - OverlayPositioning, - FloatingUIComponent, connectFloatingUI, + defaultMenuPlacement, disconnectFloatingUI, EffectivePlacement, - MenuPlacement, - defaultMenuPlacement, filterComputedPlacements, + FloatingCSS, + FloatingUIComponent, + MenuPlacement, + OverlayPositioning, reposition, updateAfterClose } from "../../utils/floating-ui"; +import { + connectForm, + disconnectForm, + FormComponent, + HiddenFormInputSlot, + submitForm +} from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { toAriaBoolean } from "../../utils/dom"; +import { numberKeys } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - OpenCloseComponent, - connectOpenCloseComponent, - disconnectOpenCloseComponent -} from "../../utils/openCloseComponent"; -import { DatePickerMessages } from "../date-picker/assets/date-picker/t9n"; + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, @@ -60,13 +58,15 @@ import { NumberingSystem, numberStringFormatter } from "../../utils/locale"; -import { numberKeys } from "../../utils/key"; import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; + connectOpenCloseComponent, + disconnectOpenCloseComponent, + OpenCloseComponent +} from "../../utils/openCloseComponent"; +import { DatePickerMessages } from "../date-picker/assets/date-picker/t9n"; +import { DateLocaleData, getLocaleData, getValueAsDateRange } from "../date-picker/utils"; +import { HeadingLevel } from "../functional/Heading"; +import { CSS } from "./resources"; @Component({ tag: "calcite-input-date-picker", diff --git a/src/components/input-message/input-message.e2e.ts b/src/components/input-message/input-message.e2e.ts index c84e853bd5f..dd5d0479030 100644 --- a/src/components/input-message/input-message.e2e.ts +++ b/src/components/input-message/input-message.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, hidden } from "../../tests/commonTests"; +import { accessible, hidden, renders } from "../../tests/commonTests"; import { StatusIconDefaults } from "./interfaces"; describe("calcite-input-message", () => { diff --git a/src/components/input-message/input-message.tsx b/src/components/input-message/input-message.tsx index c75c80aaa0c..414308e997e 100644 --- a/src/components/input-message/input-message.tsx +++ b/src/components/input-message/input-message.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Host, h, Prop, VNode, Watch } from "@stencil/core"; +import { Component, Element, h, Host, Prop, VNode, Watch } from "@stencil/core"; import { getElementProp, setRequestedIcon } from "../../utils/dom"; import { Scale, Status } from "../interfaces"; import { StatusIconDefaults } from "./interfaces"; diff --git a/src/components/input-number/input-number.e2e.ts b/src/components/input-number/input-number.e2e.ts index 2f38838ff9a..ff9779d8e49 100644 --- a/src/components/input-number/input-number.e2e.ts +++ b/src/components/input-number/input-number.e2e.ts @@ -1,20 +1,20 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; +import { KeyInput } from "puppeteer"; +import { html } from "../../../support/formatting"; import { defaults, disabled, focusable, formAssociated, + hidden, labelable, reflects, renders, - hidden, t9n } from "../../tests/commonTests"; -import { html } from "../../../support/formatting"; +import { getElementXY } from "../../tests/utils"; import { letterKeys, numberKeys } from "../../utils/key"; import { locales, numberStringFormatter } from "../../utils/locale"; -import { getElementXY } from "../../tests/utils"; -import { KeyInput } from "puppeteer"; describe("calcite-input-number", () => { const delayFor2UpdatesInMs = 200; diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts index ef3c95cf061..145b7fcec16 100644 --- a/src/components/input-number/input-number.stories.ts +++ b/src/components/input-number/input-number.stories.ts @@ -1,8 +1,8 @@ -import { select, text, number } from "@storybook/addon-knobs"; +import { number, select, text } from "@storybook/addon-knobs"; import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Input Number", diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx index ce049e67418..4c8d2319a09 100644 --- a/src/components/input-number/input-number.tsx +++ b/src/components/input-number/input-number.tsx @@ -1,4 +1,3 @@ -import { Position, Scale, Status } from "../interfaces"; import { Component, Element, @@ -19,10 +18,8 @@ import { isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom"; +import { Position, Scale, Status } from "../interfaces"; -import { CSS, SLOTS } from "./resources"; -import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "../input/interfaces"; -import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { connectForm, disconnectForm, @@ -30,20 +27,27 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { numberKeys } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - NumberingSystem, - numberStringFormatter, + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { + connectLocalized, defaultNumberingSystem, disconnectLocalized, - connectLocalized, - LocalizedComponent + LocalizedComponent, + NumberingSystem, + numberStringFormatter } from "../../utils/locale"; -import { numberKeys } from "../../utils/key"; -import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; -import { CSS_UTILITY } from "../../utils/resources"; import { decimalPlaces } from "../../utils/math"; +import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, disconnectMessages, @@ -51,13 +55,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "../input/interfaces"; import { InputNumberMessages } from "./assets/input-number/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, SLOTS } from "./resources"; /** * @slot action - A slot for positioning a button next to the component. diff --git a/src/components/input-text/input-text.e2e.ts b/src/components/input-text/input-text.e2e.ts index 94ff52474b1..121b326bd40 100644 --- a/src/components/input-text/input-text.e2e.ts +++ b/src/components/input-text/input-text.e2e.ts @@ -1,16 +1,16 @@ import { newE2EPage } from "@stencil/core/testing"; +import { html } from "../../../support/formatting"; import { defaults, disabled, focusable, formAssociated, + hidden, labelable, reflects, renders, - hidden, t9n } from "../../tests/commonTests"; -import { html } from "../../../support/formatting"; describe("calcite-input-text", () => { it("is labelable", async () => labelable("calcite-input-text")); diff --git a/src/components/input-text/input-text.stories.ts b/src/components/input-text/input-text.stories.ts index e51d672c215..dd36fdf314d 100644 --- a/src/components/input-text/input-text.stories.ts +++ b/src/components/input-text/input-text.stories.ts @@ -1,8 +1,8 @@ import { select, text } from "@storybook/addon-knobs"; import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Input Text", diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx index 0a9d202e6cf..813ca2c12d2 100644 --- a/src/components/input-text/input-text.tsx +++ b/src/components/input-text/input-text.tsx @@ -12,10 +12,6 @@ import { Watch } from "@stencil/core"; import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom"; -import { CSS, SLOTS } from "./resources"; -import { Position, Scale, Status } from "../interfaces"; -import { SetValueOrigin } from "../input/interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { connectForm, disconnectForm, @@ -23,10 +19,17 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { CSS_UTILITY } from "../../utils/resources"; -import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; +import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, disconnectMessages, @@ -34,13 +37,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { SetValueOrigin } from "../input/interfaces"; +import { Position, Scale, Status } from "../interfaces"; import { InputTextMessages } from "./assets/input-text/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, SLOTS } from "./resources"; /** * @slot action - A slot for positioning a button next to the component. diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx index 55ef15fe1aa..8df3058a772 100644 --- a/src/components/input-time-picker/input-time-picker.tsx +++ b/src/components/input-time-picker/input-time-picker.tsx @@ -12,11 +12,7 @@ import { VNode, Watch } from "@stencil/core"; -import { guid } from "../../utils/guid"; -import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time"; -import { Scale } from "../interfaces"; import { FloatingUIComponent, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui"; -import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { connectForm, disconnectForm, @@ -24,7 +20,16 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { numberKeys } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, @@ -32,14 +37,9 @@ import { NumberingSystem, numberStringFormatter } from "../../utils/locale"; +import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time"; +import { Scale } from "../interfaces"; import { TimePickerMessages } from "../time-picker/assets/time-picker/t9n"; -import { numberKeys } from "../../utils/key"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; @Component({ tag: "calcite-input-time-picker", diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index bb40f454d1f..0048733a2fe 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -1,4 +1,3 @@ -import { Scale, Status } from "../interfaces"; import { Component, Element, @@ -19,11 +18,8 @@ import { isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom"; +import { Scale, Status } from "../interfaces"; -import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources"; -import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces"; -import { Position } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { connectForm, disconnectForm, @@ -31,20 +27,27 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { numberKeys } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - NumberingSystem, + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { + connectLocalized, defaultNumberingSystem, - numberStringFormatter, disconnectLocalized, LocalizedComponent, - connectLocalized + NumberingSystem, + numberStringFormatter } from "../../utils/locale"; -import { numberKeys } from "../../utils/key"; -import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; -import { CSS_UTILITY } from "../../utils/resources"; import { decimalPlaces } from "../../utils/math"; +import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; import { createObserver } from "../../utils/observers"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, disconnectMessages, @@ -52,13 +55,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Position } from "../interfaces"; import { InputMessages } from "./assets/input/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces"; +import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources"; /** * @slot action - A slot for positioning a `calcite-button` next to the component. diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx index 56025b6150f..d686d6e0eb9 100644 --- a/src/components/label/label.tsx +++ b/src/components/label/label.tsx @@ -1,6 +1,6 @@ -import { Component, Element, Event, h, Prop, EventEmitter, VNode, Host } from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from "@stencil/core"; +import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label"; import { Alignment, Scale } from "../interfaces"; -import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label"; import { CSS } from "./resources"; /** diff --git a/src/components/link/link.e2e.ts b/src/components/link/link.e2e.ts index b75ce6081cc..e9a816a1d75 100644 --- a/src/components/link/link.e2e.ts +++ b/src/components/link/link.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, renders, hidden } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests"; describe("calcite-link", () => { it("renders", async () => renders("link", { display: "inline" })); diff --git a/src/components/link/link.stories.ts b/src/components/link/link.stories.ts index 02e866fbf8d..48d0029e9dc 100644 --- a/src/components/link/link.stories.ts +++ b/src/components/link/link.stories.ts @@ -1,9 +1,9 @@ -import { text, select } from "@storybook/addon-knobs"; +import { select, text } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; import * as icons from "../../../node_modules/@esri/calcite-ui-icons"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; // we can get all unique icon names from all size 16 non-filled icons. const iconNames = Object.keys(icons) diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index 5894dad5a70..bdb6d17cc01 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -1,14 +1,14 @@ import { Component, Element, h, Host, Listen, Method, Prop, VNode } from "@stencil/core"; import { focusElement, getElementDir } from "../../utils/dom"; -import { FlipContext } from "../interfaces"; -import { CSS_UTILITY } from "../../utils/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { CSS_UTILITY } from "../../utils/resources"; +import { FlipContext } from "../interfaces"; /** Any attributes placed on component will propagate to the rendered child */ /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */ diff --git a/src/components/list-item-group/list-item-group.tsx b/src/components/list-item-group/list-item-group.tsx index 382811c033d..fb68acff73e 100644 --- a/src/components/list-item-group/list-item-group.tsx +++ b/src/components/list-item-group/list-item-group.tsx @@ -1,8 +1,8 @@ -import { Component, Prop, h, VNode, Host, Element, State } from "@stencil/core"; +import { Component, Element, h, Host, Prop, State, VNode } from "@stencil/core"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { CSS } from "./resources"; import { MAX_COLUMNS } from "../list-item/resources"; import { getDepth } from "../list-item/utils"; +import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. */ diff --git a/src/components/list-item/list-item.e2e.ts b/src/components/list-item/list-item.e2e.ts index 6061856ba5d..0f2853682d4 100755 --- a/src/components/list-item/list-item.e2e.ts +++ b/src/components/list-item/list-item.e2e.ts @@ -1,6 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { hidden, renders, focusable, slots, disabled } from "../../tests/commonTests"; -import { defaults } from "../../tests/commonTests"; +import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; describe("calcite-list-item", () => { diff --git a/src/components/list-item/list-item.tsx b/src/components/list-item/list-item.tsx index af74ab5ffaf..307e440094f 100644 --- a/src/components/list-item/list-item.tsx +++ b/src/components/list-item/list-item.tsx @@ -1,32 +1,32 @@ import { Component, Element, - Prop, + Event, + EventEmitter, h, - VNode, Host, Method, - Event, - EventEmitter, - Watch, - State + Prop, + State, + VNode, + Watch } from "@stencil/core"; -import { SLOTS, CSS, ICONS } from "./resources"; import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { getDepth, getListItemChildren, updateListItemChildren } from "./utils"; -import { SelectionAppearance } from "../list/resources"; import { SelectionMode } from "../interfaces"; +import { SelectionAppearance } from "../list/resources"; +import { CSS, ICONS, SLOTS } from "./resources"; +import { getDepth, getListItemChildren, updateListItemChildren } from "./utils"; const focusMap = new Map(); const listSelector = "calcite-list"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; /** diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx index 973403db7b8..ffa4c8aca37 100755 --- a/src/components/list/list.tsx +++ b/src/components/list/list.tsx @@ -1,33 +1,33 @@ import { Component, Element, + Event, + EventEmitter, h, - VNode, - Prop, - Method, Listen, - Watch, + Method, + Prop, State, - Event, - EventEmitter + VNode, + Watch } from "@stencil/core"; -import { CSS, debounceTimeout, SelectionAppearance } from "./resources"; +import { debounce } from "lodash-es"; +import { toAriaBoolean } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { SelectionMode } from "../interfaces"; import { createObserver } from "../../utils/observers"; -import { getListItemChildren, updateListItemChildren } from "../list-item/utils"; -import { toAriaBoolean } from "../../utils/dom"; -import { debounce } from "lodash-es"; +import { SelectionMode } from "../interfaces"; import { ItemData } from "../list-item/interfaces"; import { MAX_COLUMNS } from "../list-item/resources"; +import { getListItemChildren, updateListItemChildren } from "../list-item/utils"; +import { CSS, debounceTimeout, SelectionAppearance } from "./resources"; const listItemSelector = "calcite-list-item"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; /** diff --git a/src/components/loader/loader.e2e.ts b/src/components/loader/loader.e2e.ts index a52326986b6..a4ba29a9b50 100644 --- a/src/components/loader/loader.e2e.ts +++ b/src/components/loader/loader.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { renders, hidden } from "../../tests/commonTests"; +import { hidden, renders } from "../../tests/commonTests"; describe("calcite-loader", () => { it("renders", async () => { diff --git a/src/components/loader/loader.stories.ts b/src/components/loader/loader.stories.ts index 5ad9c20551c..23372e2ecdb 100644 --- a/src/components/loader/loader.stories.ts +++ b/src/components/loader/loader.stories.ts @@ -1,7 +1,7 @@ -import { number, color, select } from "@storybook/addon-knobs"; -import { boolean, storyFilters } from "../../../.storybook/helpers"; -import readme from "./readme.md"; +import { color, number, select } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Loader", diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 6aaa12b8e16..cf0666462dc 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -12,30 +12,30 @@ import { VNode, Watch } from "@stencil/core"; -import { ensureId, focusFirstTabbable, getSlotted } from "../../utils/dom"; -import { Kind, Scale } from "../interfaces"; -import { CSS, ICONS, SLOTS } from "./resources"; -import { createObserver } from "../../utils/observers"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { OpenCloseComponent, onToggleOpenCloseComponent } from "../../utils/openCloseComponent"; +import { ensureId, focusFirstTabbable, getSlotted } from "../../utils/dom"; import { - FocusTrapComponent, - FocusTrap, - connectFocusTrap, activateFocusTrap, + connectFocusTrap, deactivateFocusTrap, + FocusTrap, + FocusTrapComponent, updateFocusTrapElements } from "../../utils/focusTrapComponent"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { createObserver } from "../../utils/observers"; +import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; +import { Kind, Scale } from "../interfaces"; +import { CSS, ICONS, SLOTS } from "./resources"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx index ff35a0227bc..5dfc627488b 100644 --- a/src/components/notice/notice.tsx +++ b/src/components/notice/notice.tsx @@ -10,15 +10,18 @@ import { VNode, Watch } from "@stencil/core"; -import { CSS, SLOTS } from "./resources"; -import { Kind, Scale, Width } from "../interfaces"; -import { KindIcons } from "../resources"; -import { getSlotted, setRequestedIcon } from "../../utils/dom"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted, setRequestedIcon } from "../../utils/dom"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -27,13 +30,10 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Kind, Scale, Width } from "../interfaces"; +import { KindIcons } from "../resources"; import { NoticeMessages } from "./assets/notice/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, SLOTS } from "./resources"; /** * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because diff --git a/src/components/option-group/option-group.tsx b/src/components/option-group/option-group.tsx index 73143440714..6eb031d36fb 100644 --- a/src/components/option-group/option-group.tsx +++ b/src/components/option-group/option-group.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop, VNode, Watch, Event, EventEmitter, Fragment } from "@stencil/core"; +import { Component, Event, EventEmitter, Fragment, h, Prop, VNode, Watch } from "@stencil/core"; /** * @slot - A slot for adding `calcite-option`s. diff --git a/src/components/option/option.tsx b/src/components/option/option.tsx index bdafce03e4f..babd4824d4d 100644 --- a/src/components/option/option.tsx +++ b/src/components/option/option.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop, VNode, Element, EventEmitter, Event, Watch } from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core"; import { createObserver } from "../../utils/observers"; @Component({ diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 7299d6ed164..2d343ef5260 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -3,24 +3,21 @@ import { Element, Event, EventEmitter, + Fragment, h, - Prop, Method, - VNode, - Fragment, + Prop, State, + VNode, Watch } from "@stencil/core"; -import { Scale } from "../interfaces"; import { connectLocalized, disconnectLocalized, LocalizedComponent, - numberStringFormatter, - NumberingSystem + NumberingSystem, + numberStringFormatter } from "../../utils/locale"; -import { CSS } from "./resources"; -import { PaginationMessages } from "./assets/pagination/t9n"; import { connectMessages, disconnectMessages, @@ -28,6 +25,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Scale } from "../interfaces"; +import { PaginationMessages } from "./assets/pagination/t9n"; +import { CSS } from "./resources"; const maxPagesDisplayed = 5; export interface PaginationDetail { diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts index 2bf46d06817..08e3494d827 100644 --- a/src/components/panel/panel.e2e.ts +++ b/src/components/panel/panel.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; const panelTemplate = (scrollable = false) => html`
diff --git a/src/components/panel/panel.stories.ts b/src/components/panel/panel.stories.ts index a91cbfd8a1d..7e5108dcfad 100644 --- a/src/components/panel/panel.stories.ts +++ b/src/components/panel/panel.stories.ts @@ -1,16 +1,16 @@ import { boolean, select, text } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; +import { ATTRIBUTES } from "../../../.storybook/resources"; import { + Attribute, Attributes, createComponentHTML as create, - Attribute, filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import { ATTRIBUTES } from "../../../.storybook/resources"; +import { html } from "../../../support/formatting"; import readme from "./readme.md"; import { SLOTS } from "./resources"; -import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Panel", diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 2389cd87bd6..4a9d9d016d3 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -3,26 +3,26 @@ import { Element, Event, EventEmitter, + Fragment, + h, Method, Prop, - h, - VNode, - Fragment, State, + VNode, Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS } from "./resources"; import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom"; -import { HeadingLevel, Heading } from "../functional/Heading"; -import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { createObserver } from "../../utils/observers"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { createObserver } from "../../utils/observers"; +import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; +import { Heading, HeadingLevel } from "../functional/Heading"; +import { CSS, ICONS, SLOTS } from "./resources"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { diff --git a/src/components/pick-list-group/pick-list-group.tsx b/src/components/pick-list-group/pick-list-group.tsx index ccc4dfd29c7..bd90559ca34 100644 --- a/src/components/pick-list-group/pick-list-group.tsx +++ b/src/components/pick-list-group/pick-list-group.tsx @@ -1,12 +1,12 @@ -import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core"; -import { CSS, SLOTS } from "./resources"; -import { getSlotted } from "../../utils/dom"; -import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading"; +import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; +import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding `calcite-pick-list-item` elements. diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx index 540583f588d..f1a9629942b 100644 --- a/src/components/pick-list-item/pick-list-item.tsx +++ b/src/components/pick-list-item/pick-list-item.tsx @@ -11,15 +11,19 @@ import { VNode, Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS } from "./resources"; -import { ICON_TYPES } from "../pick-list/resources"; -import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, @@ -28,13 +32,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { ICON_TYPES } from "../pick-list/resources"; import { PickListItemMessages } from "./assets/pick-list-item/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component. diff --git a/src/components/pick-list/pick-list.e2e.ts b/src/components/pick-list/pick-list.e2e.ts index 629cb46cb57..e93cabdfac0 100644 --- a/src/components/pick-list/pick-list.e2e.ts +++ b/src/components/pick-list/pick-list.e2e.ts @@ -1,17 +1,17 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; +import { html } from "../../../support/formatting"; +import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; +import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources"; import { ICON_TYPES } from "./resources"; -import { accessible, hidden, renders, defaults } from "../../tests/commonTests"; import { - selectionAndDeselection, + disabling, filterBehavior, - loadingState, - keyboardNavigation, - itemRemoval, focusing, - disabling + itemRemoval, + keyboardNavigation, + loadingState, + selectionAndDeselection } from "./shared-list-tests"; -import { html } from "../../../support/formatting"; -import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources"; describe("calcite-pick-list", () => { it("has property defaults", async () => diff --git a/src/components/pick-list/pick-list.stories.ts b/src/components/pick-list/pick-list.stories.ts index 196458429b7..19acf408937 100644 --- a/src/components/pick-list/pick-list.stories.ts +++ b/src/components/pick-list/pick-list.stories.ts @@ -1,16 +1,16 @@ import { boolean, text } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; import { Attribute, - filterComponentAttributes, Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import itemReadme from "../pick-list-item/readme.md"; -import groupReadme from "../pick-list-group/readme.md"; import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; +import groupReadme from "../pick-list-group/readme.md"; +import itemReadme from "../pick-list-item/readme.md"; +import readme from "./readme.md"; export default { title: "Components/Pick List", diff --git a/src/components/pick-list/pick-list.tsx b/src/components/pick-list/pick-list.tsx index 46439047ade..5aac45b23d5 100644 --- a/src/components/pick-list/pick-list.tsx +++ b/src/components/pick-list/pick-list.tsx @@ -3,46 +3,46 @@ import { Element, Event, EventEmitter, + h, Listen, Method, Prop, State, - h, VNode } from "@stencil/core"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { createObserver } from "../../utils/observers"; +import { HeadingLevel } from "../functional/Heading"; import { ICON_TYPES } from "./resources"; import { - ListFocusId, - calciteListItemChangeHandler, calciteInternalListItemValueChangeHandler, + calciteListFocusOutHandler, + calciteListItemChangeHandler, cleanUpObserver, - deselectSiblingItems, deselectRemovedItems, + deselectSiblingItems, getItemData, handleFilter, handleFilterEvent, handleInitialFilter, - calciteListFocusOutHandler, initialize, initializeObserver, + ItemData, + keyDownHandler, + ListFocusId, mutationObserverCallback, + removeItem, selectSiblings, - setUpItems, - keyDownHandler, setFocus, - ItemData, - removeItem + setUpItems } from "./shared-list-logic"; import List from "./shared-list-render"; -import { HeadingLevel } from "../functional/Heading"; -import { createObserver } from "../../utils/observers"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; /** * @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list. diff --git a/src/components/pick-list/shared-list-logic.ts b/src/components/pick-list/shared-list-logic.ts index 470f9d4fbd2..601822d6233 100644 --- a/src/components/pick-list/shared-list-logic.ts +++ b/src/components/pick-list/shared-list-logic.ts @@ -1,9 +1,9 @@ -import { PickList } from "./pick-list"; -import { ValueList } from "../value-list/value-list"; import { debounce } from "lodash-es"; -import { focusElement, getSlotted } from "../../utils/dom"; import { getRoundRobinIndex } from "../../utils/array"; +import { focusElement, getSlotted } from "../../utils/dom"; import { SLOTS } from "../pick-list-group/resources"; +import { ValueList } from "../value-list/value-list"; +import { PickList } from "./pick-list"; type Lists = PickList | ValueList; type ListItemElement = T extends PickList ? HTMLCalcitePickListItemElement : HTMLCalciteValueListItemElement; diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index 0204913b484..2d0608c7fe7 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/src/components/pick-list/shared-list-tests.ts @@ -1,8 +1,8 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; -import { disabled, focusable } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources"; +import { disabled, focusable } from "../../tests/commonTests"; import { selectText } from "../../tests/utils"; +import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources"; type ListType = "pick" | "value"; type ListElement = HTMLCalcitePickListElement | HTMLCalciteValueListElement; diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 48f75483206..ed0bef27a05 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -4,49 +4,48 @@ import { Event, EventEmitter, forceUpdate, + h, Host, Method, Prop, State, - Watch, - h, - VNode + VNode, + Watch } from "@stencil/core"; -import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, defaultPopoverPlacement } from "./resources"; import { - FloatingCSS, - OverlayPositioning, - FloatingUIComponent, connectFloatingUI, + defaultOffsetDistance, disconnectFloatingUI, - LogicalPlacement, EffectivePlacement, - defaultOffsetDistance, filterComputedPlacements, + FloatingCSS, + FloatingUIComponent, + LogicalPlacement, + OverlayPositioning, ReferenceElement, reposition, updateAfterClose } from "../../utils/floating-ui"; import { - FocusTrapComponent, - FocusTrap, - connectFocusTrap, activateFocusTrap, + connectFocusTrap, deactivateFocusTrap, + FocusTrap, + FocusTrapComponent, updateFocusTrapElements } from "../../utils/focusTrapComponent"; +import { ARIA_CONTROLS, ARIA_EXPANDED, CSS, defaultPopoverPlacement } from "./resources"; -import { guid } from "../../utils/guid"; import { focusFirstTabbable, queryElementRoots, toAriaBoolean } from "../../utils/dom"; +import { guid } from "../../utils/guid"; import { - OpenCloseComponent, connectOpenCloseComponent, - disconnectOpenCloseComponent + disconnectOpenCloseComponent, + OpenCloseComponent } from "../../utils/openCloseComponent"; -import { HeadingLevel, Heading } from "../functional/Heading"; +import { Heading, HeadingLevel } from "../functional/Heading"; import { Scale } from "../interfaces"; -import PopoverManager from "./PopoverManager"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -56,12 +55,13 @@ import { updateMessages } from "../../utils/t9n"; import { PopoverMessages } from "./assets/popover/t9n"; +import PopoverManager from "./PopoverManager"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; const manager = new PopoverManager(); diff --git a/src/components/progress/progress.e2e.ts b/src/components/progress/progress.e2e.ts index ece0f0d3547..76dd99f784e 100644 --- a/src/components/progress/progress.e2e.ts +++ b/src/components/progress/progress.e2e.ts @@ -1,4 +1,4 @@ -import { accessible, renders, hidden } from "../../tests/commonTests"; +import { accessible, hidden, renders } from "../../tests/commonTests"; describe("calcite-progress", () => { it("renders", () => renders("calcite-progress", { display: "block" })); diff --git a/src/components/progress/progress.stories.ts b/src/components/progress/progress.stories.ts index f26d0b2c934..822ef4d84e2 100644 --- a/src/components/progress/progress.stories.ts +++ b/src/components/progress/progress.stories.ts @@ -1,9 +1,9 @@ -import { select, number, text } from "@storybook/addon-knobs"; +import { number, select, text } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; +import readme from "./readme.md"; export default { title: "Components/Progress", diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx index 7cae75ccdca..0bac67fa7bd 100644 --- a/src/components/radio-button-group/radio-button-group.tsx +++ b/src/components/radio-button-group/radio-button-group.tsx @@ -1,14 +1,14 @@ import { Component, - Host, - h, Element, - Prop, - Watch, - VNode, Event, EventEmitter, - Listen + h, + Host, + Listen, + Prop, + VNode, + Watch } from "@stencil/core"; import { createObserver } from "../../utils/observers"; import { Layout, Scale } from "../interfaces"; diff --git a/src/components/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button.stories.ts index ca42d3a2f8a..cf8c578fb29 100644 --- a/src/components/radio-button/radio-button.stories.ts +++ b/src/components/radio-button/radio-button.stories.ts @@ -1,8 +1,8 @@ import { select, text } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Radio/Radio Button", diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index 98df782329b..3a093d2764f 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -11,25 +11,25 @@ import { VNode, Watch } from "@stencil/core"; -import { guid } from "../../utils/guid"; +import { getRoundRobinIndex } from "../../utils/array"; import { focusElement, getElementDir, toAriaBoolean } from "../../utils/dom"; -import { Scale } from "../interfaces"; -import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - HiddenFormInputSlot, + CheckableFormComponent, connectForm, disconnectForm, - CheckableFormComponent + HiddenFormInputSlot } from "../../utils/form"; -import { CSS } from "./resources"; -import { getRoundRobinIndex } from "../../utils/array"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Scale } from "../interfaces"; +import { CSS } from "./resources"; @Component({ tag: "calcite-radio-button", diff --git a/src/components/rating/function/star.tsx b/src/components/rating/function/star.tsx index fac732c8a18..928aa56f8e8 100644 --- a/src/components/rating/function/star.tsx +++ b/src/components/rating/function/star.tsx @@ -1,4 +1,4 @@ -import { h, FunctionalComponent } from "@stencil/core"; +import { FunctionalComponent, h } from "@stencil/core"; import { StarIconProps } from "../interfaces"; diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts index 5245fadbc62..7cb81b2bd45 100644 --- a/src/components/rating/rating.e2e.ts +++ b/src/components/rating/rating.e2e.ts @@ -1,12 +1,12 @@ import { newE2EPage } from "@stencil/core/testing"; import { - renders, accessible, + disabled, focusable, - labelable, formAssociated, - disabled, hidden, + labelable, + renders, t9n } from "../../tests/commonTests"; diff --git a/src/components/rating/rating.stories.ts b/src/components/rating/rating.stories.ts index f206a9e5c9f..6bef58a3a54 100644 --- a/src/components/rating/rating.stories.ts +++ b/src/components/rating/rating.stories.ts @@ -1,8 +1,8 @@ -import { number, select, text } from "@storybook/addon-knobs"; +import { number, select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Rating", diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx index b7ccc0db19a..40a0d608e55 100644 --- a/src/components/rating/rating.tsx +++ b/src/components/rating/rating.tsx @@ -4,17 +4,22 @@ import { Event, EventEmitter, h, + Host, Method, Prop, State, - Host, Watch } from "@stencil/core"; -import { guid } from "../../utils/guid"; -import { Scale } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -23,13 +28,8 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Scale } from "../interfaces"; import { RatingMessages } from "./assets/rating/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; import { StarIcon } from "./function/star"; import { Star } from "./interfaces"; diff --git a/src/components/scrim/scrim.stories.ts b/src/components/scrim/scrim.stories.ts index 138c266fe73..e9a4ebd161a 100644 --- a/src/components/scrim/scrim.stories.ts +++ b/src/components/scrim/scrim.stories.ts @@ -1,7 +1,7 @@ import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Scrim", diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx index b18efce8685..a560a145bc5 100644 --- a/src/components/scrim/scrim.tsx +++ b/src/components/scrim/scrim.tsx @@ -1,5 +1,4 @@ -import { Component, Element, Prop, h, VNode, Watch, State } from "@stencil/core"; -import { CSS } from "./resources"; +import { Component, Element, h, Prop, State, VNode, Watch } from "@stencil/core"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -9,6 +8,7 @@ import { updateMessages } from "../../utils/t9n"; import { ScrimMessages } from "./assets/scrim/t9n"; +import { CSS } from "./resources"; /** * @slot - A slot for adding custom content, primarily loading information. diff --git a/src/components/segmented-control-item/segmented-control-item.tsx b/src/components/segmented-control-item/segmented-control-item.tsx index 50ed445ff21..e8d9eecbde3 100644 --- a/src/components/segmented-control-item/segmented-control-item.tsx +++ b/src/components/segmented-control-item/segmented-control-item.tsx @@ -1,17 +1,17 @@ import { Component, - h, - Prop, Element, Event, EventEmitter, + h, Host, - Watch, - VNode + Prop, + VNode, + Watch } from "@stencil/core"; import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { Appearance, Layout, Scale } from "../interfaces"; -import { SLOTS, CSS } from "./resources"; +import { CSS, SLOTS } from "./resources"; @Component({ tag: "calcite-segmented-control-item", diff --git a/src/components/segmented-control/segmented-control.e2e.ts b/src/components/segmented-control/segmented-control.e2e.ts index ae89ebab15d..c7f5fd085bf 100644 --- a/src/components/segmented-control/segmented-control.e2e.ts +++ b/src/components/segmented-control/segmented-control.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { disabled, focusable, formAssociated, labelable, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { disabled, focusable, formAssociated, hidden, labelable, renders } from "../../tests/commonTests"; describe("calcite-segmented-control", () => { it("renders", () => renders("calcite-segmented-control", { display: "flex" })); diff --git a/src/components/segmented-control/segmented-control.stories.ts b/src/components/segmented-control/segmented-control.stories.ts index 0499cd3c4f3..357bd8211eb 100644 --- a/src/components/segmented-control/segmented-control.stories.ts +++ b/src/components/segmented-control/segmented-control.stories.ts @@ -1,9 +1,9 @@ import { select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { themesDarkDefault } from "../../../.storybook/utils"; -import readme1 from "./readme.md"; -import readme2 from "../segmented-control-item/readme.md"; import { html } from "../../../support/formatting"; +import readme2 from "../segmented-control-item/readme.md"; +import readme1 from "./readme.md"; export default { title: "Components/Controls/Radio/Segmented Control", diff --git a/src/components/segmented-control/segmented-control.tsx b/src/components/segmented-control/segmented-control.tsx index 0d0414c843d..d6b25c27eae 100644 --- a/src/components/segmented-control/segmented-control.tsx +++ b/src/components/segmented-control/segmented-control.tsx @@ -14,8 +14,6 @@ import { } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; -import { Appearance, Layout, Scale, Width } from "../interfaces"; -import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { afterConnectDefaultValueSet, connectForm, @@ -24,12 +22,14 @@ import { HiddenFormInputSlot } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Appearance, Layout, Scale, Width } from "../interfaces"; /** * @slot - A slot for adding `calcite-segmented-control-item`s. diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index f3f51ddbf59..37682e378fa 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -12,8 +12,6 @@ import { Watch } from "@stencil/core"; import { focusElement } from "../../utils/dom"; -import { Scale, Width } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { afterConnectDefaultValueSet, connectForm, @@ -21,15 +19,17 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { CSS } from "./resources"; -import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { createObserver } from "../../utils/observers"; +import { Scale, Width } from "../interfaces"; +import { CSS } from "./resources"; type OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement; type NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement; diff --git a/src/components/shell-center-row/shell-center-row.e2e.ts b/src/components/shell-center-row/shell-center-row.e2e.ts index ce6a16559a2..2d08914cee0 100644 --- a/src/components/shell-center-row/shell-center-row.e2e.ts +++ b/src/components/shell-center-row/shell-center-row.e2e.ts @@ -1,7 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; -import { CSS, SLOTS } from "./resources"; import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests"; +import { CSS, SLOTS } from "./resources"; describe("calcite-shell-center-row", () => { it("renders", async () => renders("calcite-shell-center-row", { display: "flex" })); diff --git a/src/components/shell-center-row/shell-center-row.tsx b/src/components/shell-center-row/shell-center-row.tsx index 92637b98f29..e301eb3f9e5 100644 --- a/src/components/shell-center-row/shell-center-row.tsx +++ b/src/components/shell-center-row/shell-center-row.tsx @@ -1,12 +1,12 @@ -import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core"; -import { CSS, SLOTS } from "./resources"; -import { Position, Scale } from "../interfaces"; -import { getSlotted } from "../../utils/dom"; +import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; +import { Position, Scale } from "../interfaces"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding content to the `calcite-shell-panel`. diff --git a/src/components/shell-panel/shell-panel.e2e.ts b/src/components/shell-panel/shell-panel.e2e.ts index 02ad64eba6c..d51eafa1ea2 100644 --- a/src/components/shell-panel/shell-panel.e2e.ts +++ b/src/components/shell-panel/shell-panel.e2e.ts @@ -1,8 +1,8 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing"; -import { CSS, SLOTS } from "./resources"; import { accessible, defaults, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { getElementXY } from "../../tests/utils"; +import { CSS, SLOTS } from "./resources"; describe("calcite-shell-panel", () => { it("renders", async () => renders("calcite-shell-panel", { display: "flex" })); diff --git a/src/components/shell-panel/shell-panel.tsx b/src/components/shell-panel/shell-panel.tsx index 35ced02b56c..6534458c835 100755 --- a/src/components/shell-panel/shell-panel.tsx +++ b/src/components/shell-panel/shell-panel.tsx @@ -1,14 +1,12 @@ -import { Component, Element, Prop, h, VNode, State, forceUpdate, Watch } from "@stencil/core"; -import { CSS, SLOTS } from "./resources"; -import { Position, Scale } from "../interfaces"; -import { getSlotted, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; -import { clamp } from "../../utils/math"; +import { Component, Element, forceUpdate, h, Prop, State, VNode, Watch } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getElementDir, getSlotted, isPrimaryPointerButton } from "../../utils/dom"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { clamp } from "../../utils/math"; import { connectMessages, disconnectMessages, @@ -16,7 +14,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { Position, Scale } from "../interfaces"; import { ShellPanelMessages } from "./assets/shell-panel/t9n"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. diff --git a/src/components/shell/shell.stories.ts b/src/components/shell/shell.stories.ts index 4d34f47e0fc..c3126da3b40 100644 --- a/src/components/shell/shell.stories.ts +++ b/src/components/shell/shell.stories.ts @@ -1,17 +1,17 @@ import { boolean, select } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; +import { placeholderImage } from "../../../.storybook/placeholderImage"; +import { ATTRIBUTES } from "../../../.storybook/resources"; import { - filterComponentAttributes, Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import { placeholderImage } from "../../../.storybook/placeholderImage"; -import { ATTRIBUTES } from "../../../.storybook/resources"; -import readme from "./readme.md"; -import panelReadme from "../shell-panel/readme.md"; -import centerRowReadme from "../shell-center-row/readme.md"; import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; +import centerRowReadme from "../shell-center-row/readme.md"; +import panelReadme from "../shell-panel/readme.md"; +import readme from "./readme.md"; export default { title: "Components/Shell", diff --git a/src/components/shell/shell.tsx b/src/components/shell/shell.tsx index be99adb5e09..71c0aebd4bd 100755 --- a/src/components/shell/shell.tsx +++ b/src/components/shell/shell.tsx @@ -1,11 +1,11 @@ -import { Component, Element, Prop, h, VNode, Fragment, State } from "@stencil/core"; -import { CSS, SLOTS } from "./resources"; -import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom"; +import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom"; +import { CSS, SLOTS } from "./resources"; /** * @slot - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. diff --git a/src/components/slider/slider.e2e.ts b/src/components/slider/slider.e2e.ts index 8387482e1ba..64ac95a6b55 100644 --- a/src/components/slider/slider.e2e.ts +++ b/src/components/slider/slider.e2e.ts @@ -1,7 +1,7 @@ -import { E2EPage, newE2EPage, E2EElement } from "@stencil/core/testing"; -import { defaults, disabled, formAssociated, labelable, renders, hidden } from "../../tests/commonTests"; -import { getElementXY } from "../../tests/utils"; +import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; +import { defaults, disabled, formAssociated, hidden, labelable, renders } from "../../tests/commonTests"; +import { getElementXY } from "../../tests/utils"; import { CSS } from "./resources"; describe("calcite-slider", () => { diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts index ac9fd9955c6..29d214f5a42 100644 --- a/src/components/slider/slider.stories.ts +++ b/src/components/slider/slider.stories.ts @@ -1,8 +1,8 @@ -import { text, number, array, boolean as booleanFn, select } from "@storybook/addon-knobs"; +import { array, boolean as booleanFn, number, select, text } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Slider", diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index e12b31312f6..1de7f60664e 100644 --- a/src/components/slider/slider.tsx +++ b/src/components/slider/slider.tsx @@ -14,11 +14,7 @@ import { } from "@stencil/core"; import { guid } from "../../utils/guid"; -import { ColorStop, DataSeries } from "../graph/interfaces"; import { intersects, isPrimaryPointerButton } from "../../utils/dom"; -import { clamp, decimalPlaces } from "../../utils/math"; -import { Scale } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label"; import { afterConnectDefaultValueSet, connectForm, @@ -28,20 +24,24 @@ import { } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; +import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; +import { + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent, - numberStringFormatter, - NumberingSystem + NumberingSystem, + numberStringFormatter } from "../../utils/locale"; +import { clamp, decimalPlaces } from "../../utils/math"; +import { ColorStop, DataSeries } from "../graph/interfaces"; +import { Scale } from "../interfaces"; import { CSS } from "./resources"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue"; type SetValueProperty = Exclude; diff --git a/src/components/sortable-list/sortable-list.tsx b/src/components/sortable-list/sortable-list.tsx index 964828db29f..d9af04ff0d7 100644 --- a/src/components/sortable-list/sortable-list.tsx +++ b/src/components/sortable-list/sortable-list.tsx @@ -1,20 +1,20 @@ -import Sortable from "sortablejs"; import { Component, Element, Event, EventEmitter, + h, Listen, Prop, State, - h, VNode } from "@stencil/core"; +import Sortable from "sortablejs"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; +import { HandleNudge } from "../handle/interfaces"; import { Layout } from "../interfaces"; import { CSS } from "./resources"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { HandleNudge } from "../handle/interfaces"; /** * @slot - A slot for adding sortable items. diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx index 27c7b2e7de4..449d424f97a 100644 --- a/src/components/split-button/split-button.tsx +++ b/src/components/split-button/split-button.tsx @@ -1,9 +1,9 @@ import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core"; -import { CSS } from "./resources"; -import { DropdownIconType } from "../button/interfaces"; -import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { OverlayPositioning } from "../../utils/floating-ui"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { DropdownIconType } from "../button/interfaces"; +import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; +import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-dropdown` content. diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx index 07ffde6f514..81db674fe4d 100644 --- a/src/components/stepper/stepper.tsx +++ b/src/components/stepper/stepper.tsx @@ -10,10 +10,10 @@ import { VNode } from "@stencil/core"; +import { focusElementInGroup } from "../../utils/dom"; +import { NumberingSystem } from "../../utils/locale"; import { Layout, Scale } from "../interfaces"; import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces"; -import { NumberingSystem } from "../../utils/locale"; -import { focusElementInGroup } from "../../utils/dom"; /** * @slot - A slot for adding `calcite-stepper-item` elements. diff --git a/src/components/switch/switch.e2e.ts b/src/components/switch/switch.e2e.ts index 2a6864020ef..924cec1cb94 100644 --- a/src/components/switch/switch.e2e.ts +++ b/src/components/switch/switch.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, formAssociated, HYDRATED_ATTR, labelable, hidden } from "../../tests/commonTests"; +import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests"; describe("calcite-switch", () => { it("renders with correct default attributes", async () => { diff --git a/src/components/switch/switch.stories.ts b/src/components/switch/switch.stories.ts index 49facf69b86..b6b8ffd813f 100644 --- a/src/components/switch/switch.stories.ts +++ b/src/components/switch/switch.stories.ts @@ -1,8 +1,8 @@ import { select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; -import readme from "./readme.md"; -import { html } from "../../../support/formatting"; import { modesDarkDefault } from "../../../.storybook/utils"; +import { html } from "../../../support/formatting"; +import readme from "./readme.md"; export default { title: "Components/Controls/Switch", diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 619dbca15ac..8b8ae6647af 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -10,22 +10,22 @@ import { VNode } from "@stencil/core"; import { focusElement, toAriaBoolean } from "../../utils/dom"; -import { Scale } from "../interfaces"; -import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label"; import { + CheckableFormComponent, connectForm, disconnectForm, - CheckableFormComponent, HiddenFormInputSlot } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; +import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Scale } from "../interfaces"; @Component({ tag: "calcite-switch", diff --git a/src/components/tab-nav/tab-nav.tsx b/src/components/tab-nav/tab-nav.tsx index bd7d40048f2..ea968484428 100644 --- a/src/components/tab-nav/tab-nav.tsx +++ b/src/components/tab-nav/tab-nav.tsx @@ -11,17 +11,16 @@ import { VNode, Watch } from "@stencil/core"; -import { TabChangeEventDetail } from "../tab/interfaces"; import { - getElementDir, filterDirectChildren, focusElementInGroup, - FocusElementInGroupDestination + FocusElementInGroupDestination, + getElementDir } from "../../utils/dom"; -import { TabID, TabLayout } from "../tabs/interfaces"; -import { TabPosition } from "../tabs/interfaces"; -import { Scale } from "../interfaces"; import { createObserver } from "../../utils/observers"; +import { Scale } from "../interfaces"; +import { TabChangeEventDetail } from "../tab/interfaces"; +import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; /** * @slot - A slot for adding `calcite-tab-title`s. diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx index f99b52bd962..5c7f9d028a1 100644 --- a/src/components/tab-title/tab-title.tsx +++ b/src/components/tab-title/tab-title.tsx @@ -13,13 +13,13 @@ import { VNode, Watch } from "@stencil/core"; -import { TabChangeEventDetail } from "../tab/interfaces"; -import { guid } from "../../utils/guid"; import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom"; -import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; -import { FlipContext, Scale } from "../interfaces"; -import { createObserver } from "../../utils/observers"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { createObserver } from "../../utils/observers"; +import { FlipContext, Scale } from "../interfaces"; +import { TabChangeEventDetail } from "../tab/interfaces"; +import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; /** * @slot - A slot for adding text. diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx index 246b4ffd735..9dc51a8966b 100644 --- a/src/components/tab/tab.tsx +++ b/src/components/tab/tab.tsx @@ -1,20 +1,20 @@ import { Component, - Prop, Element, - Listen, - Method, Event, EventEmitter, h, - State, Host, + Listen, + Method, + Prop, + State, VNode } from "@stencil/core"; -import { TabChangeEventDetail } from "./interfaces"; -import { guid } from "../../utils/guid"; import { nodeListToArray } from "../../utils/dom"; +import { guid } from "../../utils/guid"; import { Scale } from "../interfaces"; +import { TabChangeEventDetail } from "./interfaces"; /** * @slot - A slot for adding custom content. diff --git a/src/components/tabs/tabs.e2e.ts b/src/components/tabs/tabs.e2e.ts index 761047c5858..ab69589b364 100644 --- a/src/components/tabs/tabs.e2e.ts +++ b/src/components/tabs/tabs.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, defaults, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; describe("calcite-tabs", () => { const tabsContent = ` diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts index 477c427e514..5f52d38c1bc 100644 --- a/src/components/tabs/tabs.stories.ts +++ b/src/components/tabs/tabs.stories.ts @@ -1,12 +1,12 @@ -import { select, optionsKnob } from "@storybook/addon-knobs"; +import { optionsKnob, select } from "@storybook/addon-knobs"; import { iconNames, storyFilters } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; -import readme1 from "./readme.md"; -import readme2 from "../tab/readme.md"; +import { modesDarkDefault } from "../../../.storybook/utils"; +import { html } from "../../../support/formatting"; import readme3 from "../tab-nav/readme.md"; import readme4 from "../tab-title/readme.md"; -import { html } from "../../../support/formatting"; +import readme2 from "../tab/readme.md"; +import readme1 from "./readme.md"; export default { title: "Components/Tabs", diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx index 650266eaebc..379cdb02bf1 100644 --- a/src/components/tabs/tabs.tsx +++ b/src/components/tabs/tabs.tsx @@ -1,6 +1,6 @@ -import { Component, Prop, h, Element, Listen, State, VNode, Fragment } from "@stencil/core"; -import { TabLayout, TabPosition } from "./interfaces"; +import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from "@stencil/core"; import { Scale } from "../interfaces"; +import { TabLayout, TabPosition } from "./interfaces"; import { SLOTS } from "./resources"; /** diff --git a/src/components/tile-select-group/tile-select-group.tsx b/src/components/tile-select-group/tile-select-group.tsx index ceeca3128a4..23d21620f40 100644 --- a/src/components/tile-select-group/tile-select-group.tsx +++ b/src/components/tile-select-group/tile-select-group.tsx @@ -1,6 +1,6 @@ -import { Component, h, VNode, Prop, Element } from "@stencil/core"; -import { TileSelectGroupLayout } from "./interfaces"; +import { Component, Element, h, Prop, VNode } from "@stencil/core"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { TileSelectGroupLayout } from "./interfaces"; /** * @slot - A slot for adding `calcite-tile-select` elements. diff --git a/src/components/tile-select/tile-select.tsx b/src/components/tile-select/tile-select.tsx index 783714d4eab..f140cc63a4b 100644 --- a/src/components/tile-select/tile-select.tsx +++ b/src/components/tile-select/tile-select.tsx @@ -4,24 +4,24 @@ import { Event, EventEmitter, h, - Prop, Listen, - VNode, - Watch, + Method, + Prop, State, - Method + VNode, + Watch } from "@stencil/core"; -import { Alignment, Width } from "../interfaces"; -import { TileSelectType } from "./interfaces"; import { guid } from "../../utils/guid"; -import { CSS } from "./resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { Alignment, Width } from "../interfaces"; +import { TileSelectType } from "./interfaces"; +import { CSS } from "./resources"; /** * @slot - A slot for adding custom content. diff --git a/src/components/tile/tile.tsx b/src/components/tile/tile.tsx index 3cb8c6baa0e..a116b65240f 100644 --- a/src/components/tile/tile.tsx +++ b/src/components/tile/tile.tsx @@ -1,12 +1,12 @@ import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core"; -import { SLOTS } from "./resources"; -import { getSlotted } from "../../utils/dom"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { SLOTS } from "./resources"; /** * @slot content-start - A slot for adding non-actionable elements before the component's content. diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts index 725128258a9..aad3cee0a62 100644 --- a/src/components/time-picker/time-picker.e2e.ts +++ b/src/components/time-picker/time-picker.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, renders, hidden, t9n } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests"; import { formatTimePart } from "../../utils/time"; import { CSS } from "./resources"; diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx index 534b589f238..aa25f3c0388 100644 --- a/src/components/time-picker/time-picker.tsx +++ b/src/components/time-picker/time-picker.tsx @@ -11,10 +11,23 @@ import { VNode, Watch } from "@stencil/core"; -import { Scale } from "../interfaces"; import { isActivationKey, numberKeys } from "../../utils/key"; import { isValidNumber } from "../../utils/number"; +import { Scale } from "../interfaces"; +import { + connectLocalized, + disconnectLocalized, + LocalizedComponent, + NumberingSystem +} from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; import { formatTimePart, getLocaleHourCycle, @@ -30,27 +43,14 @@ import { parseTimeString, TimePart } from "../../utils/time"; -import { CSS } from "./resources"; -import { - connectLocalized, - disconnectLocalized, - LocalizedComponent, - NumberingSystem -} from "../../utils/locale"; import { TimePickerMessages } from "./assets/time-picker/t9n"; -import { - connectMessages, - disconnectMessages, - setUpMessages, - T9nComponent, - updateMessages -} from "../../utils/t9n"; +import { CSS } from "./resources"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; function capitalize(str: string): string { diff --git a/src/components/tip-group/tip-group.tsx b/src/components/tip-group/tip-group.tsx index 6f3dc656b1a..4b390aeee7e 100644 --- a/src/components/tip-group/tip-group.tsx +++ b/src/components/tip-group/tip-group.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, VNode } from "@stencil/core"; +import { Component, h, Prop, VNode } from "@stencil/core"; /** * @slot - A slot for adding `calcite-tip`s. diff --git a/src/components/tip-manager/tip-manager.e2e.ts b/src/components/tip-manager/tip-manager.e2e.ts index c259747cccf..71c47f99c49 100644 --- a/src/components/tip-manager/tip-manager.e2e.ts +++ b/src/components/tip-manager/tip-manager.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; +import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests"; import { CSS, TEXT } from "./resources"; -import { accessible, defaults, renders, hidden, t9n } from "../../tests/commonTests"; describe("calcite-tip-manager", () => { it("renders", async () => renders("calcite-tip-manager", { display: "block" })); diff --git a/src/components/tip-manager/tip-manager.stories.ts b/src/components/tip-manager/tip-manager.stories.ts index a81b18c9625..6d378c28d2f 100644 --- a/src/components/tip-manager/tip-manager.stories.ts +++ b/src/components/tip-manager/tip-manager.stories.ts @@ -1,15 +1,15 @@ import { boolean } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; +import { placeholderImage } from "../../../.storybook/placeholderImage"; import { Attribute, - filterComponentAttributes, Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; import { html } from "../../../support/formatting"; -import { placeholderImage } from "../../../.storybook/placeholderImage"; -import { storyFilters } from "../../../.storybook/helpers"; +import readme from "./readme.md"; export default { title: "Components/Tips/Tip Manager", diff --git a/src/components/tip-manager/tip-manager.tsx b/src/components/tip-manager/tip-manager.tsx index cfbada1528d..4f7201821fd 100644 --- a/src/components/tip-manager/tip-manager.tsx +++ b/src/components/tip-manager/tip-manager.tsx @@ -3,25 +3,25 @@ import { Element, Event, EventEmitter, + h, Method, Prop, State, - Watch, - h, - VNode + VNode, + Watch } from "@stencil/core"; -import { CSS, ICONS } from "./resources"; import { getElementDir, toAriaBoolean } from "../../utils/dom"; -import { HeadingLevel, Heading } from "../functional/Heading"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; -import { TipManagerMessages } from "./assets/tip-manager/t9n"; import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { Heading, HeadingLevel } from "../functional/Heading"; +import { TipManagerMessages } from "./assets/tip-manager/t9n"; +import { CSS, ICONS } from "./resources"; /** * @slot - A slot for adding `calcite-tip`s. diff --git a/src/components/tip/tip.tsx b/src/components/tip/tip.tsx index 2266708607e..4d0f08a163a 100644 --- a/src/components/tip/tip.tsx +++ b/src/components/tip/tip.tsx @@ -3,21 +3,19 @@ import { Element, Event, EventEmitter, - Prop, + Fragment, h, + Prop, + State, VNode, - Fragment, - Watch, - State + Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS } from "./resources"; -import { getSlotted } from "../../utils/dom"; -import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -26,7 +24,9 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; +import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading"; import { TipMessages } from "./assets/tip/t9n"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding text and a hyperlink. diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index b1848267b86..d7217198200 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -1,36 +1,36 @@ import { Component, Element, + Event, + EventEmitter, + h, Host, Method, Prop, State, - Watch, - h, VNode, - Event, - EventEmitter + Watch } from "@stencil/core"; -import { CSS, ARIA_DESCRIBED_BY } from "./resources"; -import { guid } from "../../utils/guid"; +import { queryElementRoots, toAriaBoolean } from "../../utils/dom"; import { - OverlayPositioning, - FloatingUIComponent, connectFloatingUI, + defaultOffsetDistance, disconnectFloatingUI, + FloatingCSS, + FloatingUIComponent, LogicalPlacement, - defaultOffsetDistance, + OverlayPositioning, ReferenceElement, reposition, - FloatingCSS, updateAfterClose } from "../../utils/floating-ui"; -import { queryElementRoots, toAriaBoolean } from "../../utils/dom"; +import { guid } from "../../utils/guid"; import { - OpenCloseComponent, connectOpenCloseComponent, - disconnectOpenCloseComponent + disconnectOpenCloseComponent, + OpenCloseComponent } from "../../utils/openCloseComponent"; +import { ARIA_DESCRIBED_BY, CSS } from "./resources"; import TooltipManager from "./TooltipManager"; diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx index 3d0c6c7e058..682bbe186e2 100644 --- a/src/components/tree-item/tree-item.tsx +++ b/src/components/tree-item/tree-item.tsx @@ -1,33 +1,33 @@ import { Component, Element, - Prop, - Host, Event, EventEmitter, - Listen, - Watch, h, - VNode + Host, + Listen, + Prop, + VNode, + Watch } from "@stencil/core"; -import { TreeItemSelectDetail } from "./interfaces"; -import { - nodeListToArray, - getElementDir, - filterDirectChildren, - getSlotted, - toAriaBoolean -} from "../../utils/dom"; -import { Scale, SelectionMode } from "../interfaces"; -import { CSS, SLOTS, ICONS } from "./resources"; -import { CSS_UTILITY } from "../../utils/resources"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { + filterDirectChildren, + getElementDir, + getSlotted, + nodeListToArray, + toAriaBoolean +} from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; +import { CSS_UTILITY } from "../../utils/resources"; +import { Scale, SelectionMode } from "../interfaces"; +import { TreeItemSelectDetail } from "./interfaces"; +import { CSS, ICONS, SLOTS } from "./resources"; /** * @slot - A slot for adding text. diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts index 80f1e91583a..70bf978a3ce 100644 --- a/src/components/tree/tree.e2e.ts +++ b/src/components/tree/tree.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; import { CSS } from "../tree-item/resources"; import SpyInstance = jest.SpyInstance; diff --git a/src/components/tree/tree.stories.ts b/src/components/tree/tree.stories.ts index 6c113162f35..da5e9e2e3df 100644 --- a/src/components/tree/tree.stories.ts +++ b/src/components/tree/tree.stories.ts @@ -1,9 +1,9 @@ import { select } from "@storybook/addon-knobs"; import { boolean, storyFilters } from "../../../.storybook/helpers"; import { modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import treeItemReadme from "../tree-item/readme.md"; import { html } from "../../../support/formatting"; +import treeItemReadme from "../tree-item/readme.md"; +import readme from "./readme.md"; const treeItems = ` diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx index a54c69064b9..9a415e6779c 100644 --- a/src/components/tree/tree.tsx +++ b/src/components/tree/tree.tsx @@ -10,8 +10,8 @@ import { VNode } from "@stencil/core"; import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom"; -import { TreeItemSelectDetail } from "../tree-item/interfaces"; import { Scale, SelectionMode } from "../interfaces"; +import { TreeItemSelectDetail } from "../tree-item/interfaces"; import { getEnabledSiblingItem } from "./utils"; /** diff --git a/src/components/value-list-item/value-list-item.tsx b/src/components/value-list-item/value-list-item.tsx index 9b0598d029b..18079b6891c 100644 --- a/src/components/value-list-item/value-list-item.tsx +++ b/src/components/value-list-item/value-list-item.tsx @@ -10,23 +10,23 @@ import { Prop, VNode } from "@stencil/core"; -import { ICON_TYPES } from "../pick-list/resources"; -import { guid } from "../../utils/guid"; -import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources"; -import { ICONS, SLOTS } from "./resources"; -import { getSlotted } from "../../utils/dom"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { getSlotted } from "../../utils/dom"; +import { guid } from "../../utils/guid"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { - setUpLoadableComponent, - setComponentLoaded, + componentLoaded, LoadableComponent, - componentLoaded + setComponentLoaded, + setUpLoadableComponent } from "../../utils/loadable"; +import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources"; +import { ICON_TYPES } from "../pick-list/resources"; +import { ICONS, SLOTS } from "./resources"; /** * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component. diff --git a/src/components/value-list/value-list.e2e.ts b/src/components/value-list/value-list.e2e.ts index edc8c43adac..e7f6e9606bc 100644 --- a/src/components/value-list/value-list.e2e.ts +++ b/src/components/value-list/value-list.e2e.ts @@ -1,17 +1,17 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { CSS, ICON_TYPES } from "./resources"; +import { html } from "../../../support/formatting"; import { accessible, hidden, renders, t9n } from "../../tests/commonTests"; +import { dragAndDrop } from "../../tests/utils"; import { - selectionAndDeselection, + disabling, filterBehavior, - loadingState, - keyboardNavigation, - itemRemoval, focusing, - disabling + itemRemoval, + keyboardNavigation, + loadingState, + selectionAndDeselection } from "../pick-list/shared-list-tests"; -import { dragAndDrop } from "../../tests/utils"; -import { html } from "../../../support/formatting"; +import { CSS, ICON_TYPES } from "./resources"; describe("calcite-value-list", () => { it("renders", () => renders("calcite-value-list", { display: "flex" })); diff --git a/src/components/value-list/value-list.stories.ts b/src/components/value-list/value-list.stories.ts index 50bacf5b8dd..cadd039084f 100644 --- a/src/components/value-list/value-list.stories.ts +++ b/src/components/value-list/value-list.stories.ts @@ -1,15 +1,15 @@ import { boolean } from "@storybook/addon-knobs"; +import { storyFilters } from "../../../.storybook/helpers"; import { Attribute, - filterComponentAttributes, Attributes, createComponentHTML as create, + filterComponentAttributes, modesDarkDefault } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import itemReadme from "../value-list-item/readme.md"; import { html } from "../../../support/formatting"; -import { storyFilters } from "../../../.storybook/helpers"; +import itemReadme from "../value-list-item/readme.md"; +import readme from "./readme.md"; export default { title: "Components/Value List", diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx index e8a2abf16bd..b8cda713b69 100644 --- a/src/components/value-list/value-list.tsx +++ b/src/components/value-list/value-list.tsx @@ -1,4 +1,3 @@ -import Sortable from "sortablejs"; import { Component, Element, @@ -12,15 +11,30 @@ import { VNode, Watch } from "@stencil/core"; -import { CSS, ICON_TYPES } from "./resources"; +import Sortable from "sortablejs"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { - ListFocusId, + componentLoaded, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent +} from "../../utils/loadable"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { createObserver } from "../../utils/observers"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { + calciteInternalListItemValueChangeHandler, calciteListFocusOutHandler, calciteListItemChangeHandler, - calciteInternalListItemValueChangeHandler, cleanUpObserver, - deselectSiblingItems, deselectRemovedItems, + deselectSiblingItems, getItemData, handleFilter, handleFilterEvent, @@ -29,32 +43,18 @@ import { initializeObserver, ItemData, keyDownHandler, + ListFocusId, + moveItemIndex, mutationObserverCallback, removeItem, selectSiblings, setFocus, - setUpItems, - moveItemIndex + setUpItems } from "../pick-list/shared-list-logic"; import List from "../pick-list/shared-list-render"; -import { createObserver } from "../../utils/observers"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { getHandleAndItemElement, getScreenReaderText } from "./utils"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { - connectMessages, - disconnectMessages, - setUpMessages, - T9nComponent, - updateMessages -} from "../../utils/t9n"; import { ValueListMessages } from "./assets/value-list/t9n"; -import { - setUpLoadableComponent, - setComponentLoaded, - LoadableComponent, - componentLoaded -} from "../../utils/loadable"; +import { CSS, ICON_TYPES } from "./resources"; +import { getHandleAndItemElement, getScreenReaderText } from "./utils"; /** * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list. diff --git a/src/demos/popover.html b/src/demos/popover.html index ab307ba6e99..9279d3b8042 100644 --- a/src/demos/popover.html +++ b/src/demos/popover.html @@ -1,188 +1,216 @@ - - - - - - Popover - - - - - - -

Popover

- - -
-
Clickable popover
- -
- - Clickable popover + + + + + Popover + + + + + + +

Popover

+ + +
+
Clickable popover
+ +
+ + Clickable popover +
-
- -
-
With close button
+ +
+
With close button
-
- - With close button +
+ + With close button +
-
- -
-
Title, content & CTA
+ +
+
Title, content & CTA
-
- - Title, content & CTA +
+ + Title, content & CTA +
-
- -
-
Heading (in prop), content & CTA
+ +
+
Heading (in prop), content & CTA
-
- - Heading (in prop), content & CTA +
+ + Heading (in prop), content & CTA +
-
- -
-
Tooltip and popover test
+ +
+
Tooltip and popover test
-
- - Tooltip and popover test -
-
- - Lorem Ipsum is simply of the printing and typesetting industry. Lorem Ipsum has been the industry's standard - printer of type and scrambled it to make a type specimen book. - - - - -
Hello! I am some popover content!
- - - - - -
-
Verwendung von A mit B vergleichen
-
- -
- Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als - Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten, - Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche). -
- - Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als - Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten, - Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche). - Nested popover +
+ + Tooltip and popover test
- - - - -
- I am a title!
-

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -

- I am an inline link -
- - - - - -
-

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -

- I am an inline link -
- - - - -
Hello! I am some popover content!
- - -
- Wrapped in Tabs -
- - - Tab 1 Title - Tab 2 Title - - - - Clickable popover - -

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -

- -
Hello! I am some popover content!
+ + Lorem Ipsum is simply of the printing and typesetting industry. Lorem Ipsum has been the industry's standard + printer of type and scrambled it to make a type specimen book. + + + + +
Hello! I am some popover content!
+ + + + + +
+
Verwendung von A mit B vergleichen
+
+ +
+ Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als + Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten, + Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche). +
- - Tab 2 Content - + Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als + Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten, + Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche). + Nested popover +
+
+ + + + +
+ I am a title!
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +

+ I am an inline link +
+ + + + + +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +

+ I am an inline link +
+ + + + +
Hello! I am some popover content!
+ + +
+ Wrapped in Tabs +
+ + + Tab 1 Title + Tab 2 Title + + + + Clickable popover + +

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +

+ +
Hello! I am some popover content!
+ + + Tab 2 Content + +
-
- - - - \ No newline at end of file + + + diff --git a/src/demos/shell/demo-app-rtl.html b/src/demos/shell/demo-app-rtl.html index 607e43c51b9..7c50f442443 100644 --- a/src/demos/shell/demo-app-rtl.html +++ b/src/demos/shell/demo-app-rtl.html @@ -1,341 +1,352 @@ + + + - - - + Calcite Components: calcite-shell - Calcite Components: calcite-shell + - - - - - - + + - - -
-
-

calcite-shell

+ + +
+
+

calcite-shell

- + - - -

Mode Theme

-
- - - - - - - - - - - - - - -
- - - - - - - - - - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - - - -
-

Cool thang.

-
- - -
- + - - - - - - - - - - - - - - - - - - - +

Mode Theme

+
+ + + + + + + + + + + + + + +
+ - demo - - - - - - - - - - + + + + + + - - - - - + - - - - - - demo - - - - - +
+

Cool thing.

+
- + - - - - - - demo - - - - - +
+

Cool thing.

+
- - - - - -
-
-

My App

-
-
-
+ + +
+

Cool thang.

+
+ + +
+ -
Footer
- -
+ + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + demo + + + + + + + + + + + + +
+
+

My App

+
+
+
-

Dark Mode

+
Footer
+ +
-
- - - - - - - - - - - - - - - -
- - - - - - - - - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - -
- +

Dark Mode

- - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + - demo - - - - - - - - - - +
+

Cool thing.

+
- - - - - + - - - - - - demo - - - - - +
+

Cool thing.

+
- + - - - - - - demo - - - - - +
+

Cool thing.

+
- - - - - -
-
-

My App

-
-
-
+
+ -
Footer
- -
-
-
- - + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + demo + + + + + + + + + + + + +
+
+

My App

+
+
+
- \ No newline at end of file +
Footer
+ +
+
+ + + + diff --git a/src/demos/shell/demo-app.html b/src/demos/shell/demo-app.html index 9da8da12abf..6f56f2b5cc5 100644 --- a/src/demos/shell/demo-app.html +++ b/src/demos/shell/demo-app.html @@ -1,390 +1,401 @@ + + + - - - + Calcite Components: calcite-shell - Calcite Components: calcite-shell + - - - - - - + + - - -
-
-

calcite-shell

+ + +
+
+

calcite-shell

- + - + -

Light Mode

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - - - -
-

Cool thang.

-
- - - - - - - - - - - - - - - - - - - - - - - - +

Light Mode

+
+ + + + + + + + + + + + + + + + - demo - - - - - - - - - - + + + + + + - - - - - + - - - - - - demo - - - - - +
+

Cool thing.

+
- + - - - - - - demo - - - - - +
+

Cool thing.

+
- - - - - -
-
-

My App

-
-
- - - - This is an image. -

- This tip is how a tip should really look. It has a landscape or square image and a small amount of - text content. This paragraph is in an "info" slot. -

+ + +
+

Cool thang.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + demo + + + + + + + + + + + + +
+
+

My App

+
+
+ + + + This is an image. +

+ This tip is how a tip should really look. It has a landscape or square image and a small amount of + text content. This paragraph is in an "info" slot. +

+

+ This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem + ipsum is a placeholder text commonly used to demonstrate the visual form of a document without + relying on meaningful content (also called greeking). Replacing the actual content with + placeholder text allows designers to design the form of the content before the content itself has + been produced. +

+ This is the "link" slot. + + + This is an image. +

+ This tip has an image that is a pretty tall. And the text will run out before the end of the + image. +

+

In astronomy, the terms object and body are often used interchangeably.

+ View Esri + + + + This is an image. +

This tip has an image that is square. And the text will run out before the end of the image.

+

In astronomy, the terms object and body are often used interchangeably.

- This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem - ipsum is a placeholder text commonly used to demonstrate the visual form of a document without - relying on meaningful content (also called greeking). Replacing the actual content with - placeholder text allows designers to design the form of the content before the content itself has - been produced. + In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the + visual form of a document without relying on meaningful content (also called greeking). Replacing + the actual content with placeholder text allows designers to design the form of the content before + the content itself has been produced.

- This is the "link" slot. + View Esri - - This is an image. + +

This tip has no image. As such, the content area will take up the entire width of the tip.

- This tip has an image that is a pretty tall. And the text will run out before the end of the - image. + This is the next paragraph and should show how wide the content area is now. Of course, the width of + the overall tip will affect things. In astronomy, the terms object and body are often used + interchangeably.

-

In astronomy, the terms object and body are often used interchangeably.

View Esri - - - This is an image. -

This tip has an image that is square. And the text will run out before the end of the image.

-

In astronomy, the terms object and body are often used interchangeably.

-

- In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the - visual form of a document without relying on meaningful content (also called greeking). Replacing - the actual content with placeholder text allows designers to design the form of the content before - the content itself has been produced. -

- View Esri - - -

This tip has no image. As such, the content area will take up the entire width of the tip.

-

- This is the next paragraph and should show how wide the content area is now. Of course, the width of - the overall tip will affect things. In astronomy, the terms object and body are often used - interchangeably. -

- View Esri - - -
+ +
-
Footer
- -
- -

Dark Mode

+
Footer
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - - - -
-

Cool thing.

-
- - - - +

Dark Mode

- - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + - demo - - - - - - - - - - + + + + + - - - - - + - - - - - - demo - - - - - +
+

Cool thing.

+
- + - - - - - - demo - - - - - +
+

Cool thing.

+
+ + + + +
+

Cool thing.

+
- - - - -
-
-

My App

-
-
-
+ -
Footer
- -
-
-
- - + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + + + + + + + + + + demo + + + + + + + + + + + + + + + demo + + + + + + + + + + + + +
+
+

My App

+
+
+
- \ No newline at end of file + + +
+
+ + + + diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts index 0880b8ed6bf..2c002f6aaea 100644 --- a/src/utils/date.spec.ts +++ b/src/utils/date.spec.ts @@ -1,8 +1,8 @@ import { DateLocaleData } from "../components/date-picker/utils"; -import { inRange, dateFromRange, dateFromISO, sameDate, prevMonth, nextMonth, parseDateString, getOrder } from "./date"; +import { dateFromISO, dateFromRange, getOrder, inRange, nextMonth, parseDateString, prevMonth, sameDate } from "./date"; -import english from "../components/date-picker/assets/date-picker/nls/en.json"; import arabic from "../components/date-picker/assets/date-picker/nls/ar.json"; +import english from "../components/date-picker/assets/date-picker/nls/en.json"; import french from "../components/date-picker/assets/date-picker/nls/fr.json"; import korean from "../components/date-picker/assets/date-picker/nls/ko.json"; import { NumberingSystem, numberStringFormatter } from "./locale"; diff --git a/src/utils/dom.e2e.ts b/src/utils/dom.e2e.ts index 6bb08402e29..452214b8613 100644 --- a/src/utils/dom.e2e.ts +++ b/src/utils/dom.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { queryElementRoots, getRootNode, getHost } from "./dom"; +import { getHost, getRootNode, queryElementRoots } from "./dom"; interface SetUpTestComponentOptions { insideHostHTML: string; diff --git a/src/utils/dom.spec.ts b/src/utils/dom.spec.ts index 1285eb3afe3..c4482a9ad18 100644 --- a/src/utils/dom.spec.ts +++ b/src/utils/dom.spec.ts @@ -1,17 +1,17 @@ +import { ModeName } from "../../src/components/interfaces"; +import { html } from "../../support/formatting"; import { - getElementProp, - getSlotted, - setRequestedIcon, ensureId, + getElementProp, getModeName, - toAriaBoolean, + getSlotted, isPrimaryPointerButton, + setRequestedIcon, slotChangeGetAssignedElements, - slotChangeHasAssignedElement + slotChangeHasAssignedElement, + toAriaBoolean } from "./dom"; import { guidPattern } from "./guid.spec"; -import { html } from "../../support/formatting"; -import { ModeName } from "../../src/components/interfaces"; describe("dom", () => { describe("getElementProp()", () => { diff --git a/src/utils/dom.ts b/src/utils/dom.ts index b9d2fd00eb3..0380a95b44e 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -1,6 +1,6 @@ -import { CSS_UTILITY } from "./resources"; -import { guid } from "./guid"; import { tabbable } from "tabbable"; +import { guid } from "./guid"; +import { CSS_UTILITY } from "./resources"; export const tabbableOptions = { getShadowRoot: true diff --git a/src/utils/floating-ui.spec.ts b/src/utils/floating-ui.spec.ts index dadf02abb39..d003773a580 100644 --- a/src/utils/floating-ui.spec.ts +++ b/src/utils/floating-ui.spec.ts @@ -1,3 +1,4 @@ +import { waitForAnimationFrame } from "../tests/utils"; import { cleanupMap, connectFloatingUI, @@ -15,7 +16,6 @@ import { repositionDebounceTimeout, updateAfterClose } from "./floating-ui"; -import { waitForAnimationFrame } from "../tests/utils"; import * as floatingUIDOM from "@floating-ui/dom"; diff --git a/src/utils/floating-ui.ts b/src/utils/floating-ui.ts index 5452587f459..c1f9b860b5b 100644 --- a/src/utils/floating-ui.ts +++ b/src/utils/floating-ui.ts @@ -13,10 +13,10 @@ import { Strategy, VirtualElement } from "@floating-ui/dom"; -import { closestElementCrossShadowBoundary, getElementDir } from "./dom"; -import { debounce } from "lodash-es"; import { Build } from "@stencil/core"; +import { debounce } from "lodash-es"; import { config } from "./config"; +import { closestElementCrossShadowBoundary, getElementDir } from "./dom"; const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers(); diff --git a/src/utils/focusTrapComponent.ts b/src/utils/focusTrapComponent.ts index f1fd0347486..841ddd28a78 100644 --- a/src/utils/focusTrapComponent.ts +++ b/src/utils/focusTrapComponent.ts @@ -1,6 +1,5 @@ -import { FocusTrap as _FocusTrap, Options as FocusTrapOptions, createFocusTrap } from "focus-trap"; -import { FocusableElement, focusElement } from "./dom"; -import { tabbableOptions } from "./dom"; +import { createFocusTrap, FocusTrap as _FocusTrap, Options as FocusTrapOptions } from "focus-trap"; +import { FocusableElement, focusElement, tabbableOptions } from "./dom"; const trapStack: _FocusTrap[] = []; diff --git a/src/utils/globalAttributes.spec.ts b/src/utils/globalAttributes.spec.ts index f028a80295e..2c074a135f4 100644 --- a/src/utils/globalAttributes.spec.ts +++ b/src/utils/globalAttributes.spec.ts @@ -1,7 +1,7 @@ -import { GlobalAttrComponent, unwatchGlobalAttributes, watchGlobalAttributes } from "./globalAttributes"; -import { JSDOM } from "jsdom"; import { Build } from "@stencil/core"; +import { JSDOM } from "jsdom"; import { waitForAnimationFrame } from "../tests/utils"; +import { GlobalAttrComponent, unwatchGlobalAttributes, watchGlobalAttributes } from "./globalAttributes"; describe("globalAttributes", () => { const originalIsBrowser = Build.isBrowser; diff --git a/src/utils/loadable.spec.ts b/src/utils/loadable.spec.ts index 0dd3f082ac3..d9d8f02e7a6 100644 --- a/src/utils/loadable.spec.ts +++ b/src/utils/loadable.spec.ts @@ -1,5 +1,5 @@ import { waitForAnimationFrame } from "../tests/utils"; -import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "./loadable"; +import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "./loadable"; describe("loadable", () => { it("should honor loadable component lifecyce", async () => { diff --git a/src/utils/locale.spec.ts b/src/utils/locale.spec.ts index 5a451f1759d..dd97b7dbe67 100644 --- a/src/utils/locale.spec.ts +++ b/src/utils/locale.spec.ts @@ -1,10 +1,10 @@ import { - locales, - numberingSystems, - numberStringFormatter, defaultLocale, defaultNumberingSystem, - NumberStringFormatOptions + locales, + numberingSystems, + NumberStringFormatOptions, + numberStringFormatter } from "./locale"; describe("NumberStringFormat", () => { diff --git a/src/utils/locale.ts b/src/utils/locale.ts index ca69352dfe9..2079d304668 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -1,6 +1,6 @@ +import { closestElementCrossShadowBoundary, containsCrossShadowBoundary } from "./dom"; import { BigDecimal, isValidNumber, sanitizeExponentialNumberString } from "./number"; import { createObserver } from "./observers"; -import { closestElementCrossShadowBoundary, containsCrossShadowBoundary } from "./dom"; export const defaultLocale = "en"; diff --git a/src/utils/number.spec.ts b/src/utils/number.spec.ts index ad08ca4b704..eafebc9ba26 100644 --- a/src/utils/number.spec.ts +++ b/src/utils/number.spec.ts @@ -1,5 +1,5 @@ +import { locales, numberStringFormatter } from "./locale"; import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "./number"; -import { numberStringFormatter, locales } from "./locale"; describe("isValidNumber", () => { it("returns false for string values that can't compute to a number", () => { diff --git a/src/utils/time.ts b/src/utils/time.ts index 2dd262a912f..45bef81a518 100644 --- a/src/utils/time.ts +++ b/src/utils/time.ts @@ -1,5 +1,5 @@ -import { isValidNumber } from "./number"; import { getSupportedLocale, getSupportedNumberingSystem, NumberingSystem } from "./locale"; +import { isValidNumber } from "./number"; export type HourCycle = "12" | "24"; export interface LocalizedTime { diff --git a/support/generateT9nTypes.ts b/support/generateT9nTypes.ts index 58e6b5bff7d..ac6df3f629c 100644 --- a/support/generateT9nTypes.ts +++ b/support/generateT9nTypes.ts @@ -1,6 +1,6 @@ -import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core"; -import { format } from "prettier"; import globby from "globby"; +import { format } from "prettier"; +import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core"; (async () => { const { diff --git a/support/preact.ts b/support/preact.ts index c7dd5e634e8..a05a58eb2e4 100644 --- a/support/preact.ts +++ b/support/preact.ts @@ -1,9 +1,9 @@ -import { join } from "path"; import { OutputTargetCustom, OutputTargetDist, OutputTargetDistTypes } from "@stencil/core/internal/stencil-public-compiler"; +import { join } from "path"; export const generatePreactTypes: OutputTargetCustom["generator"] = async ( config,