diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx index 073175e210..c0ca366ec6 100644 --- a/src/button-dropdown/internal.tsx +++ b/src/button-dropdown/internal.tsx @@ -3,13 +3,14 @@ import React, { useEffect, useImperativeHandle, useRef } from 'react'; import clsx from 'clsx'; -import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal'; +import { isThemeActive, Theme, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import InternalBox from '../box/internal'; import { ButtonProps } from '../button/interfaces'; import { InternalButton, InternalButtonProps } from '../button/internal'; import Dropdown from '../dropdown/internal'; +import { IconProps } from '../icon/interfaces'; import { useFunnel } from '../internal/analytics/hooks/use-funnel.js'; import { getBaseProps } from '../internal/base-component'; import OptionsList from '../internal/components/options-list'; @@ -141,13 +142,14 @@ const InternalButtonDropdown = React.forwardRef( const canBeFullWidth = !!fullWidth && (variant === 'primary' || variant === 'normal'); const triggerVariant = variant === 'navigation' ? undefined : variant === 'inline-icon' ? 'inline-icon' : variant; - const iconProps: Partial = + const iconProps: Partial = variant === 'icon' || variant === 'inline-icon' ? { iconName: 'ellipsis', } : { - iconName: 'caret-down-filled', + iconName: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled', + __iconSize: isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal', iconAlign: 'right', __iconClass: spinWhenOpen(styles, 'rotate', canBeOpened && isOpen), }; diff --git a/src/button-dropdown/styles.scss b/src/button-dropdown/styles.scss index 789901cf71..72e16ce1ef 100644 --- a/src/button-dropdown/styles.scss +++ b/src/button-dropdown/styles.scss @@ -50,6 +50,8 @@ $dropdown-trigger-icon-offset: 2px; } .trigger-button { + display: flex; + align-items: center; &.full-width { display: grid; grid-template-columns: 1fr auto; diff --git a/src/button/internal.tsx b/src/button/internal.tsx index 8ef126bf7b..0253e78bc6 100644 --- a/src/button/internal.tsx +++ b/src/button/internal.tsx @@ -11,6 +11,7 @@ import { } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import { useInternalI18n } from '../i18n/context'; +import { IconProps } from '../icon/interfaces'; import Icon from '../icon/internal'; import { FunnelMetrics } from '../internal/analytics'; import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel'; @@ -51,6 +52,7 @@ export type InternalButtonProps = Omit & { badge?: boolean; analyticsAction?: string; __iconClass?: string; + __iconSize?: IconProps.Size; __focusable?: boolean; __injectAnalyticsComponentMetadata?: boolean; __title?: string; @@ -64,6 +66,7 @@ export const InternalButton = React.forwardRef( children, iconName, __iconClass, + __iconSize, onClick, onFollow, iconAlign = 'left', @@ -237,7 +240,7 @@ export const InternalButton = React.forwardRef( variant, badge, iconClass: __iconClass, - iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal', + iconSize: __iconSize ?? (variant === 'modal-dismiss' ? 'medium' : 'normal'), }; const buttonContent = ( <> diff --git a/src/expandable-section/expandable-section-header.tsx b/src/expandable-section/expandable-section-header.tsx index 357620cce9..ec8c0b3caf 100644 --- a/src/expandable-section/expandable-section-header.tsx +++ b/src/expandable-section/expandable-section-header.tsx @@ -3,7 +3,7 @@ import React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react'; import clsx from 'clsx'; -import { warnOnce } from '@cloudscape-design/component-toolkit/internal'; +import { isThemeActive, Theme, warnOnce } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import InternalHeader, { Description as HeaderDescription } from '../header/internal'; @@ -108,7 +108,15 @@ const ExpandableDeprecatedHeader = ({ aria-expanded={expanded} {...getExpandActionAnalyticsMetadataAttribute(expanded)} > -
{icon}
+
+ {icon} +
{children} ); @@ -201,7 +209,15 @@ const ExpandableHeaderTextWrapper = ({ {...headerButtonListeners} {...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})} > - {icon} + + {icon} + {children} @@ -267,9 +283,9 @@ export const ExpandableSectionHeader = ({ const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions; const icon = ( ); const defaultHeaderProps = { diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss index 0c4c76a441..6ffcb1bc3d 100644 --- a/src/expandable-section/styles.scss +++ b/src/expandable-section/styles.scss @@ -14,6 +14,7 @@ $icon-width-medium: awsui.$size-icon-medium; $icon-margin-left: '(#{awsui.$line-height-body-m} - #{$icon-width-normal}) / -2'; $icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}'; $icon-margin-right-medium: awsui.$space-xs; +$icon-offset: awsui.$space-xxxs; // Total space occupied by the expand icon on the left and its margins. // Useful to keep elements correctly aligned. @@ -52,6 +53,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{ // For vertical alignment of text in side navigation items &-container { margin-inline-end: $icon-margin-right-medium; + &.one-theme { + > .icon { + inset-block-start: calc(#{$icon-offset} * 3); + } + } + } + &.one-theme { + display: inline-flex; + align-items: flex-start; + > .icon { + inset-block-start: $icon-offset; + } } } diff --git a/src/internal/components/button-trigger/index.tsx b/src/internal/components/button-trigger/index.tsx index 92ed21a2ed..68935366a4 100644 --- a/src/internal/components/button-trigger/index.tsx +++ b/src/internal/components/button-trigger/index.tsx @@ -3,6 +3,7 @@ import React, { ButtonHTMLAttributes } from 'react'; import clsx from 'clsx'; +import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import InternalIcon from '../../../icon/internal'; @@ -129,8 +130,12 @@ const ButtonTrigger = ( > {children} {!hideCaret && ( - - + + )} diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss index a68a7967f4..1fea8b2ee7 100644 --- a/src/internal/components/button-trigger/styles.scss +++ b/src/internal/components/button-trigger/styles.scss @@ -12,6 +12,7 @@ $padding-inline-inner-filtering-token: styles.$control-padding-horizontal; $padding-block-inner-filtering-token: 0px; +$icon-offset: awsui.$space-xxxs; .button-trigger { @include styles.styles-reset; @@ -69,6 +70,9 @@ $padding-block-inner-filtering-token: 0px; inset-inline-end: styles.$control-icon-horizontal-offset; inset-block-start: styles.$control-icon-vertical-offset; color: awsui.$color-text-button-inline-icon-default; + &.one-theme { + inset-block-start: calc(styles.$control-icon-vertical-offset + $icon-offset); + } } &:hover { @@ -80,6 +84,9 @@ $padding-block-inner-filtering-token: 0px; &.pressed { > .arrow { transform: rotate(-180deg); + &.one-theme { + inset-block-start: calc(styles.$control-icon-vertical-offset - $icon-offset); + } } } diff --git a/src/status-indicator/internal.tsx b/src/status-indicator/internal.tsx index db189302bd..eec4a36370 100644 --- a/src/status-indicator/internal.tsx +++ b/src/status-indicator/internal.tsx @@ -3,6 +3,8 @@ import React from 'react'; import clsx from 'clsx'; +import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal'; + import { IconProps } from '../icon/interfaces'; import InternalIcon from '../icon/internal'; import { getBaseProps } from '../internal/base-component'; @@ -63,7 +65,11 @@ export function InternalStatusIcon({ }: InternalStatusIconProps) { return ( @@ -82,7 +88,7 @@ export default function StatusIndicator({ nativeAttributes, __animate = false, __internalRootRef, - __size = 'normal', + __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal', __display = 'inline-block', ...rest }: InternalStatusIndicatorProps) { @@ -107,6 +113,7 @@ export default function StatusIndicator({ className={clsx( styles.container, styles[`display-${__display}`], + isThemeActive(Theme.OneTheme) && styles['one-theme'], wrapText === false && styles['overflow-ellipsis'], __animate && styles['container-fade-in'] )} diff --git a/src/status-indicator/styles.scss b/src/status-indicator/styles.scss index e2039c69fb..ba6b1872ca 100644 --- a/src/status-indicator/styles.scss +++ b/src/status-indicator/styles.scss @@ -41,6 +41,14 @@ $_status-backgrounds: ( 'not-started': awsui.$color-background-status-indicator-neutral, ); +$_background-overrides: ( + 'red': awsui.$color-background-status-indicator-error, + 'grey': awsui.$color-background-status-indicator-neutral, + 'blue': awsui.$color-background-status-indicator-info, + 'green': awsui.$color-background-status-indicator-success, + 'yellow': awsui.$color-background-status-indicator-warning, +); + .root { @include styles.default-text-style; @each $status in map.keys($_status-colors) { @@ -58,6 +66,11 @@ $_status-backgrounds: ( background: #{map.get($_status-backgrounds, $status)}; } } + @each $color in map.keys($_background-overrides) { + &.color-override-#{$color} > .container { + background: #{map.get($_background-overrides, $color)}; + } + } } .container { @@ -72,6 +85,9 @@ $_status-backgrounds: ( > .icon { white-space: nowrap; + &.one-theme { + vertical-align: middle; + } } } @@ -79,9 +95,19 @@ $_status-backgrounds: ( display: inline-block; word-wrap: break-word; word-break: break-all; + &.one-theme { + display: inline-flex; + align-items: flex-start; + } > .icon { padding-inline-end: awsui.$space-xxs; + + &.one-theme { + display: inline-flex; + align-items: center; + margin-block-start: awsui.$space-xxxs; + } } } } @@ -92,4 +118,14 @@ $_status-backgrounds: ( text-overflow: ellipsis; white-space: nowrap; vertical-align: text-bottom; + + &.one-theme { + text-overflow: unset; + + > span:last-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } }