fix(segment): add and document custom properties

references #14850
references #14808
closes #14854

core/src/components/segment-button/segment-button.tsx

@@ -60,7 +60,7 @@ export class SegmentButton {
       class: {
         ...createColorClasses(color),
         'segment-button-disabled': disabled,
-        'segment-checked': checked,
+        'segment-button-checked': checked,
       },
       'ion-activable': true,
     };

core/src/components/segment/readme.md

@@ -25,6 +25,20 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 | `ionChange` | Emitted when the value property has changed. |
 
 
+## CSS Custom Properties
+
+| Name                      | Description                      |
+| ------------------------- | -------------------------------- |
+| `--background`            | Background of segment            |
+| `--background-checked`    | Background of checked segment    |
+| `--border-color`          | Color of segment border          |
+| `--border-color-checked`  | Color of checked segment border  |
+| `--border-color-disabled` | Color of disabled segment border |
+| `--color`                 | Color of segment text            |
+| `--color-checked`         | Color of checked segment text    |
+| `--color-disabled`        | Color of disabled segment text   |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/segment/segment.ios.scss

@@ -5,6 +5,15 @@
 // --------------------------------------------------
 
 :host {
+  --background: transparent;
+  --background-checked: #{ion-color(primary, base)};
+  --border-color: currentColor;
+  --border-color-checked: #{ion-color(primary, base)};
+  --border-color-disabled: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, base)};
+  --color-checked: #{ion-color(primary, contrast)};
+  --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
+
   font-family: $segment-ios-font-family;
 }
 
@@ -19,39 +28,26 @@
   --border-radius: #{$segment-button-ios-border-radius};
   --border-width: #{$segment-button-ios-border-width};
   --border-style: solid;
-  --border-color: #{current-color(base)};
-  --background: transparent;
   --transition: 100ms all linear;
   --icon-size: #{$segment-button-ios-icon-size};
 
   height: #{$segment-button-ios-height};
 
-  color: #{current-color(base)};
-
   font-size: #{$segment-button-ios-font-size};
 
   line-height: #{$segment-button-ios-line-height};
 }
 
-::slotted(.segment-checked) {
-  --background: #{current-color(base)};
-
-  color: #{current-color(contrast)};
-}
-
 ::slotted(.segment-button-disabled) {
-  color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
+  --border-color: var(--border-color-disabled);
+  --color: var(--color-disabled);
 }
 
-::slotted(ion-segment-button):hover:not(.segment-checked) {
+:host(.ion-color) ::slotted(.segment-button-disabled) {
-  --background: #{current-color(base, $segment-button-ios-background-color-alpha-hover)};
+  --border-color: #{current-color(base)};
+  --color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
 }
 
-::slotted(ion-segment-button):active:not(.segment-checked) {
-  --background: #{current-color(base, $segment-button-ios-background-color-alpha-active)};
-}
-
-
 // iOS Segment in Toolbar
 // --------------------------------------------------
 :host(.in-toolbar) {
@@ -69,19 +65,11 @@
   line-height: $segment-button-ios-toolbar-line-height;
 }
 
-:host(.in-color-toolbar) {
+:host(.in-color-toolbar:not(.ion-color)) {
-  --ion-color-base: inherit;
+  --color: #{current-color(contrast)};
-}
+  --color-checked: #{current-color(base)};
-
+  --color-disabled: #{current-color(contrast, $segment-button-ios-opacity-disabled)};
-:host(.in-color-toolbar) ::slotted(ion-segment-button) {
+  --background-checked: #{current-color(contrast)};
-  --border-color: currentColor;
+  --border-color-checked: #{current-color(contrast)};
-
+  --border-color-disabled: #{current-color(contrast)};
-  color: inherit;
-}
-
-:host(.in-color-toolbar) ::slotted(ion-segment-button.segment-checked) {
-  --background: #{current-color(contrast)};
-  --border-color: #{current-color(contrast)};
-
-  color: #{current-color(base)};
 }

core/src/components/segment/segment.md.scss

@@ -5,21 +5,15 @@
 // --------------------------------------------------
 
 :host {
-  color: $segment-button-md-text-color;
+  --background: transparent;
+  --background-checked: transparent;
+  --border-color: #{$segment-button-md-border-bottom-color};
+  --color: #{$segment-button-md-text-color};
+  --color-checked: #{$segment-button-md-text-color};
 
   font-family: $segment-md-font-family;
 }
 
-:host(.ion-color) {
-  // TODO can we remove important here
-  /* stylelint-disable-next-line declaration-no-important */
-  color: #{current-color(base)} !important;
-}
-
-:host(.in-color-toolbar) {
-  color: inherit;
-}
-
 :host(.segment-disabled) {
   opacity: $segment-md-opacity-disabled;
 }
@@ -32,8 +26,6 @@
   --padding-end: #{$segment-button-md-padding-end};
   --padding-bottom: #{$segment-button-md-padding-bottom};
   --padding-start: #{$segment-button-md-padding-start};
-  --background: transparent;
-  --border-color: #{$segment-button-md-border-bottom-color};
   --border-width: #{0 0 $segment-button-md-border-bottom-width 0};
   --border-style: solid;
   --opacity: #{$segment-button-md-opacity};
@@ -42,8 +34,6 @@
 
   height: $segment-button-md-height;
 
-  color: inherit;
-
   font-size: $segment-button-md-font-size;
   font-weight: $segment-button-md-font-weight;
 
@@ -57,10 +47,13 @@
 // Checked Segment Button
 // --------------------------------------------------
 
-::slotted(.activated),
+:host(.ion-color) ::slotted(.segment-button-checked) {
-::slotted(.segment-checked) {
+  --background: transparent;
-  --border-color: currentColor;
+  --color: #{current-color(base)};
+}
 
+::slotted(.activated),
+::slotted(.segment-button-checked) {
   opacity: $segment-button-md-opacity-activated;
 }
 
@@ -70,3 +63,10 @@
 ::slotted(.segment-button-disabled) {
   opacity: $segment-button-md-opacity-disabled;
 }
+
+// In Toolbar
+// --------------------------------------------------
+
+:host(.in-color-toolbar:not(.ion-color)) {
+  --color: #{current-color(contrast)};
+}

core/src/components/segment/segment.scss

@@ -4,10 +4,16 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
+  /**
-  --ion-color-base-rgb: #{ion-color(primary, base, null, true)};
+   * @prop --background: Background of segment
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+   * @prop --background-checked: Background of checked segment
-  --ion-color-shade: #{ion-color(primary, shade)};
+   * @prop --border-color: Color of segment border
+   * @prop --border-color-checked: Color of checked segment border
+   * @prop --border-color-disabled: Color of disabled segment border
+   * @prop --color: Color of segment text
+   * @prop --color-checked: Color of checked segment text
+   * @prop --color-disabled: Color of disabled segment text
+   */
 
   @include font-smoothing();
 
@@ -26,6 +32,28 @@
   pointer-events: none;
 }
 
+::slotted(ion-segment-button) {
+  --color: inherit;
+  --background: inherit;
+  --border-color: inherit;
+}
+
+:host(.ion-color) ::slotted(ion-segment-button) {
+  --color: #{current-color(base)};
+}
+
+::slotted(.segment-button-checked) {
+  --color: var(--color-checked);
+  --background: var(--background-checked);
+  --border-color: var(--border-color-checked);
+}
+
+:host(.ion-color) ::slotted(.segment-button-checked) {
+  --background: #{current-color(base)};
+  --border-color: #{current-color(base)};
+  --color: #{current-color(contrast)};
+}
+
 ::slotted(.segment-button-disabled) {
   pointer-events: none;
 }

core/src/components/segment/test/standalone/index.html

@@ -61,6 +61,19 @@
       Inactive
     </ion-segment-button>
   </ion-segment>
+
+  <ion-segment class="custom" value="active">
+    <ion-segment-button value="active">
+      Active
+    </ion-segment-button>
+    <ion-segment-button value="disabled" disabled="true">
+      Disabled
+    </ion-segment-button>
+    <ion-segment-button value="inactive" disabled="false">
+      Inactive
+    </ion-segment-button>
+  </ion-segment>
+
 </body>
 
 <script>
@@ -120,5 +133,16 @@
     white-space: pre;
     color: #314361;
   }
+
+  .custom {
+    --background-checked: navy;
+    --background: papayawhip;
+    --border-color-checked: navy;
+    --border-color-disabled: navy;
+    --border-color: navy;
+    --color-checked: papayawhip;
+    --color-disabled: rgba(0,0,0,0.3);
+    --color: navy;
+  }
 </style>
 </html>