Skip to content

Commit 402a155

Browse files
lazdGarthDB
lazd
authored and
GarthDB
committed
feat: refactor to use Picker
BREAKING CHANGE: now uses Picker markup
1 parent 9d48d09 commit 402a155

3 files changed

Lines changed: 23 additions & 20 deletions

File tree

‎components/inputgroup/metadata/combobox.yml‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ examples:
4141
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
4242
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
4343
</div>
44-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
45-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
44+
<button class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
45+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
4646
<use xlink:href="#spectrum-css-icon-Chevron100" />
4747
</svg>
4848
</button>
@@ -53,8 +53,8 @@ examples:
5353
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
5454
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
5555
</div>
56-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
57-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
56+
<button class="spectrum-Picker spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
57+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
5858
<use xlink:href="#spectrum-css-icon-Chevron100" />
5959
</svg>
6060
</button>
@@ -84,8 +84,8 @@ examples:
8484
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
8585
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
8686
</div>
87-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
88-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
87+
<button class="spectrum-Picker spectrum-InputGroup-button" aria-haspopup="true" disabled>
88+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
8989
<use xlink:href="#spectrum-css-icon-Chevron100" />
9090
</svg>
9191
</button>
@@ -99,8 +99,8 @@ examples:
9999
</svg>
100100
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
101101
</div>
102-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
103-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
102+
<button class="spectrum-Picker spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
103+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
104104
<use xlink:href="#spectrum-css-icon-Chevron100" />
105105
</svg>
106106
</button>
@@ -113,8 +113,8 @@ examples:
113113
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
114114
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
115115
</div>
116-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
117-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
116+
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
117+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
118118
<use xlink:href="#spectrum-css-icon-Chevron100" />
119119
</svg>
120120
</button>
@@ -125,8 +125,8 @@ examples:
125125
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
126126
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
127127
</div>
128-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
129-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
128+
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
129+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
130130
<use xlink:href="#spectrum-css-icon-Chevron100" />
131131
</svg>
132132
</button>
@@ -156,8 +156,8 @@ examples:
156156
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
157157
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
158158
</div>
159-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
160-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
159+
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
160+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
161161
<use xlink:href="#spectrum-css-icon-Chevron100" />
162162
</svg>
163163
</button>
@@ -171,8 +171,8 @@ examples:
171171
</svg>
172172
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
173173
</div>
174-
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
175-
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
174+
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
175+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
176176
<use xlink:href="#spectrum-css-icon-Chevron100" />
177177
</svg>
178178
</button>

‎components/inputgroup/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
"build": "gulp"
1717
},
1818
"peerDependencies": {
19-
"@spectrum-css/actionbutton": "^1.0.0-beta.0",
19+
"@spectrum-css/picker": "^1.0.0-beta.0",
2020
"@spectrum-css/textfield": "^3.0.0-beta.0",
2121
"@spectrum-css/vars": "^3.0.0-beta.1"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/actionbutton": "^1.0.0-beta.0",
24+
"@spectrum-css/picker": "^1.0.0-beta.0",
2525
"@spectrum-css/component-builder": "^2.0.0-beta.0",
2626
"@spectrum-css/icon": "^3.0.0-beta.1",
2727
"@spectrum-css/menu": "^3.0.0-beta.4",

‎components/inputgroup/skin.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,13 @@ governing permissions and limitations under the License.
104104
&:focus,
105105
&:active,
106106
&.is-selected,
107-
&.is-invalid,
107+
&.is-invalid {
108+
border-color: var(--spectrum-textfield-quiet-m-border-color);
109+
}
110+
108111
&:disabled,
109112
&:disabled:hover {
110-
border-color: var(--spectrum-textfield-quiet-m-border-color);
113+
border-color: var(--spectrum-textfield-quiet-m-border-color-disabled);
111114
}
112115
}
113116

0 commit comments

Comments
 (0)