• Implementation: Need to add Circle versions of loaders. I don’t remember this one, can you share on teams?
  What was the use case for this? Non-Esri consumers who “shouldn’t” be using the science of where mark?
• Implementation: Need to finesse easing/timing/feel of the spins across all loaders
• Sketch: needs to be added as symbols/page [I’m working on this one now]
  Should these be color-themeable? Not sure about this one. It’s not as bad as using the brand color as UI, but it might be okay for the loader?

Need to solve for "optional" text classification.

on all variants

how does this look with error states?

Hi there 👋 really cool, that you have created this UI kit, it's super useful :) I have already been using the fonts & icons for designs!

I was just trying to add the fonts as well to our own Esri R&D Center Zurich Figma organization following the steps in the README, and got an error when trying to publish the file Calcite-Typography file:

I am missing something? 🙈 Thanks for your help!

Reproduction steps

1. Download Calcite-Typography from this repo
2. Import it to Figma project
3. Click on file & publish
4. Error: "Unable to publish 96 changes to the Team library"

Expected: Typography can be published as a library
Actual: Error message prevents publishing (cannot use the fonts)

NOTE: the console error messages already appear when opening the file in Figma, and they also get thrown when publishing.

• Implementation: please revisit Sketch styling, Light and Dark themes.
  • primarily on hover state (type color and background color)
  • Category titles color
    Can you expand on the differences? Implementation uses foreground, foreground-hover, and foreground-pressed from calcite-colors. Maybe Sketch needs to be updated. I think we could use a middle ground between how light the headers are in the sketch and how dark they are in the implementation, as a compromise
    Oh yeah right on. The foreground hover is a much better argument. Will update the sketch.
    Yeah getting the headers more subtle would be great.
    Another thing to note is the Type Color change on hover (#bfbfbf to #ffff on dark; #4a4a4a to #151515 on light)

After a quick chat with @julio8a we agreed that cards would make a good addition to the library.

Add Combobox items to the "Combobox" Figma designs, so Figma can include the various indentation levels and states for combobox items (similar to the "Dropdown" Figma page).

Figma page: https://www.figma.com/file/E3SB0i5wPy7AagB7KcjF05/?node-id=0%3A5901

Esri/calcite-components#3144

If I install calcite color I can get to from the appearance panel

But in the color picker it doesn't appear as an option:

Having this absent from the color picker means that you can only pick Calcite colors as fill colors.

• Change small - large inline buttons to not scale icons

• - Implementation and Sketch: < Chevrons > are using filled version of the icons. Suggest using the thinner ones

• - Implementation: need dark theme

• - Implementation: Circle selection needs to either be increased in size or decrease by 1x1px. Not centered with the date numbers. Currently hangs top-left

• - Sketch: move chevrons to margins, not right next to the Month

Esri/calcite-components#3094

• Sketch: Need to finesse modals to adapt to resizing so they can better emulate more variants in the implementation

• Sketch: Needs more robust overrides for flexibility

Add to palette:

• Add $ui-background values
• Add $ui-foreground values

Add to calcite-colors library:

• New dark theme variables as symbols

• - Add transparent variant
• 5 scales (Extra Large, Large, Medium, Small, Extra Small)
• with icon left or right
• - Add "loading" state to each existing variant
• Icon/Loader at before/after text

CC related issue: Esri/calcite-components#2906

visual examples:

CC related issue: Esri/calcite-components#1926

• Add border start and end to action-bar when slotted in shell panel

• Sketch: need to add all remaining variants
  Possibly by just using clever overrides
• Implementation: Circle handles need to be increased in size by 1x1px. They are sitting off-center low of the line.
• Implementation: Dark—change handle border, slider line, and controls to #4a4a4a (blk-170). Needs more legibility (see sketch)
• Handles—Should we Increase the thickness of internal stroke by 1-2px on hover to match btn/clear philosophy? And active be solid? Ah, interesting idea, we should give this a try. This border pattern was in the OG design back when we did this with mitch last year

• Sketch: needs to be added as a symbol/page [I’m working on this one now]
  • Should this be color-themeable? NO, which should probably be the same for 3a in loader.
    Won't apps like navigator want to utilize this? Thinking like top of page stuff, not necessarily living in modals
    Hard to draw the line, but we can probably use the best practices and usage. It can be weird using the red progress bar for in-app UI like floating windows, etc. It makes sense as a page loader at the top under the browser address bar.

(+1 - Julio, it’s hard to see the auto dismiss at the beginning, opacity/bg should stay constant)
IDK It kind of makes for a less hamhanded transition than consistent bg color IMO, it’s a little softer of an effect and the lack of X is an indication of auto dismiss

Consider this use case: I see the alert, and have no indication of it going away, I glance away, and then the alert is less than half of the time remaining. If you ease into it, it is much more likely to be missed since the urgency is hidden until about 60%.

+1. Yeah, I didn’t notice it until it was 50% or less, “oh, it’s auto dismiss”. It’s hidden at the beginning.

This is the frog in a slowly boiling pot
:O
I’m not sure how that applies here tbh and it was disproven anyway ;)

The analogy means that it's too late before you realize it’s hot. In this case, almost gone.

https://jumpshare.com/v/mN0vlcCaCsOI2X8Ffxwz ??? it’s only jumpy in the screencast

This is much better imo

• Auto dismiss—Remove the opacity transition, need to read the countdown as it starts, kind of weird laggy experience
  • Maybe just have the colored “background” set to 20% opacity. Instead of 100%-0% over time
• On that note, for Auto Dismiss Slow—suggest keeping the bar solid for x-amount of seconds, then countdown (with no background opacity shift... see point #1)

I think that would be confusing because it would appear to not be auto dismissing for the duration of “not dismissing” when it’s solid - doesn’t this conflict with above point that a user wouldn’t know it was dismissing?

A good point, maybe it is just slower and disregards the delay.

These "Tile" Figma variant headings need to be fixed:

1. "Tile" appears where "Tile Select" should appear:

2. "Tile Group" appears where "Tile Select Group" should appear:

(Noticed while reviewing Esri/calcite-components#3044 this afternoon.)

• Implementation: Type moves down 1px all weird when clicked. Bug?
  Yes this happens on all things that shift font weight I think it’s a bug with calcite-fonts that would be fixed soon hopefully
  dope
• I thought we revisited how the left vertical blue line should function? Weren't we going to omit or make it 1px/less noticeable? I can't remember. Feels like A LOT with the blue •dot
• Sketch: add some version(s) to symbols/new page

• Implementation: Aren’t Checkboxes being updated to have a scale animation?
• Implementation: Please take a fresh look at Sketch styling, light, and dark. Little more sophistication and consistency with other components +1
  Yeah agree haven’t gotten around to checkboxes yet they will be updated to points 1/2
• Sketch: add size variants as symbols
• Sketch: fix hover state size to match the other states (whoops!)

• Sketch: Need to add a custom color variant
  • Not sure we need to add that to Sketch, it’s kind of an artifact of a “to be determined” story about theming - since the library will be for internal folks mostly for now, I think we can just use the blue.
  • dope
• Implementation: Dark—Need to change the white selected bar to ui-blue-dark

https://github.com/Esri/calcite-ui-kits/tree/master/Figma#readme

This page needs a few content updates, identified in the Holistic feedback document:

• The link at the very bottom is incorrect.
• The calcite-fonts link should be removed as that is an Esri internal resource.

cc @benelan

• size variance

Summary

Figma doesn't include any disabled variants yet on the "Input" designs, let's add at least one.

Page: https://www.figma.com/file/E3SB0i5wPy7AagB7KcjF05/?node-id=0%3A9270

(I only see a "Read-only" variant at the moment.)

Currently tooltips carets are baked into the Tooltip symbol making it impossible to create a tooltip where the caret faces any other way then down.

To create this (for example) I had to unlink tooltip from the library and delete the caret and then used one of the caret symbols.

need some chips. maybe we use the same look and feel as the outlined labels, but a little bigger and give the ability to add a close button

• Sketch: need to add small and large variants
• Implementation: Dark—Selected states need #151515 type, white not accessible
• Implementation: add type & border hover state color changes as seen in Sketch

Esri/calcite-components#3144

Hi there. Thank you from a UX designer and a Question!

I have been creating a design prototype using FIGMA for our developers using the javascript map API. I have been importing SVG files and recreating components as best I could from the examples in developers.arcgis.com and then voila!! I found this repository. So grateful!! I usually find UI kits for Figma in the Figma community. I attached a screenshot. I was wondering if you could publish a link to this repository in Figma Community also? That way others would find it sooner? Thanks, again.

There is no histogram slider variant in Figma, but there is one in code:
Esri/calcite-components#2457

Viewable in more detail in the demo pages local build.

https://sdk.goabstract.com/docs/webhooks/

Right now there's a manual process for committing to GitHub. Abstract has a beta webhook feature that might let us automatically commit to this GH repository when the Abstract master branch is updated.

That'd be a nice-to-have so those without Abstract can still rely on this repository as a source of truth.

Esri/calcite-components#3143

Buttons in Calcite components have a lot of varients including:

• 5 scales (Extra Large, Large, Medium, Small, Extra Small)
• With an icon
• With a loader
• Icon/Loader at before/after text

It would be nice to have these reflected in the Sketch files.

calcite-action includes "center", "start", and "end" alignment prop values. I don't see these identified in the Figma designs yet, can we add them or make it more clear?

Figma page: https://www.figma.com/file/E3SB0i5wPy7AagB7KcjF05/?node-id=1184%3A3828

(Noticed during review of Esri/calcite-components#3128 (comment))