Update SelectButton

components/lib/selectbutton/style/SelectButtonStyle.js

@@ -4,7 +4,6 @@ const classes = {
     root: ({ props }) => [
         'p-selectbutton p-component',
         {
-            'p-disabled': props.disabled,
             'p-invalid': props.invalid
         }
     ],

components/lib/themes/primeone/base/selectbutton/index.js

@@ -4,78 +4,32 @@ export default {
     display: inline-flex;
     user-select: none;
     vertical-align: bottom;
-    border: 1px solid transparent;
-    background: ${dt('selectbutton.background')};
-    border-radius: ${dt('rounded.base')};
     outline-color: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-}
-
-.p-selectbutton .p-button {
-    flex: 1 1 auto;
-    background: transparent;
-    border: 0 none;
-    color: ${dt('selectbutton.item.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    outline-color: transparent;
-    padding: 0.5rem 1rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     border-radius: ${dt('rounded.base')};
-    gap: 0.5rem;
+}
+
+.p-selectbutton .p-togglebutton {
+    border-radius: 0;
+}
+
+.p-selectbutton .p-togglebutton:focus-visible {
     position: relative;
-    cursor: pointer;
+    z-index: 1;
 }
 
-.p-selectbutton .p-button::before {
+.p-selectbutton .p-togglebutton:first-child {
-    content: "";
+    border-top-left-radius: ${dt('rounded.base')};
-    background: transparent;
+    border-bottom-left-radius: ${dt('rounded.base')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    position: absolute;
-    left: 0.25rem;
-    top: 0.25rem;
-    width: calc(100% - 0.5rem);
-    height: calc(100% - 0.5rem);
-    border-radius: ${dt('rounded.sm')};
 }
 
-.p-selectbutton .p-button .p-button-label {
+.p-selectbutton .p-togglebutton:last-child {
-    position: relative;
+    border-top-right-radius: ${dt('rounded.base')};
-    transition: none;
+    border-bottom-right-radius: ${dt('rounded.base')};
-}
-
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-    color: ${dt('selectbutton.item.hover.color')};
-}
-
-.p-selectbutton .p-button.p-highlight {
-    color: ${dt('selectbutton.item.checked.color')};
-}
-
-.p-selectbutton .p-button.p-highlight::before {
-    background: ${dt('selectbutton.item.checked.background')};
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
-}
-
-.p-selectbutton .p-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-selectbutton.p-invalid {
-    border-color: ${dt('selectbutton.invalid.border.color')};
+    outline: 1px solid ${dt('selectbutton.invalid.border.color')};
-}
+    outline-offset: 0;
-
-.p-selectbutton.p-disabled {
-    opacity: 1;
-    background: ${dt('selectbutton.disabled.background')};
-}
-
-.p-selectbutton.p-disabled .p-button,
-.p-selectbutton .p-button.p-disabled {
-    background: ${dt('selectbutton.disabled.background')};
-    color: ${dt('selectbutton.item.disabled.color')};
 }
 `
 };

components/lib/themes/primeone/base/togglebutton/index.js

@@ -62,7 +62,9 @@ export default {
 
 .p-togglebutton:disabled {
     opacity: 1;
+    cursor: default;
     background: ${dt('togglebutton.disabled.background')};
+    border-color: ${dt('togglebutton.disabled.border.color')};
     color: ${dt('togglebutton.disabled.color')};
 }
 

components/lib/themes/primeone/presets/aura/selectbutton/index.js

@@ -2,30 +2,12 @@ export default {
     colorScheme: {
         light: {
             root: {
-                background: '{surface.100}',
-                disabledBackground: '{form.field.background.disabled}',
                 invalidBorderColor: '{form.field.invalid.border.color}'
-            },
-            item: {
-                checkedBackground: '{surface.0}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                checkedColor: '{surface.900}',
-                disabledColor: '{form.field.text.color.disabled}'
             }
         },
         dark: {
             root: {
-                background: '{surface.950}',
-                disabledBackground: '{form.field.background.disabled}',
                 invalidBorderColor: '{form.field.invalid.border.color}'
-            },
-            item: {
-                checkedBackground: '{surface.800}',
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                checkedColor: '{surface.0}',
-                disabledColor: '{form.field.text.color.disabled}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/togglebutton/index.js

@@ -6,6 +6,7 @@ export default {
                 checkedBackground: '{surface.0}',
                 disabledBackground: '{form.field.disabled.background}',
                 borderColor: '{surface.100}',
+                disabledBorderColor: '{form.field.disabled.background}',
                 invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.500}',
                 hoverColor: '{surface.700}',
@@ -25,6 +26,7 @@ export default {
                 checkedBackground: '{surface.800}',
                 disabledBackground: '{form.field.disabled.background}',
                 borderColor: '{surface.950}',
+                disabledBorderColor: '{form.field.disabled.background}',
                 invalidBorderColor: '{form.field.invalid.border.color}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}',

doc/theming/styled/utils/DTDoc.vue

@@ -1,5 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
+        <div class="notification mb-3">This feature is not yet available in beta.1 and scheduled for beta.2.</div>
         <p>The <i>$dt</i> function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />