diff --git a/components/lib/fieldset/Fieldset.d.ts b/components/lib/fieldset/Fieldset.d.ts index c0c6f6d62..aec0bc517 100755 --- a/components/lib/fieldset/Fieldset.d.ts +++ b/components/lib/fieldset/Fieldset.d.ts @@ -82,6 +82,10 @@ export interface FieldsetPassThroughOptions { * Used to pass attributes to the toggle icon's DOM element. */ toggleIcon?: FieldsetPassThroughOptionType; + /** + * Used to pass attributes to the legend label's DOM element. + */ + toggleButton?: FieldsetPassThroughOptionType; /** * Used to pass attributes to the legend label's DOM element. */ diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue index 424116e8b..d95006396 100755 --- a/components/lib/fieldset/Fieldset.vue +++ b/components/lib/fieldset/Fieldset.vue @@ -11,9 +11,10 @@ :aria-controls="id + '_content'" :aria-expanded="!d_collapsed" :aria-label="buttonAriaLabel" + :class="cx('toggleButton')" @click="toggle" @keydown="onKeyDown" - v-bind="{ ...toggleButtonProps, ...ptm('toggler') }" + v-bind="{ ...toggleButtonProps, ...ptm('toggleButton') }" > diff --git a/components/lib/fieldset/style/FieldsetStyle.js b/components/lib/fieldset/style/FieldsetStyle.js index 25222feff..dad553426 100644 --- a/components/lib/fieldset/style/FieldsetStyle.js +++ b/components/lib/fieldset/style/FieldsetStyle.js @@ -4,53 +4,55 @@ const theme = ({ dt }) => ` .p-fieldset { background: ${dt('fieldset.background')}; border: 1px solid ${dt('fieldset.border.color')}; - border-radius: ${dt('border.radius.md')}; + border-radius: ${dt('fieldset.border.radius')}; color: ${dt('fieldset.color')}; - padding: 0 1.125rem 1.125rem 1.125rem; + padding: ${dt('fieldset.padding')}; margin: 0; } .p-fieldset-legend { background: ${dt('fieldset.legend.background')}; - border-radius: 6px; - border: 0 none; - padding: 0.5rem 0.75rem; - margin-bottom: 0.375rem; + border-radius: ${dt('fieldset.legend.border.radius')}; + border-width: ${dt('fieldset.legend.border.width')}; + border-style: solid; + border-color: ${dt('fieldset.legend.border.color')}; + padding: ${dt('fieldset.legend.padding')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; } .p-fieldset-toggleable > .p-fieldset-legend { padding: 0; } -.p-fieldset-toggleable > .p-fieldset-legend > button { +.p-fieldset-toggle-button { cursor: pointer; user-select: none; overflow: hidden; position: relative; text-decoration: none; display: flex; - gap: 0.5rem; + gap: ${dt('fieldset.legend.gap')}; align-items: center; justify-content: center; - padding: 0.5rem 0.75rem; + padding: ${dt('fieldset.legend.padding')}; background: transparent; - color: ${dt('fieldset.legend.color')}; border: 0 none; - border-radius: ${dt('border.radius.md')}; - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('fieldset.legend.border.radius')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; outline-color: transparent; } .p-fieldset-legend-label { - font-weight: 600; + font-weight: ${dt('fieldset.legend.font.weight')}; } -.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; +.p-fieldset-toggle-button:focus-visible { + box-shadow: ${dt('fieldset.legend.focus.ring.shadow')}; + outline: ${dt('fieldset.legend.focus.ring.width')} ${dt('fieldset.legend.focus.ring.style')} ${dt('fieldset.legend.focus.ring.color')}; + outline-offset: ${dt('fieldset.legend.focus.ring.offset')}; } -.p-fieldset-toggleable > .p-fieldset-legend > a:hover { +.p-fieldset-toggleable > .p-fieldset-legend:hover { color: ${dt('fieldset.legend.hover.color')}; background: ${dt('fieldset.legend.hover.background')}; } @@ -60,12 +62,12 @@ const theme = ({ dt }) => ` transition: color ${dt('transition.duration')}; } -.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon { +.p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon { color: ${dt('fieldset.toggle.icon.hover.color')}; } .p-fieldset .p-fieldset-content { - padding: 0; + padding: ${dt('fieldset.content.padding')}; } `; @@ -78,6 +80,7 @@ const classes = { ], legend: 'p-fieldset-legend', legendLabel: 'p-fieldset-legend-label', + toggleButton: 'p-fieldset-toggle-button', toggleIcon: 'p-fieldset-toggle-icon', contentContainer: 'p-fieldset-content-container', content: 'p-fieldset-content' diff --git a/components/lib/themes/aura/fieldset/index.js b/components/lib/themes/aura/fieldset/index.js index a0d4ae327..358956e2c 100644 --- a/components/lib/themes/aura/fieldset/index.js +++ b/components/lib/themes/aura/fieldset/index.js @@ -2,16 +2,34 @@ export default { root: { background: '{content.background}', borderColor: '{content.border.color}', - color: '{content.color}' + borderRadius: '{content.border.radius}', + color: '{content.color}', + padding: '0 1.125rem 1.125rem 1.125rem' }, legend: { background: '{content.background}', - color: '{content.color}', hoverBackground: '{content.hover.background}', - hoverColor: '{content.hover.color}' + color: '{content.color}', + hoverColor: '{content.hover.color}', + borderRadius: '{content.border.radius}', + borderWidth: '1px', + borderColor: 'transparent', + padding: '0.5rem 0.75rem', + gap: '0.5rem', + fontWeight: '700', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } }, toggleIcon: { color: '{text.muted.color}', hoverColor: '{text.hover.muted.color}' + }, + content: { + padding: '0' } }; diff --git a/components/lib/themes/lara/fieldset/index.js b/components/lib/themes/lara/fieldset/index.js index a0d4ae327..2c1b587b5 100644 --- a/components/lib/themes/lara/fieldset/index.js +++ b/components/lib/themes/lara/fieldset/index.js @@ -2,16 +2,48 @@ export default { root: { background: '{content.background}', borderColor: '{content.border.color}', - color: '{content.color}' + borderRadius: '{content.border.radius}', + color: '{content.color}', + padding: '0.75rem 1.125rem 1.125rem ' }, legend: { - background: '{content.background}', - color: '{content.color}', - hoverBackground: '{content.hover.background}', - hoverColor: '{content.hover.color}' + borderRadius: '{content.border.radius}', + borderWidth: '1px', + borderColor: '{content.border.color}', + padding: '0.5rem 0.75rem', + gap: '0.5rem', + fontWeight: '700', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } }, toggleIcon: { color: '{text.muted.color}', hoverColor: '{text.hover.muted.color}' + }, + content: { + padding: '0' + }, + colorScheme: { + light: { + legend: { + background: '{surface.100}', + hoverBackground: '{surface.200}', + color: '{text.color}', + hoverColor: '{text.hover.color}' + } + }, + dark: { + legend: { + background: '{surface.800}', + hoverBackground: '{surface.700}', + color: '{text.color}', + hoverColor: '{text.hover.color}' + } + } } };