remove flexi elements

tylerturdenpants · May 20, 2021 · ec513b0 · ec513b0
1 parent bab8e3d
commit ec513b0
Show file tree

Hide file tree

Showing 5 changed files with 949 additions and 299 deletions.
diff --git a/package.json b/package.json
@@ -42,13 +42,12 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@html-next/flexi-config": "^2.2.0",
     "@html-next/flexi-default-styles": "^2.2.0",
-    "@html-next/flexi-dsl": "^2.2.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-cli": "~3.24.0",
     "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-dependency-lint": "^2.0.0",
     "ember-cli-github-pages": "^0.2.2",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sri": "^2.1.1",
@@ -73,6 +72,11 @@
     "release-it": "^14.3.0",
     "release-it-lerna-changelog": "^3.1.0"
   },
+  "resolutions": {
+    "@embroider/util": "^0.40.0",
+    "ember-in-element-polyfill": "^1.0.1"
+  },
+
   "engines": {
     "node": "10.* || >= 12.*"
   },

diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
@@ -111,12 +111,12 @@ p {
   overflow: auto;
   padding: 8px;
 
-  hbox {
+  [data-element-hbox] {
     min-height: 30px;
   }
 }
 
-.popper-area {
+[data-element-centered].popper-area {
   background-color: #ddd;
   min-height: 100px;
 }
@@ -206,3 +206,134 @@ p {
     font-size: 14px;
   }
 }
+
+[data-element-screen] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-height: 100vh;
+}
+
+[data-element-page] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  max-width: 100vw;
+  min-width: 100vw;
+  min-height: 100vh;
+}
+
+[data-element-centered] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  .flexi-fit {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+  }
+
+  .justify-around {
+    -webkit-box-pack: distribute;
+    -moz-box-pack: distribute;
+    -ms-flex-pack: distribute;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+  }
+}
+
+[data-element-box] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1 0 0px;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0px;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+[data-element-vbox] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+
+  .fit-lm {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+  }
+}
+
+[data-element-hbox] {
+  position: relative;
+  min-height: 1px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,45 +1,32 @@
-<screen><page>
-  <centered class="header">
-    <box xs="hidden" lm="visible 5" sm="4"></box>
-    <vbox align="center" xs="24" lm="14" sm="16">
-      <centered class="title">ember-attacher</centered>
-      <centered>Tooltips & popovers made easy</centered>
-    </vbox>
-    <centered xs="hidden" lm="visible 5" sm="4" justify="between">
-      <hbox fit align="center" justify="end">
-        <a href="https://github.com/kybishop/ember-attacher"
-          target="_blank"
-          rel="noopener"
-          class="github-link"></a>
-        <a class="github-button"
-           href="https://github.com/kybishop/ember-attacher/fork"
-           data-icon="octicon-repo-forked"
-           data-size="large"
-           aria-label="Fork kybishop/ember-attacher on GitHub">Fork</a>
-      </hbox>
-    </centered>
-  </centered>
-  <hbox lm="hidden" class="mobile-only-header" justify="between">
-    <centered>
-      <a href="http://emberobserver.com/addons/ember-attacher">
-        <img src="http://emberobserver.com/badges/ember-attacher.svg">
-      </a>
-    </centered>
-    <centered>
-      <a href="https://github.com/kybishop/ember-attacher"
-         target="_blank"
-         rel="noopener"
-         class="github-link"></a>
-    </centered>
-    <centered>
-      <a class="github-button"
-          href="https://github.com/kybishop/ember-attacher/fork"
-          data-icon="octicon-repo-forked"
-          data-size="large"
-          aria-label="Fork kybishop/ember-attacher on GitHub">Fork</a>
-    </centered>
-  </hbox>
-  <vbox class="content">
-    {{attachment-example}}
-  </vbox>
-</page></screen>
+<div data-element-screen>
+  <div data-element-page>
+    <div data-element-centered class="header">
+      <div data-element-box  class="col-sm-4 visible-lm col-lm-5 hidden-xs"></div>
+      <div data-element-vbox class="col-sm-16 col-lm-14 col-xs-24 align-center">
+        <div data-element-centered class="title">ember-attacher</div>
+        <div data-element-centered>Tooltips & popovers made easy</div>
+      </div>
+      <div data-element-centered class="justify-between col-sm-4 visible-lm col-lm-5 hidden-xs">
+        <div data-element-hbox class="justify-end align-center flexi-fit">
+          <a href="https://github.com/kybishop/ember-attacher" target="_blank" rel="noopener" class="github-link"></a>
+          <a class="github-button" href="https://github.com/kybishop/ember-attacher/fork"
+            data-icon="octicon-repo-forked" data-size="large"
+            aria-label="Fork kybishop/ember-attacher on GitHub">Fork</a>
+        </div>
+      </div>
+    </div>
+    <div data-element-hbox class="mobile-only-header justify-between hidden-lm">
+      <div data-element-centered>
+        <a href="http://emberobserver.com/addons/ember-attacher">
+          <img src="http://emberobserver.com/badges/ember-attacher.svg">
+        </a>
+      </div>
+      <div data-element-centered>
+        <a href="https://github.com/kybishop/ember-attacher" target="_blank" rel="noopener" class="github-link"></a>
+      </div>
+    </div>
+    <div data-element-vbox  class="content">
+      {{attachment-example}}
+    </div>
+  </div>
+</div>