From cda77e25e440876235ea3cec4c3cd8909eb66a96 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 19 Jan 2024 15:24:20 -0800 Subject: [PATCH 1/4] feat(@clayui/panel): Update displayType and size props (LPS-202818) As previously discussed, we are now using two now displayTypes that only affect the styles of the component, and adding a new "size" prop that modifies the text size. --- packages/clay-panel/src/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/clay-panel/src/index.tsx b/packages/clay-panel/src/index.tsx index 1b3940262a..625757fe6d 100644 --- a/packages/clay-panel/src/index.tsx +++ b/packages/clay-panel/src/index.tsx @@ -51,7 +51,7 @@ export interface IProps extends React.HTMLAttributes { /** * Flag to indicate the visual variation of the Panel. */ - displayType?: 'unstyled' | 'secondary'; + displayType?: 'block' | 'default' | 'secondary' | 'unstyled'; /** * Determines if menu is expanded or not (controlled). @@ -68,6 +68,11 @@ export interface IProps extends React.HTMLAttributes { */ showCollapseIcon?: boolean; + /** + * Flag to indicate the visual variation of the Panel. + */ + size?: 'lg' | 'sm'; + /** * Path to spritemap for clay icons */ @@ -94,6 +99,7 @@ function ClayPanel({ expanded, onExpandedChange, showCollapseIcon = true, + size, spritemap, ...otherProps }: IProps) { @@ -115,6 +121,7 @@ function ClayPanel({ {...otherProps} className={classNames('panel', className, { [`panel-${displayType}`]: displayType, + [`panel-${size}`]: size, })} > {!collapsable && ( From 35412b51b488ff416e369419eb3092110c63bf38 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 19 Jan 2024 17:12:36 -0800 Subject: [PATCH 2/4] feat(@clayui/css): Panels adds new variants and sizes - panel-default and panel-block - panel-sm and panel-lg --- .../src/scss/atlas/variables/_panels.scss | 20 ++ .../clay-css/src/scss/components/_panels.scss | 110 +++++++--- .../clay-css/src/scss/mixins/_panels.scss | 24 +++ .../clay-css/src/scss/variables/_panels.scss | 195 ++++++++++++++++++ 4 files changed, 316 insertions(+), 33 deletions(-) diff --git a/packages/clay-css/src/scss/atlas/variables/_panels.scss b/packages/clay-css/src/scss/atlas/variables/_panels.scss index 3fa23dbff3..e4a3510ef6 100644 --- a/packages/clay-css/src/scss/atlas/variables/_panels.scss +++ b/packages/clay-css/src/scss/atlas/variables/_panels.scss @@ -10,6 +10,9 @@ $panel-header-link: () !default; $panel-header-link: map-deep-merge( ( transition: box-shadow 0.15s ease-in-out, + hover: ( + text-decoration: $panel-header-link-hover-text-decoration, + ), focus: ( box-shadow: $component-focus-box-shadow, outline: 0, @@ -41,6 +44,23 @@ $panel-title-text-transform: uppercase !default; $panel-title-small-font-size: 100% !default; $panel-title-small-margin-left: 0.375rem !default; // 6px +// Panel + +$panel: () !default; +$panel: map-deep-merge( + ( + panel-header: ( + border-bottom: $panel-header-border-bottom-width solid transparent, + font-size: $panel-header-font-size, + collapsed: ( + link: $panel-header-collapsed-link, + ), + link: $panel-header-link, + ), + ), + $panel +); + // Panel Group Sm $panel-group-sm: () !default; diff --git a/packages/clay-css/src/scss/components/_panels.scss b/packages/clay-css/src/scss/components/_panels.scss index 6a4257579e..f1448de56f 100644 --- a/packages/clay-css/src/scss/components/_panels.scss +++ b/packages/clay-css/src/scss/components/_panels.scss @@ -1,26 +1,11 @@ .panel { - background-color: $panel-bg; - border-color: $panel-border-color; - border-style: $panel-border-style; - border-width: $panel-border-width; - - @include border-radius($panel-border-radius); - - margin-bottom: $panel-margin-bottom; - word-wrap: break-word; + @include clay-css($panel); } .panel-header { - border-bottom: $panel-header-border-bottom-width solid transparent; - - @include border-top-radius($panel-header-offset-border-radius); + $_header: setter(map-get($panel, panel-header), ()); - display: block; - font-size: $panel-header-font-size; - line-height: $panel-header-line-height; - padding: $panel-header-padding-y $panel-header-padding-x; - position: relative; - width: 100%; + @include clay-css($_header); @if ($enable-c-inner) { .c-inner { @@ -31,12 +16,11 @@ } &.collapsed { - @include border-bottom-radius($panel-header-offset-border-radius); + @include clay-css(map-get($_header, collapsed)); } &.collapse-icon { - padding-left: $panel-header-collapse-icon-padding-left; - padding-right: $panel-header-collapse-icon-padding-right; + @include clay-css(map-get($_header, collapse-icon)); @if ($enable-c-inner) { .c-inner { @@ -50,6 +34,20 @@ } } + &.collapse-icon-middle { + $_collapse-icon-middle: setter( + map-get($panel, collapse-icon-middle), + () + ); + + @include clay-css($_collapse-icon-middle); + + .collapse-icon-closed, + .collapse-icon-open { + @include clay-css(map-get($_collapse-icon-middle, collapse-icon)); + } + } + .collapse-icon-closed, .collapse-icon-open { bottom: $panel-header-collapse-icon-bottom; @@ -61,10 +59,14 @@ } .panel-header-link { - @include clay-link($panel-header-link); + $_header-link: setter(map-get($panel, panel-header), ()); + + @include clay-link(map-get($_header-link, link)); &.panel-header.collapsed { - @include clay-link($panel-header-collapsed-link); + $_header-collapsed: setter(map-get($_header-link, collapsed), ()); + + @include clay-link(map-get($_header-collapsed, link)); } .collapse-icon { @@ -82,25 +84,21 @@ } .panel-body { - padding: $panel-body-padding-y $panel-header-padding-x; + @include clay-css(map-get($panel, panel-body)); } .panel-footer { - @include border-bottom-radius($panel-footer-offset-border-radius); - - border-top: $panel-footer-border-top-width solid transparent; - padding: $panel-footer-padding-y $panel-footer-padding-x; + @include clay-css(map-get($panel, panel-footer)); } .panel-title { - font-size: $panel-title-font-size; - font-weight: $panel-title-font-weight; - text-transform: $panel-title-text-transform; + $_title: setter(map-get($panel, panel-title), ()); + + @include clay-css($_title); small, .small { - font-size: $panel-title-small-font-size; - margin-left: $panel-title-small-margin-left; + @include clay-css(map-get($_title, small)); } } @@ -335,6 +333,28 @@ // Panel Variants +@each $color, $value in $panel-palette { + @if not clay-is-map-unset($value) { + $selector: if( + starts-with($color, '.') or + starts-with($color, '#') or + starts-with($color, '%'), + $color, + if(starts-with($color, 'panel'), str-insert($color, '.', 1), $color) + ); + + @if (starts-with($color, '%') or map-get($value, extend)) { + #{$selector} { + @include clay-panel-variant($value); + } + } @else { + #{$selector} { + @include clay-panel-variant($value); + } + } + } +} + .panel-secondary { @include clay-panel-variant($panel-secondary); } @@ -344,3 +364,27 @@ .panel-unstyled { @include clay-panel-variant($panel-unstyled); } + +// Panel Sizes + +@each $color, $value in $panel-sizes { + @if not clay-is-map-unset($value) { + $selector: if( + starts-with($color, '.') or + starts-with($color, '#') or + starts-with($color, '%'), + $color, + if(starts-with($color, 'panel'), str-insert($color, '.', 1), $color) + ); + + @if (starts-with($color, '%') or map-get($value, extend)) { + #{$selector} { + @include clay-panel-variant($value); + } + } @else { + #{$selector} { + @include clay-panel-variant($value); + } + } + } +} diff --git a/packages/clay-css/src/scss/mixins/_panels.scss b/packages/clay-css/src/scss/mixins/_panels.scss index 926bdd46eb..2f8eaec53c 100644 --- a/packages/clay-css/src/scss/mixins/_panels.scss +++ b/packages/clay-css/src/scss/mixins/_panels.scss @@ -327,6 +327,14 @@ @include clay-link($header-link); } + &.collapse-icon { + $_panel-header: setter(map-get($map, panel-header), ()); + + @include clay-css( + map-get($_panel-header, '&.collapse-icon') + ); + } + &:not(.collapse-icon-middle) { .collapse-icon-closed, .collapse-icon-open { @@ -334,6 +342,22 @@ } } + &.collapse-icon-middle { + $_collapse-icon-middle: setter( + map-get($map, collapse-icon-middle), + () + ); + + @include clay-css($_collapse-icon-middle); + + .collapse-icon-closed, + .collapse-icon-open { + @include clay-css( + map-get($_collapse-icon-middle, collapse-icon) + ); + } + } + .panel-group & { + .panel-collapse > .panel-body { border-color: map-get($base, border-color); diff --git a/packages/clay-css/src/scss/variables/_panels.scss b/packages/clay-css/src/scss/variables/_panels.scss index 40bd4b7036..326bc624fe 100644 --- a/packages/clay-css/src/scss/variables/_panels.scss +++ b/packages/clay-css/src/scss/variables/_panels.scss @@ -94,6 +94,71 @@ $panel-title-text-transform: null !default; $panel-title-small-font-size: null !default; $panel-title-small-margin-left: null !default; +$panel: () !default; +$panel: map-deep-merge( + ( + background-color: $panel-bg, + border-color: $panel-border-color, + border-radius: clay-enable-rounded($panel-border-radius), + border-style: $panel-border-style, + border-width: $panel-border-width, + box-shadow: clay-enable-shadows($panel-box-shadow), + margin-bottom: $panel-margin-bottom, + word-wrap: break-word, + collapse-icon-middle: ( + collapse-icon: ( + font-size: inherit, + ), + ), + panel-header: ( + border-bottom: $panel-header-border-bottom-width solid transparent, + border-top-left-radius: + clay-enable-rounded($panel-header-offset-border-radius), + border-top-right-radius: + clay-enable-rounded($panel-header-offset-border-radius), + display: block, + font-size: $panel-header-font-size, + line-height: $panel-header-line-height, + padding: $panel-header-padding-y $panel-header-padding-x, + position: relative, + width: 100%, + collapsed: ( + border-bottom-left-radius: + clay-enable-rounded($panel-header-offset-border-radius), + border-bottom-right-radius: + clay-enable-rounded($panel-header-offset-border-radius), + link: $panel-header-collapsed-link, + ), + collapse-icon: ( + padding-left: $panel-header-collapse-icon-padding-left, + padding-right: $panel-header-collapse-icon-padding-right, + ), + link: $panel-header-link, + ), + panel-body: ( + padding: $panel-body-padding-y $panel-body-padding-x, + ), + panel-footer: ( + border-bottom-left-radius: + clay-enable-rounded($panel-footer-offset-border-radius), + border-bottom-right-radius: + clay-enable-rounded($panel-footer-offset-border-radius), + border-top: $panel-footer-border-top-width solid transparent, + padding: $panel-footer-padding-y $panel-footer-padding-x, + ), + panel-title: ( + font-size: $panel-title-font-size, + font-weight: $panel-title-font-weight, + text-transform: $panel-title-text-transform, + small: ( + font-size: $panel-title-small-font-size, + margin-left: $panel-title-small-margin-left, + ), + ), + ), + $panel +); + // Panel Group $panel-group-panel-margin-bottom: math-sign( @@ -212,3 +277,133 @@ $panel-unstyled: map-deep-merge( ), $panel-unstyled ); + +$panel-palette: () !default; +$panel-palette: map-deep-merge( + ( + panel-block: ( + border-color: $gray-400, + collapse-icon: ( + font-size: inherit, + top: 1.3125rem, + ), + panel-header: ( + font-size: 1.25rem, + line-height: 1.25, + padding: 1.15625rem 1.25rem, + '&.collapse-icon': ( + padding-right: 3rem, + ), + ), + panel-title: ( + font-size: inherit, + text-transform: none, + ), + panel-body: ( + padding: 0 1.25rem 1.25rem, + ), + panel-footer: ( + padding: 0 1.25rem 1.25rem, + ), + ), + panel-default: ( + border-width: 0px, + panel-header: ( + border-radius: clay-enable-rounded(0), + color: $gray-600, + font-size: 0.875rem, + line-height: 1.125rem, + padding-bottom: 0.40625rem, + padding-left: 0, + padding-right: 0, + padding-top: 0.40625rem, + text-transform: uppercase, + '&.collapse-icon': ( + padding-right: 1.75rem, + ), + link: ( + border-bottom: 1px solid $gray-400, + ), + ), + collapse-icon: ( + font-size: inherit, + right: 0, + top: 0.5rem, + ), + collapse-icon-middle: ( + collapse-icon: ( + right: 0, + ), + ), + panel-body: ( + padding: 1.25rem 0, + ), + panel-title: ( + font-size: inherit, + ), + panel-footer: ( + padding: 1.25rem 0, + ), + ), + ), + $panel-palette +); + +// Panel Sizes + +$panel-sizes: () !default; +$panel-sizes: map-deep-merge( + ( + '.panel-lg.panel-block': ( + collapse-icon: ( + top: 1.75rem, + ), + panel-header: ( + font-size: 1.5rem, + padding: 1.5rem 1.5rem, + '&.collapse-icon': ( + padding-right: calc(1.5rem * 3), + ), + ), + panel-body: ( + padding: 0 1.5rem 1.5rem, + ), + panel-footer: ( + padding: 0 1.5rem 1.5rem, + ), + ), + '.panel-sm.panel-block': ( + collapse-icon: ( + top: 0.9375rem, + ), + panel-header: ( + font-size: 1rem, + padding: 0.8125rem 1rem, + '&.collapse-icon': ( + padding-right: calc(1rem * 3), + ), + ), + panel-body: ( + padding: 0 1rem 1rem, + ), + panel-footer: ( + padding: 0 1rem 1rem, + ), + ), + '.panel-sm.panel-default': ( + collapse-icon: ( + top: 0.375rem, + ), + panel-header: ( + font-size: 0.75rem, + line-height: 1, + padding-bottom: 0.34375rem, + padding-top: 0.34375rem, + '&.collapse-icon': ( + padding-right: 1.75rem, + ), + ), + ), + ), + $panel-sizes +); From d2fa04cd0081deda9d3490ea227dcbae5a764462 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 19 Jan 2024 17:16:51 -0800 Subject: [PATCH 3/4] chore(@clayui/panel): Update tests with size and new displayTypes --- .../__tests__/__snapshots__/index.tsx.snap | 57 +++++++++++++++---- packages/clay-panel/src/__tests__/index.tsx | 26 ++++++--- 2 files changed, 63 insertions(+), 20 deletions(-) diff --git a/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap index d0de32532c..cd1fae9ba9 100644 --- a/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap +++ b/packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap @@ -36,10 +36,10 @@ exports[`ClayPanel renders 1`] = ` exports[`ClayPanel renders with custom displayTitle 1`] = `
+
+ + Display Title + +
+
+ Header! +
+
+ Body! +
+
+ Footer! +
+
+
+`; + +exports[`ClayPanel renders with different size 1`] = ` +
+
{ const {container} = render( + Header! + Body! + Footer! + + ); + + expect(container).toMatchSnapshot(); + }); + + it('renders with different size', () => { + const {container} = render( + Header! @@ -95,7 +111,6 @@ describe('ClayPanel', () => {

Custom Panel Title

} - displayType="secondary" showCollapseIcon spritemap="/foo/bar" > @@ -110,12 +125,7 @@ describe('ClayPanel', () => { it('renders without displayTitle', () => { const {container} = render( - + Header! Body! Footer! From 32d8087ccb4dbf2e13ddcad49491941fd4bfcd91 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 19 Jan 2024 17:17:28 -0800 Subject: [PATCH 4/4] chore(@clayui/panel): Update storybook with new displayTypes and sizes --- packages/clay-panel/stories/Panel.stories.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/clay-panel/stories/Panel.stories.tsx b/packages/clay-panel/stories/Panel.stories.tsx index f771db5f90..038f8071b3 100644 --- a/packages/clay-panel/stories/Panel.stories.tsx +++ b/packages/clay-panel/stories/Panel.stories.tsx @@ -12,7 +12,11 @@ export default { argTypes: { displayType: { control: {type: 'select'}, - options: ['secondary', 'unstyled', undefined], + options: ['default', 'block', undefined], + }, + size: { + control: {type: 'select'}, + options: ['lg', 'sm', undefined], }, }, component: ClayPanel, @@ -20,7 +24,11 @@ export default { }; export const Default = (args: any) => ( - + Header! Body! Footer! @@ -42,6 +50,7 @@ export const Collapsable = (args: any) => { displayTitle="Toggle me for expanding!" displayType={args.displayType} showCollapseIcon={args.showCollapseIcon} + size={args.size} > Header! Body! @@ -61,6 +70,7 @@ export const Collapsable = (args: any) => { expanded={expanded} onExpandedChange={setExpanded} showCollapseIcon={args.showCollapseIcon} + size={args.size} > Header! Body! @@ -100,7 +110,7 @@ export const Sheet = (args: any) => ( @@ -117,7 +127,7 @@ Sheet.args = { fluid: true, }; -export const CollapsableWithTitle = () => ( +export const CollapsableWithTitle = (args: any) => ( ( State } + displayType={args.displayType} showCollapseIcon + size={args.size} > Header! Body!