Skip to content

Commit 9ea52c5

Browse files
wagnermacielwagnermaciel
committed
main - f287cd6 fix(aria/combobox): dialog popup support (#32279)
1 parent 370ab3c commit 9ea52c5

16 files changed

Lines changed: 1036 additions & 25 deletions

‎docs-content/examples-highlighted/aria/combobox/combobox-dialog/combobox-dialog-example-css.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<span class="hljs-selector-class">.example-combobox-container</span> {
2+
<span class="hljs-attribute">position</span>: relative;
3+
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
4+
<span class="hljs-attribute">display</span>: flex;
5+
<span class="hljs-attribute">flex-direction</span>: column;
6+
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-outline);
7+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
8+
}
9+
10+
<span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:has</span>(<span class="hljs-selector-attr">[readonly=<span class="hljs-string">&#x27;true&#x27;</span>]</span>) {
11+
<span class="hljs-attribute">width</span>: <span class="hljs-number">225px</span>;
12+
}
13+
14+
<span class="hljs-selector-class">.example-combobox-input-container</span> {
15+
<span class="hljs-attribute">display</span>: flex;
16+
<span class="hljs-attribute">position</span>: relative;
17+
<span class="hljs-attribute">align-items</span>: center;
18+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
19+
}
20+
21+
<span class="hljs-selector-class">.example-combobox-input</span> {
22+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
23+
}
24+
25+
<span class="hljs-selector-class">.example-combobox-input</span><span class="hljs-selector-attr">[readonly=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
26+
<span class="hljs-attribute">cursor</span>: pointer;
27+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0.7rem</span> <span class="hljs-number">1rem</span>;
28+
}
29+
30+
<span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:focus-within</span> <span class="hljs-selector-class">.example-combobox-input</span> {
31+
<span class="hljs-attribute">outline</span>: <span class="hljs-number">1.5px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-primary);
32+
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">4px</span> <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-number">25%</span>, transparent);
33+
}
34+
35+
<span class="hljs-selector-class">.example-icon</span> {
36+
<span class="hljs-attribute">width</span>: <span class="hljs-number">24px</span>;
37+
<span class="hljs-attribute">height</span>: <span class="hljs-number">24px</span>;
38+
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;
39+
<span class="hljs-attribute">display</span>: grid;
40+
<span class="hljs-attribute">place-items</span>: center;
41+
<span class="hljs-attribute">pointer-events</span>: none;
42+
}
43+
44+
<span class="hljs-selector-class">.example-search-icon</span> {
45+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">0.5rem</span>;
46+
<span class="hljs-attribute">position</span>: absolute;
47+
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.8</span>;
48+
}
49+
50+
<span class="hljs-selector-class">.example-arrow-icon</span> {
51+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">0.5rem</span>;
52+
<span class="hljs-attribute">position</span>: absolute;
53+
<span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;
54+
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.8</span>;
55+
<span class="hljs-attribute">transition</span>: transform <span class="hljs-number">0.2s</span> ease;
56+
}
57+
58+
<span class="hljs-selector-class">.example-combobox-input</span><span class="hljs-selector-attr">[aria-expanded=<span class="hljs-string">&#x27;true&#x27;</span>]</span> + <span class="hljs-selector-class">.example-arrow-icon</span> {
59+
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">180deg</span>);
60+
}
61+
62+
<span class="hljs-selector-class">.example-combobox-input</span> {
63+
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
64+
<span class="hljs-attribute">border</span>: none;
65+
<span class="hljs-attribute">outline</span>: none;
66+
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">1rem</span>;
67+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0.7rem</span> <span class="hljs-number">1rem</span> <span class="hljs-number">0.7rem</span> <span class="hljs-number">2.5rem</span>;
68+
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mat-sys-surface);
69+
}
70+
71+
<span class="hljs-selector-class">.example-popover</span> {
72+
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
73+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
74+
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-outline);
75+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
76+
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--mat-sys-surface);
77+
}
78+
79+
<span class="hljs-selector-class">.example-listbox</span> {
80+
<span class="hljs-attribute">display</span>: flex;
81+
<span class="hljs-attribute">flex-direction</span>: column;
82+
<span class="hljs-attribute">overflow</span>: auto;
83+
<span class="hljs-attribute">max-height</span>: <span class="hljs-number">10rem</span>;
84+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0.5rem</span>;
85+
<span class="hljs-attribute">gap</span>: <span class="hljs-number">4px</span>;
86+
}
87+
88+
<span class="hljs-selector-class">.example-option</span> {
89+
<span class="hljs-attribute">cursor</span>: pointer;
90+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0.3rem</span> <span class="hljs-number">1rem</span>;
91+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
92+
<span class="hljs-attribute">display</span>: flex;
93+
<span class="hljs-attribute">overflow</span>: hidden;
94+
<span class="hljs-attribute">flex-shrink</span>: <span class="hljs-number">0</span>;
95+
<span class="hljs-attribute">align-items</span>: center;
96+
<span class="hljs-attribute">justify-content</span>: space-between;
97+
<span class="hljs-attribute">gap</span>: <span class="hljs-number">1rem</span>;
98+
}
99+
100+
<span class="hljs-selector-class">.example-option-text</span> {
101+
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
102+
}
103+
104+
<span class="hljs-selector-class">.example-checkbox-blank-icon</span>,
105+
<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-checkbox-filled-icon</span> {
106+
<span class="hljs-attribute">display</span>: flex;
107+
<span class="hljs-attribute">align-items</span>: center;
108+
}
109+
110+
<span class="hljs-selector-class">.example-checkbox-filled-icon</span>,
111+
<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-checkbox-blank-icon</span> {
112+
<span class="hljs-attribute">display</span>: none;
113+
}
114+
115+
<span class="hljs-selector-class">.example-checkbox-blank-icon</span> {
116+
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.6</span>;
117+
}
118+
119+
<span class="hljs-selector-class">.example-selected-icon</span> {
120+
<span class="hljs-attribute">visibility</span>: hidden;
121+
}
122+
123+
<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-selected-icon</span> {
124+
<span class="hljs-attribute">visibility</span>: visible;
125+
}
126+
127+
<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
128+
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mat-sys-primary);
129+
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-number">10%</span>, transparent);
130+
}
131+
132+
<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-pseudo">:hover</span> {
133+
<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-on-surface) <span class="hljs-number">10%</span>, transparent);
134+
}
135+
136+
<span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:focus-within</span> <span class="hljs-selector-attr">[data-active=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
137+
<span class="hljs-attribute">outline</span>: <span class="hljs-number">2px</span> solid <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-number">80%</span>, transparent);
138+
}
139+
140+
<span class="hljs-selector-class">.example-tree</span> {
141+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
142+
<span class="hljs-attribute">overflow-x</span>: scroll;
143+
}
144+
145+
<span class="hljs-selector-class">.example-tree-item</span> {
146+
<span class="hljs-attribute">cursor</span>: pointer;
147+
<span class="hljs-attribute">list-style</span>: none;
148+
<span class="hljs-attribute">text-decoration</span>: none;
149+
<span class="hljs-attribute">display</span>: flex;
150+
<span class="hljs-attribute">align-items</span>: center;
151+
<span class="hljs-attribute">gap</span>: <span class="hljs-number">1rem</span>;
152+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0.3rem</span> <span class="hljs-number">1rem</span>;
153+
}
154+
155+
<span class="hljs-selector-tag">li</span><span class="hljs-selector-attr">[aria-expanded=<span class="hljs-string">&#x27;false&#x27;</span>]</span> + <span class="hljs-selector-tag">ul</span><span class="hljs-selector-attr">[role=<span class="hljs-string">&#x27;group&#x27;</span>]</span> {
156+
<span class="hljs-attribute">display</span>: none;
157+
}
158+
159+
<span class="hljs-selector-tag">ul</span><span class="hljs-selector-attr">[role=<span class="hljs-string">&#x27;group&#x27;</span>]</span> {
160+
<span class="hljs-attribute">padding-inline-start</span>: <span class="hljs-number">1rem</span>;
161+
}
162+
163+
<span class="hljs-selector-class">.example-icon</span> {
164+
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
165+
<span class="hljs-attribute">width</span>: <span class="hljs-number">24px</span>;
166+
}
167+
168+
<span class="hljs-selector-class">.example-parent-icon</span> {
169+
<span class="hljs-attribute">transition</span>: transform <span class="hljs-number">0.2s</span> ease;
170+
}
171+
172+
<span class="hljs-selector-class">.example-tree-item</span><span class="hljs-selector-attr">[aria-expanded=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-parent-icon</span> {
173+
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">90deg</span>);
174+
}
175+
176+
<span class="hljs-selector-class">.example-selected-icon</span> {
177+
<span class="hljs-attribute">visibility</span>: hidden;
178+
<span class="hljs-attribute">margin-left</span>: auto;
179+
}
180+
181+
<span class="hljs-selector-class">.example-tree-item</span><span class="hljs-selector-attr">[aria-current]</span> <span class="hljs-selector-class">.example-selected-icon</span>,
182+
<span class="hljs-selector-class">.example-tree-item</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-selected-icon</span> {
183+
<span class="hljs-attribute">visibility</span>: visible;
184+
}
185+
186+
<span class="hljs-selector-class">.example-dialog</span> {
187+
<span class="hljs-attribute">position</span>: absolute;
188+
<span class="hljs-attribute">left</span>: auto;
189+
<span class="hljs-attribute">right</span>: auto;
190+
<span class="hljs-attribute">top</span>: auto;
191+
<span class="hljs-attribute">bottom</span>: auto;
192+
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
193+
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-outline);
194+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
195+
}
196+
197+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-input-container</span> {
198+
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0</span>;
199+
}
200+
201+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-container</span>,
202+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-input-container</span> {
203+
<span class="hljs-attribute">border</span>: none;
204+
}
205+
206+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-input</span> {
207+
<span class="hljs-attribute">border-bottom-left-radius</span>: <span class="hljs-number">0</span>;
208+
<span class="hljs-attribute">border-bottom-right-radius</span>: <span class="hljs-number">0</span>;
209+
}
210+
211+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:focus-within</span> <span class="hljs-selector-class">.example-combobox-input</span> {
212+
<span class="hljs-attribute">outline</span>: none;
213+
<span class="hljs-attribute">box-shadow</span>: none;
214+
}
215+
216+
<span class="hljs-selector-class">.example-dialog</span> <span class="hljs-selector-class">.example-combobox-input-container</span> {
217+
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-outline);
218+
}
219+
220+
<span class="hljs-selector-class">.example-dialog</span><span class="hljs-selector-pseudo">::backdrop</span> {
221+
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;
222+
}

0 commit comments

Comments
 (0)