feat: change all instances of .is-selected to .is-open

BREAKING CHANGE: Use .is-open to indicate the popover is shown, not .is-selected
adobe · Dec 1, 2020 · e28af42 · e28af42
1 parent ee08255
commit e28af42
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/components/inputgroup/metadata/combobox.yml b/components/inputgroup/metadata/combobox.yml
@@ -53,7 +53,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-Picker spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-Picker spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -125,7 +125,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>

diff --git a/components/picker/index.css b/components/picker/index.css
@@ -173,7 +173,7 @@ governing permissions and limitations under the License.
  }
 
  &:active,
- &.is-selected {
+ &.is-open {
  background-color: var(--spectrum-picker-m-background-color-down);
  border-color: var(--spectrum-picker-m-border-color-down);
 
@@ -208,7 +208,7 @@ governing permissions and limitations under the License.
  }
 
  &:active,
- &.is-selected {
+ &.is-open {
  border-color: var(--spectrum-picker-m-border-color-error-down);
  }
 
@@ -280,7 +280,7 @@ governing permissions and limitations under the License.
  }
 
  &:active,
- &.is-selected {
+ &.is-open {
  background-color: var(--spectrum-picker-quiet-m-background-color-down);
  border-color: var(--spectrum-picker-quiet-m-border-color-down);
 

diff --git a/components/searchwithin/metadata/searchwithin.yml b/components/searchwithin/metadata/searchwithin.yml
@@ -30,7 +30,7 @@ examples:
 
  <h4>Open</h4>
  <form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
- <button type="button" class="spectrum-Picker spectrum-SearchWithin-picker is-open is-selected" aria-haspopup="true">
+ <button type="button" class="spectrum-Picker spectrum-SearchWithin-picker is-open" aria-haspopup="true">
  <span class="spectrum-Picker-label">All</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />

diff --git a/components/tabs/metadata/tabs.yml b/components/tabs/metadata/tabs.yml
@@ -369,7 +369,7 @@ examples:
 
  <h4 style="margin-top: 62px;">Open</h4>
  <div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
- <button class="spectrum-Picker spectrum-Picker--quiet is-selected" aria-haspopup="true">
+ <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
  <span class="spectrum-Picker-label">Tab 1</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -404,7 +404,7 @@ examples:
  markup: |
  <h4>Closed</h4>
  <div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
- <button class="spectrum-Picker spectrum-Picker--quiet is-selected" aria-haspopup="true">
+ <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
  <span class="spectrum-Picker-label">Tab 1</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -415,7 +415,7 @@ examples:
 
  <h4 style="margin-top: 62px;">Open</h4>
  <div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
- <button class="spectrum-Picker spectrum-Picker--quiet is-open is-selected" aria-haspopup="true">
+ <button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
  <span class="spectrum-Picker-label">Tab 1</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />