505/Tile Select Component

[eriklharper]

[macandcheese]

@eriklharper want to sort out conflicts and we can get this in...

My only question is re: nomenclature of the wrapping component... should we use calcite-tile-group vs calcite-tile-select to better align with radio-button-group and radio-group cc @Esri/calcite-components

[eriklharper]

@eriklharper want to sort out conflicts and we can get this in...

My only question is re: nomenclature of the wrapping component... should we use calcite-tile-group vs calcite-tile-select to better align with radio-button-group and radio-group cc @Esri/calcite-components

Word. Would love to get this in. Last little bit I almost have done is just the story file for calcite-tile-select. I'll push that up as soon as I can and we can merge this along with resolving the conflicts.

As far as the wrapping component name goes, I named the component calcite-tile-select at @bstifle 's request and since that component just renders a single tile with either a radio or checkbox (instead of a group of them) I think the name calcite-tile-select-group still fits since there's a separate calcite-tile component that just renders the tile UI with an optional href property for supporting linking it to somewhere. Right now the calcite-tile-select-group is such a light wrapper that what it does right now can be easily accomplished with just some basic flexbox styles, so I can see getting rid of it as well, but I thought including it might make using it nicer for people who want to make the boxes vertically stretch their borders to match others in the same row when the content length varies.

[macandcheese]

That nomenclature makes sense - I think my only other feedback is we can probably lose the embed type for tile since it makes the component almost border on a layout helper and might be abused, IMO. This is looking great!

[bstifle]

@eriklharper yeah im not sure what the embed was for either. what was the reason for it?

[eriklharper]

@eriklharper yeah im not sure what the embed was for either. what was the reason for it?

I built calcite-tile as a separate component since you mentioned that it needed two use cases:

1. A hyperlink
2. A radio or checkbox

If we don't need to support use case 1 we would get rid of calcite-tile and move all that UI back into calcite-tile-select where I originally had it.

[macandcheese]

No tile is definitely justified @eriklharper. Just referring to the "embed" style on the dev demo page for calcite-tile not being needed :)

[eriklharper]

No tile is definitely justified @eriklharper. Just referring to the "embed" style on the dev demo page for calcite-tile not being needed :)

Totally gotcha now! I'll remove that from the demo, cause yeah that's just really a quasi-internal thing that's only used for calcite-tile-select.

[eriklharper]

Ok I'm all done now with the stories. Thanks @macandcheese for helping me fix my issue with storybook. Everything looks ready to go now.

[paulcpederson]

I think you could remove some of the nesting here. It doesn't really matter a ton because shadow dom makes css life much easier, but in theory you'd save some precious bytes.

.tile {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: $spacing;
}

.heading {
  @include font-size(0);
  color: var(--calcite-ui-text-1);
  font-weight: 500;
}

.large-visual {
  justify-items: center;
  min-height: 200px;
  .icon {
    align-self: self-end;
  }
  .heading {
    align-self: center;
  }
}

.description {
  @include font-size(-1);
  color: var(--calcite-ui-text-2);
}

[paulcpederson]

So are all the indentation changes from prettier, or how did that happen? @jcfranco I think set up tooling to auto indent, but not sure how it's different or why those diffs are there.

Anyways, had a couple comments, but looks good, nice work @eriklharper !

[eriklharper]

So are all the indentation changes from prettier, or how did that happen? @jcfranco I think set up tooling to auto indent, but not sure how it's different or why those diffs are there.

Anyways, had a couple comments, but looks good, nice work @eriklharper !

I was wondering the same thing. I wonder if I try to ditch all those changes (pull them from master) if they will regenerate. I'll try that.

[bstifle]

Yay! Awesome work Erik!!!! 🇺🇸