Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

505/Tile Select Component #752

Merged
merged 60 commits into from
Jul 31, 2020
Merged

505/Tile Select Component #752

Show file tree
Hide file tree
Changes from 44 commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
1844809
deprecating radio-button's value as label fallback feature since that…
eriklharper Jun 27, 2020
8b0ea9c
feature: radio or checkbox types. refactor: allowing radio-button to…
eriklharper Jun 30, 2020
fc644d5
fixing other radio button demo pages based on last change
eriklharper Jun 30, 2020
d783fde
basic container styling
eriklharper Jul 1, 2020
cb84809
feature: adding hover prop to radio-button so we can trigger hover st…
eriklharper Jul 2, 2020
592f957
feature: focused, checked and hover state for hide-input
eriklharper Jul 2, 2020
615ff8d
a start to the rest of the layout
eriklharper Jul 2, 2020
9684828
feature: left and right radio style variants with icon, title and des…
eriklharper Jul 7, 2020
a3cb390
feature: checkbox checked visual state
eriklharper Jul 8, 2020
b14cb84
focusing the input on click in addition to calling click on it (only …
eriklharper Jul 8, 2020
91d81bb
refactor: allowing browser default "on" behavior to occur on calcite-…
eriklharper Jul 8, 2020
ef96ac1
adding basic radio examples
eriklharper Jul 8, 2020
f6a98cf
setting max-width and removing explicit height
eriklharper Jul 8, 2020
d13e3ed
adding basic checkbox examples
eriklharper Jul 8, 2020
1cc34a9
calcite-tile component so that we can make it be a basic link when us…
eriklharper Jul 9, 2020
1e8c9bb
using calcite-link inside calcite-tile
eriklharper Jul 9, 2020
d65d4fb
explicitly assigning href to calcite-link to workaround weird bug for…
eriklharper Jul 10, 2020
54234ac
fix: fixing tile display differences between linked and non-linked va…
eriklharper Jul 13, 2020
e31158b
start to large visual variant
eriklharper Jul 14, 2020
7221002
done with calcite-tile
eriklharper Jul 14, 2020
80b13b6
fix: floating the input to the right in show-input right mode so the …
eriklharper Jul 14, 2020
027ba3d
fixing checkbox issues to get it to play nicely with tile-select and …
eriklharper Jul 15, 2020
2862ce2
feature: basic variant CSS looks perfect now. What a head scratcher
eriklharper Jul 16, 2020
537863b
Fixing double-checked radio issue and adding eight options to each de…
eriklharper Jul 16, 2020
30b7843
deprecation: removing proxy input feature of calcite-checkbox
eriklharper Jul 17, 2020
909d788
adding active property to calcite-tile for use in tile-select
eriklharper Jul 17, 2020
a4294a9
large visual tile-select variants
eriklharper Jul 17, 2020
b765ad5
fleshing out all possible prop combinations
eriklharper Jul 17, 2020
83666aa
fixing the heading only css and also refactoring the css to use css g…
eriklharper Jul 18, 2020
2183bea
calcite-tile tests
eriklharper Jul 20, 2020
f6735c0
calcite-tile prop and test refinement
eriklharper Jul 20, 2020
da08b66
removing calcite-tile disabled prop since it's not a form component
eriklharper Jul 20, 2020
a1ae370
tile-select tests pretty much done
eriklharper Jul 21, 2020
5e5d773
small css optimizations
eriklharper Jul 22, 2020
c077558
adding flex demo for experimentation
eriklharper Jul 22, 2020
b2ccefd
fixing bug where large visual gets misaligned due to text turning bol…
eriklharper Jul 22, 2020
9a388eb
calcite-tile-select-group wrapper component
eriklharper Jul 23, 2020
a39419d
readme updates
eriklharper Jul 23, 2020
3798115
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 24, 2020
8265fdf
replacing id selectors with class selectors
eriklharper Jul 24, 2020
daf808e
deprecating calcite-icon width and height properties in favor of allo…
eriklharper Jul 24, 2020
3277e08
fixing icon scale tests
eriklharper Jul 24, 2020
408889c
only showing focused tiles above other tiles when they are also checked
eriklharper Jul 27, 2020
75853d4
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 27, 2020
7c9f256
clearing npm cache to fix npm i failing issue
eriklharper Jul 27, 2020
8660a33
setting hidden input's checked state the same way it used to before t…
eriklharper Jul 27, 2020
e26e3a6
fixing broken tests
eriklharper Jul 27, 2020
41e81d5
more test fixes
eriklharper Jul 27, 2020
a4863a7
refactor(calcite-tile): Removing hidden heading and just using 500 fo…
eriklharper Jul 28, 2020
063554a
fix(calcite-radio-button): hidden attribute
eriklharper Jul 29, 2020
1d7f014
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 29, 2020
565d4f6
fix(calcite-tile-select): hover overlap issues with show-input none v…
eriklharper Jul 29, 2020
a75048f
docs(calcite-tile): storybook for calcite-tile
eriklharper Jul 29, 2020
d6396b3
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 30, 2020
fd4b6ac
docs(calcite-tile-select): stories
eriklharper Jul 30, 2020
b725090
docs(calcite-tile-select): finishing stories
eriklharper Jul 30, 2020
c9c99ac
docs(calcite-tile-select-group): story
eriklharper Jul 30, 2020
62e4f89
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 30, 2020
ef64f34
Merge branch 'master' of github.com:Esri/calcite-components into 505/…
eriklharper Jul 31, 2020
3ece238
refactor(calcite-tile): unnesting styles for simplicity
eriklharper Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 2 additions & 4 deletions conventions/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ import { guid } from "../../utils/guid";
@Component({
tag: "calcite-example",
styleUrl: "calcite-example.scss",
shadow: true,
shadow: true
})
export class CalciteExample {
// ...
Expand Down Expand Up @@ -466,9 +466,7 @@ if (Build.isBrowser) {
Checking if the necessary APIs are present is also acceptable:

```ts
const elements = this.el.shadowRoot
? this.el.shadowRoot.querySelector("slot").assignedElements()
: [];
const elements = this.el.shadowRoot ? this.el.shadowRoot.querySelector("slot").assignedElements() : [];
```

To ensure that all components are compatible for prerendering a prerender build is done as part of `npm test`.
8 changes: 2 additions & 6 deletions src/components/calcite-accordion-item/calcite-accordion-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,15 @@
--calcite-accordion-item-icon-rotation-rtl: -90deg;
--calcite-accordion-item-active-icon-rotation-rtl: -180deg;
--calcite-accordion-item-icon-spacing-start: 0;
--calcite-accordion-item-icon-spacing-end: var(
--calcite-accordion-item-spacing-unit
);
--calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-item-spacing-unit);
}
:host([icon-position="end"]) {
--calcite-accordion-item-flex-direction: row;
--calcite-accordion-item-icon-rotation: -90deg;
--calcite-accordion-item-active-icon-rotation: 0deg;
--calcite-accordion-item-icon-rotation-rtl: 90deg;
--calcite-accordion-item-active-icon-rotation-rtl: 0deg;
--calcite-accordion-item-icon-spacing-start: var(
--calcite-accordion-item-spacing-unit
);
--calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-item-spacing-unit);
--calcite-accordion-item-icon-spacing-end: 0;
}
:host([icon-position="end"]:not([icon-type="plus-minus"])) {
Expand Down
60 changes: 15 additions & 45 deletions src/components/calcite-accordion/calcite-accordion.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,9 @@ describe("calcite-accordion", () => {
<calcite-accordion-item item-title="Accordion Title 3" icon="car" id="3">Accordion Item Content
</calcite-accordion-item>
</calcite-accordion>`);
const icon1 = await page.find(
"calcite-accordion-item[id='1'] >>> .accordion-item-icon"
);
const icon2 = await page.find(
"calcite-accordion-item[id='2'] >>> .accordion-item-icon"
);
const icon3 = await page.find(
"calcite-accordion-item[id='3'] >>> .accordion-item-icon"
);
const icon1 = await page.find("calcite-accordion-item[id='1'] >>> .accordion-item-icon");
const icon2 = await page.find("calcite-accordion-item[id='2'] >>> .accordion-item-icon");
const icon3 = await page.find("calcite-accordion-item[id='3'] >>> .accordion-item-icon");
expect(icon1).not.toBe(null);
expect(icon2).toBe(null);
expect(icon3).not.toBe(null);
Expand All @@ -102,15 +96,9 @@ describe("calcite-accordion", () => {
const item1 = await element.find("calcite-accordion-item[id='1']");
const item2 = await element.find("calcite-accordion-item[id='2']");
const item3 = await element.find("calcite-accordion-item[id='3']");
const item1Content = await element.find(
"calcite-accordion-item[id='1'] >>> .accordion-item-content"
);
const item2Content = await element.find(
"calcite-accordion-item[id='2'] >>> .accordion-item-content"
);
const item3Content = await element.find(
"calcite-accordion-item[id='3'] >>> .accordion-item-content"
);
const item1Content = await element.find("calcite-accordion-item[id='1'] >>> .accordion-item-content");
const item2Content = await element.find("calcite-accordion-item[id='2'] >>> .accordion-item-content");
const item3Content = await element.find("calcite-accordion-item[id='3'] >>> .accordion-item-content");
expect(item1).not.toHaveAttribute("active");
expect(item2).toHaveAttribute("active");
expect(item3).not.toHaveAttribute("active");
Expand All @@ -135,15 +123,9 @@ describe("calcite-accordion", () => {
const item1 = await element.find("calcite-accordion-item[id='1']");
const item2 = await element.find("calcite-accordion-item[id='2']");
const item3 = await element.find("calcite-accordion-item[id='3']");
const item1Content = await element.find(
"calcite-accordion-item[id='1'] >>> .accordion-item-content"
);
const item2Content = await element.find(
"calcite-accordion-item[id='2'] >>> .accordion-item-content"
);
const item3Content = await element.find(
"calcite-accordion-item[id='3'] >>> .accordion-item-content"
);
const item1Content = await element.find("calcite-accordion-item[id='1'] >>> .accordion-item-content");
const item2Content = await element.find("calcite-accordion-item[id='2'] >>> .accordion-item-content");
const item3Content = await element.find("calcite-accordion-item[id='3'] >>> .accordion-item-content");
await item1.click();
await item3.click();
expect(item1).toHaveAttribute("active");
Expand All @@ -170,15 +152,9 @@ describe("calcite-accordion", () => {
const item1 = await element.find("calcite-accordion-item[id='1']");
const item2 = await element.find("calcite-accordion-item[id='2']");
const item3 = await element.find("calcite-accordion-item[id='3']");
const item1Content = await element.find(
"calcite-accordion-item[id='1'] >>> .accordion-item-content"
);
const item2Content = await element.find(
"calcite-accordion-item[id='2'] >>> .accordion-item-content"
);
const item3Content = await element.find(
"calcite-accordion-item[id='3'] >>> .accordion-item-content"
);
const item1Content = await element.find("calcite-accordion-item[id='1'] >>> .accordion-item-content");
const item2Content = await element.find("calcite-accordion-item[id='2'] >>> .accordion-item-content");
const item3Content = await element.find("calcite-accordion-item[id='3'] >>> .accordion-item-content");
await item1.click();
await item3.click();
expect(item1).not.toHaveAttribute("active");
Expand Down Expand Up @@ -206,15 +182,9 @@ describe("calcite-accordion", () => {
const item1 = await element.find("calcite-accordion-item[id='1']");
const item2 = await element.find("calcite-accordion-item[id='2']");
const item3 = await element.find("calcite-accordion-item[id='3']");
const item1Content = await element.find(
"calcite-accordion-item[id='1'] >>> .accordion-item-content"
);
const item2Content = await element.find(
"calcite-accordion-item[id='2'] >>> .accordion-item-content"
);
const item3Content = await element.find(
"calcite-accordion-item[id='3'] >>> .accordion-item-content"
);
const item1Content = await element.find("calcite-accordion-item[id='1'] >>> .accordion-item-content");
const item2Content = await element.find("calcite-accordion-item[id='2'] >>> .accordion-item-content");
const item3Content = await element.find("calcite-accordion-item[id='3'] >>> .accordion-item-content");
await item2.click();
expect(item1).not.toHaveAttribute("active");
expect(item2).toHaveAttribute("active");
Expand Down