feat: added all the avatar sizes in DNA

BREAKING CHANGE: a size class is now required
adobe · Feb 24, 2021 · 98b3f66 · 98b3f66
1 parent 68047af
commit 98b3f66
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 8 deletions.
diff --git a/components/avatar/index.css b/components/avatar/index.css
@@ -10,11 +10,85 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+@import "../vars/css/components/spectrum-avatar.css";
+
+.spectrum-Avatar--size50 {
+ @remapvars {
+ find: /--spectrum-avatar-size-50(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size75 {
+ @remapvars {
+ find: /--spectrum-avatar-size-75(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size100 {
+ @remapvars {
+ find: /--spectrum-avatar-size-100(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size200 {
+ @remapvars {
+ find: /--spectrum-avatar-size-200(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size300 {
+ @remapvars {
+ find: /--spectrum-avatar-size-300(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size400 {
+ @remapvars {
+ find: /--spectrum-avatar-size-400(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size500 {
+ @remapvars {
+ find: /--spectrum-avatar-size-500(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size600 {
+ @remapvars {
+ find: /--spectrum-avatar-size-600(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
+.spectrum-Avatar--size700 {
+ @remapvars {
+ find: /--spectrum-avatar-size-700(.*)/;
+ filter: color;
+ replace: --spectrum-avatar$1;
+ }
+}
+
 .spectrum-Avatar {
- inline-size: var(--spectrum-avatar-size-50-width);
- block-size: var(--spectrum-avatar-size-50-height);
+ inline-size: var(--spectrum-avatar-width);
+ block-size: var(--spectrum-avatar-height);
 
- border-radius: var(--spectrum-avatar-size-50-border-radius);
+ border-radius: var(--spectrum-avatar-border-radius);
  border-style: none;
 
  -webkit-user-drag: none;

diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml
@@ -1,9 +1,60 @@
-id: avatar
 name: Avatar
 status: Verified
+description: An image representing a user.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
+sections:
+ - name: Migration Guide
+ description: |
+ ### Sizes added to `avatar`.
+ A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`.
 examples:
  - id: avatar
  name: Standard
  markup: |
- <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
- <img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <div class="spectrum-Examples spectrum-Examples--vertical">
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size50" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size50 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size75" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size75 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size100" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size100 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size200" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size200 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size300" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size300 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size400" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size400 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size500" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size500 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size600" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size600 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
+ <img class="spectrum-Avatar spectrum-Avatar--size700" src="img/example-ava.jpg" alt="Avatar">
+ <img class="spectrum-Avatar spectrum-Avatar--size700 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </div>
+ </div>
diff --git a/components/avatar/package.json b/components/avatar/package.json
@@ -16,7 +16,7 @@
  "build": "gulp"
  },
  "peerDependencies": {
- "@spectrum-css/vars": "^3.0.0-beta.1"
+ "@spectrum-css/vars": "^3.0.0"
  },
  "devDependencies": {
  "@spectrum-css/component-builder": "^2.0.0",
@@ -27,4 +27,4 @@
  "access": "public"
  },
  "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}